CSS Grids Explained

Grids are often used in web design, for making content fit nicely, especially for changing the alignment of certain screen sizes.

For example, maybe you have a grid of articles, which contain maybe an image and a text preview of the article:

[ article ] [ article ] [ article ]

But, when your user switches to their phone, perhaps it's too hard to read three article blurbs side by side like that. So, the grid switches to one article per line:

[ article ]

For this, you could use a grid of 12 columns. Your CSS could detect the screen size, and make an article take up 4 columns when on a desktop screen, but take up all 12 columns when on a small phone screen. Perhaps an in-between screen (like a tablet) could have an article take up 6 columns.

There are multiple external libraries that can be used for defining grids, but these days the built-in Grid display in CSS can handle it.

#grid_div {
  display: grid;
}

See other posts for examples.