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.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s