CSS Grid: A Study

Categories
Blogs

Lately, I’ve been playing with CSS grid. In case you haven’t heard, its a recent-ish (2017) addition to CSS that allows you to easily make grids. It’s really that simple, well kind of. Let me get the basics out of the way, according to caniuse.com, it will work (minus a few small features) all the way back to IE9 and safari 10. Chrome and Firefox have supported it for so long that the last unsupported version was in early 2013 for both.

Yay, No more Floats!

CSS grid is hands down one of my favorite CSS features, it’s a shame that I am just now learning about it. It does exactly what you would expect, allows you to make grids. These grids are great in the fact that you don’t need floats, tons of nested flexbox, or javascript to make them. This results in grids that don’t break the flow of the document, leading to better usability and SEO. Grids are also made with well, CSS. This allows you to change them easily with just a few media queries.

See the Pen Css Grid Auto Flow Test by Jordan (@DevDossett) on CodePen.

Take the code pen above: Normally to make a grid like this, you would need to use have an insane amount of divs nested in one another for flex to work properly, use floats and deal with the in-escapable nightmare that those lead to, or use a javascript library/framework like bootstrap. Now, don’t get me wrong, using javascript is what I would and have done in the past. But it breaks the flow of the document. For images or suggested blogs that is not the end of the world. What if you want to change the location of the header/footer or dynamically add to the grid? This is where it becomes a chore even with javascript. One caveat, Isotope by Metafizzy is one of the best javascript libraries for this(Just to give you options).

Let’s Break It Down

Here is the HTML for the previous example:

<div class="grid">
  <ul>
    <li class="grid-item one-one"></li>
    <li class="grid-item two-one"></li>
    <li class="grid-item two-two"></li>
    <li class="grid-item one-one"></li>
    <li class="grid-item one-one"></li>
    <li class="grid-item three-two"></li>
    <li class="grid-item one-one"></li>
    <li class="grid-item two-two"></li>
    <li class="grid-item one-one"></li>
  </ul>
</div>

Notice how little nesting and bloat there is? It’s just a container div with an unordered list in it. Each of the boxes is just a list item and the size is controlled by its class.

Note: You technically don't even need the UL, each of
theose lis could be divs and you would have even less
bloat. But for my usage it makes more sense
semantically.

Here is the base CSS:

.grid {
  width: 800px;
  height: 2000px;
  margin: auto;
}

The CSS for this is just a few lines. First I’m defining the grid container. For this example, it’s hardcoded to 800 pixels wide. Ideally, it would be set to different sizes for different viewport widths.

.grid ul {
  display: grid;
  width: 800px;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-flow: row dense;
  column-gap: 10px;
  row-gap: 10px;
  list-style: none;
  padding: 0;
}

Next is the unordered list, this is what contains all of my list elements (the boxes). Its display property is set to grid (big surprise). The next property of note is the grid-template-columns. These are the columns of the grid. repeat 3 1fr means that it will repeat 3 columns of equal fractions taking up 100% width. “repeat” is one of the few parts of this that will not work with the earlier browsers. Fr is awesome in that you can do something like 2fr 1fr and have a column that takes up 66% space and one that takes up 33% space. Percentages and pixels would work fine here, but when there are 12 columns (like bootstrap has) or more then fr shines. Next, is “column-gap” and “row-gap” these define the “gutters” in-between the columns and rows. This can actually be shortened to “grid-gap” if both are the same. The last important style is “grid-auto-flow”. This style is what places the items that are undefined in location. “row” prioritizes the row and “dense” will fill any holes before creating a new row.

.grid ul .one-one {
  background-color: grey;
  grid-column-end: span 1;
  grid-row-end: span 1;
}

Finally, the actual grid items. this is the most simple part. Each item has a class for example, “one-one”. This specifies its height and width. The “grid-column-end” and “grid-row-end” are what defines where the grid item will lay then all that is left is defining the height. “span 1” means that it is one span of the grid so, one column wide and one row tall. “two-one” would be two wide and one tall, and “three-two” would be three wide and two tall. like the green one in the earlier example.

Wrapping up

To make this responsive all one has to do is at 800 pixels or however wide the grid is, resize the width and height of the grid items to make sense. An alternitave would be to set “display: grid” to “display: auto” and give the former grid items a height and auto width. Boom its responsive on mobile. No javascript required, no bootstrap or any framework, just some simple CSS.

The Idea

Funny enough I got the inspiration for this from looking at the blogs on Minecraft.net. This is the technique they used for the “More Blogs” section towards the bottom. The cool thing about it is you can load more blogs all day and it will make a nice little grid of images and all of them will be responsive even if you resize the browser.

Leave a Reply

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