Here's a Super Quick Way to Try out CSS Grid

by Jen Simmons

August 15, 2017

A lot of people are getting excited about CSS Grid, and want to learn it. A lot of people are also super busy. So let me teach you some very basic things about Grid, and get you started with a 5-minute taste.

Unlike Bootstrap or any of the other layout frameworks we’ve been using for the last decade, CSS Grid does not get applied to the entire page with everything on it.

You define a grid on a specific element. All of the direct children of that element will be placed on that Grid. Nothing else on the page gets involved.

Start by thinking about what to make a Grid container, and how to structure your markup so you have the Grid items that you want.

One example:

<ul class="grid-container">
    <li>grid item</li>
    <li>grid item</li>
    <li>grid item</li>
</ul>

Then apply the definition of the grid to your Grid container, in this case, the <ul>.

What is the absolutely most basic way to define a Grid? This CSS:

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

There are many, many, many ways to define a grid, but that’s a super basic start. It will create four columns that are all the same width as each other — all one fraction of the available space.

Playing around with this CSS is one of the best ways to figure it out. To make that easier, I set-up what you need in a CodePen: https://codepen.io/jensimmons/pen/ryGwXO

Try it out. Add more 1frs to the list, and see what happens. Change one of them from 1fr to 2fr, and see what happens. Add grid-gap: 1rem; to make a space of 1rem between each column.

Ta da! You are using CSS Grid.




Now that you have a taste, you try out more by going through these basic exercises from my all-day workshop. The answers are in the JavaScript pane. Copy, paste and play.

Exercise Set 1

Exercise Set 2

Exercise Set 3