CSS Grid in 5 Minutes

CSS Grid is a method to allow us to easily build grids in CSS. Let’s take a look at how easy this is.

Let’s start with HTML. This gives us a wrapper and 4 small grid items.

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

Then, the CSS. We declare the wrapper to be a grid, to repeat columns with 1fr (1 fraction of the space 4 times or 1/4) and each should have a gap of 1em.

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
}

.grid-item {
  background-color: orange;
  min-height: 250px;
}

And that’s it! Here is the final result

See the Pen Your First CSS Grid in 5 Minutes by Keith (@thehollidayinn) on CodePen.