CSS grid and CSS flexbox

This week we start to learn about CSS grid. Last week, we learned about CSS flex styles. There are certainly times when you will be puzzled about which of these two choices is the best one for a particular design problem you are facing.

A CSS grid layout has one huge difference from a CSS flex layout:

  1. When you choose grid, you want to arrange items in two directions, both rows and columns, inside a grid container.
  2. When you choose flex, you will work with only one row, OR one column, inside a flex container.

You will still scratch your head over this choice at times, so here are two wonderful, free resources that might help:

  • Grid by Example is a site with tons of examples of how to use grid layouts, with a handy visual arrangement that makes it easy to identify a pattern that might work for your design.
  • CSS Flexbox Examples includes a bunch of sample layouts for distinct situations, like a photo gallery.

Flex actually has far fewer options, because with flex we are only arranging one row of things, or one column of things. So check this out: A Complete Guide to Flexbox.

For fancy, artistic grid examples, see Web Design Experiments by Jen Simmons.

Advertisements

CSS Grid resources

Ryan was kind enough to give us a demo of CSS Grid in class on Nov. 21. He recommended these resources for learning to use grid layouts:

.