The Simple Series

Hey there! This is my first in the Simple Series - a no thrills ride into making tough shit easy. In these short articles, I'll go over the very basics meant for everyday use cases. Put down your tea, this'll be over in a flash!

CSS Grids

Flexbox helps us create grids on the fly but what if we could go one step further? A new spec out called CSS Grids is something we can use today, albeit with modernizr/@supports for deeper support, to help us dig deeper into the structure of our grids. Let's say we have the following markup:

<div class="grid">
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
  <div class="item">item</div>
</div>

What if we want to make a 3 column grid out of these elements? Well, we could style each .item the old fashion way with float, width, padding, and margin but here's an easier way with CSS grids:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2em 1em;
}
  • display: grid; initializes the grid container
  • grid-template-columns refers to the structure of the grid's columns
  • repeat(3, 1fr) repeats 3 columns given 1 fraction unit of the grid
  • grid-gap shorthand for grid-column-gap grid-row-gap margins

Tada! A 3 Column Grid!

item
item
item
item
item
item

Flexy

Aside from those basics, I'm happy to report that flexbox properties are still in play for CSS Grids as well! Here are some of the most frequently used properties available with CSS Grids:

  • align-items: center;
  • align-content: center;
  • justify-content: space-between;

Happy Griddin

If you're hunkering down for the night and would like to go real deep in CSS Grids, be sure to check out Chris House's A Complete Guide to Grid. It's quite the crazy resource but it's exactly what helped me write this article.

Let me know what you guys think of the Simple Series! Is it too short? Too involved? Kinda confusing? Anyway, I'm toast. See you all later!