🎉 Looking to get started with Grid? Download my free ebook! Get into Grid Now »

3 Strategies for Getting Started with CSS Grid

CSS Grid Layout has been in major browsers for a little less than a year now. Despite the excitement around it by people in the know, not everyone has jumped on board.

I understand. Despite its browser adoption happening in record time, we still live in an IE world sometimes.

While 2017 was the year of CSS Grid’s browser adoption, 2018 will be the year of its developer adoption.

If you’re wondering how to start, here are three strategies for adopting it into your workflow.

Reduce Excessive Markup

Our appetite for better designs has increased in the past five years. With that – and our reliance on old layout techniques – we’ve seen an explosion in nested markup.

Take this simple promotional grid layout for example.

Side-by-side comparison of a flex grid to a grid layout grid

To make this happen, we have to introduce a slew of markup to add rows inside of rows.

<section class="flexgrid">
<div class="left-side">
    <div class="item">1</div>
</div>

<div class="right-side">
    
    <div class="right-top">
        <div class="item">2</div>
    </div>

    <div class="right-bottom">
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

</div>
</section>

Keeping track of the nesting is a headache. It also fights against clean, semantic HTML. 

Let’s take the same design and build out the HTML we need for CSS Grid.

<section class="grid">
    <div class="grid__item">1</div>
    <div class="grid__item">2</div>
    <div class="grid__item">3</div>
    <div class="grid__item">4</div>
</section>

With one parent and four direct children, we can pull off uneven rows and columns. 

The promise of Grid Layout is the promise of semantic markup and true separation of concerns.

View my CodePen of the layouts side-by-side

Build a Multi-Column Form

While you’re simplifying your markup, you might as well take a look at upping your form game.

Sure a one-column form will get the job done, but why not add a little spice with multiple columns.

A simple form with both 2-column elements and 1-column full width elements

Instead of setting up rows of content inside of a form, tell the form to be two columns and let certain areas stretch.

In this example, we want the street address and comment box to have more room for comfortable writing.

By creating a “fullwidth” class that uses grid-column: span 2, we can have a single input change its layout. The other inputs that can be smaller remain side by side.

.form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
}
.fullwidth {
    grid-column: span 2;
}

View the example on CodePen

Use Grid Layout instead of the Bootstrap or Foundation Grid

I try to write a lot about Grid Layout bringing new design options to the table, but sometimes it’s worthwhile to use tested methods.

If you want to take a baby step into Grid, try recreating your 12-column Bootstrap or Foundation grid.

Start with a simple grid declaration and setup.

.grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-column-gap: 10px;
}

From there, you can set up classes that span various column counts.

.span3 {
    grid-column: span 3;
}
.span9 {
    grid-column: span 9;
}

I bet you can figure out the rest.

If you’re looking to get started, this is an easy shift in your workflow. This isn’t the best use of Grid. Start expanding your mindset to work outside of traditional ideas of what a grid is.

Bonus: Make a Responsive Grid with No Media Queries

One of the absolute coolest features in Grid layout is the combination of repeat() and minmax() functions.

I wrote a blog post on how to make a fluid grid of cards with no media queries. It’s pretty slick.

Start Experimenting with Grid

More than anything else, this represents a shift in the way we develop websites. It will require you playing and working in it.

Whatever strategy you implement to learn Grid, start learning it.

Promo Image for Free ebook - Common CSS Grid Patterns

Free ebook - Common CSS Grid Patterns

CSS Grid is a revolution in web layout. With this ebook, I cover 3 design patterns that Grid solves easier, better and more creatively to help push our designs in better directions.

Download Now!

You May Also Enjoy

Client work and the JAMstack

I worked at an agency for almost six years. In that time, I created only a handful of static sites. Part of this was because the agency had a custom content management system. The other part was an unwillingness to give up "dynamic" websites. I've created a website to aggregate resources for agencies and freelancers looking to branch out into the JAMstack.

Grid vs. Flex: A Tale of a "Simple" Promo Space

I love the new layout modes in CSS. Grid and Flexbox are both amazing features. They each have their place. What if I told you that if you used the "wrong" one, you could double your CSS and HTML? Let's take a look at what appears to be a simple promo grid.

Using Eleventy's (11ty) JavaScript Data Files

I enjoy building workflows for pure static sites. I enjoy ingesting data into my build process instead of loading my client-side with fetches. In this example, we'll use Eleventy's ability to use a JavaScript file, to execute code to fetch data on site build, negating the need for task runners like Gulp.

My Side Projects

Web Workers Logo Web Workers Logo Web Workers Logo Web Workers Logo