Day 23: February 25, 2019

Today’s Progress: CSS Grid Studies Pt. 1

Thoughts: At last! Mimi’s long awaited return to FCC Responsive Web Design Certification Curriculum. I mean someone out there had to wonder when I was going to get back on track with the lessons right?

Maybe? Kinda?

Moving on..today I began learning about the CSS grid property and for the most part, things were pretty straight forward.

Like..

…creating columns. It’s legit as easy as tossing out grid-template-columns and setting the size you want each column to be. So in this example, there are three columns and each one is set to be 100px.

Would you believe rows work the exact same way? I mean probably why would anyone make it more difficult than it had to be, come on mimi.

But wait! What if you wanted to set the size of the columns and rows but weren’t too wild about using pixels? Well, they got you fam.

Check this:

You can easily use fr, auto or a % to set the width/height.

In the example above, the first column will be 1fr, the second will be 100px and the third 2fr. What the heck is fr? Fractional units. As in that math concept most of us tried to forget about. Its come back to haunt us.

Key Takeaways From Day Twenty-Three:

  • grid-column is not a terrible, confusing property. I just need to learn to read more carefully and see what element is actually being adjusted.
  • Columns are tall, rows are wide.
  • Column is spelled c-o-l-u-m-n not colomn. (I know, I know)

Link To Project: N/A



Leave a Reply

Your email address will not be published. Required fields are marked *

css.php