Day 24: February 26, 2019

Today’s Progress: CSS Grid Studies Pt. 2

Thoughts: Finished up my grid studies and since it’s the last section, I’ve finished the FCC Responsive Web Design Certification Curriculum as well. Just need to complete the last two projects to get my certificate.

As for what was covered in today’s grid studies, all very easy to grasp stuff. For example, I learned if you want to align an item horizontally in a certain fashion, use the property justify-self. By default, it’s set to stretch but you can set it to three other values:

First is start:

item2 is the orange block and giving justify-self a value of start slips it over to the left side.

Next is center:

By setting the value to center, item2 is set directly in the center of the cell.

Last is end:

I think we all get the picture by now lol, but setting end puts item2 at the right side or the “end” of the cell.

Super cool right : D

Want to do this kind of thing but vertically? Exact same values and structure, just use align-self property instead of justify-self.

Another thing discussed in this lesson was media queries. This was pretty simple too. Hilarious after the fact because I’d used one in my product landing page project but couldn’t grasp the meaning of it then.

Well it goes kinda like this:

You see how the min-width is set to 400px? This means when viewing at 400px or above the grid template of the container will be header on top, advert and content in middle and footer at the bottom.

Should note this isn’t exclusively for grids either. You can set media queries for things like text size, div size etc etc.

See? Easy stuff!

Key Takeaways From Day Twenty-Four:

  • Media queries are super simple.
  • Repeat function will save my life one day, I’m sure.
  • Align only has one l, one. ONE.

Link To Project: N/A

Leave a Reply

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