Have you tried Flywheel? Learn moreJoin the best designers and creative agencies in the world. Learn more

×
How to create a simple layout with CSS Grid Layouts

How to create a simple layout with CSS Grid Layouts

If you’ve ever dabbled in print design, you know where the idea of grid layouts originated from. A grid is a precise measurement tool used to position design elements on a page. This idea is often used on the web to make content organized and uniform, making for an improved viewing experience for your users.

When the practice of web design was new, layouts were pretty simple. Header, sidebar, content area, and footer. Now, as the web has evolved, our layouts have become more complex and we have a lot more to contend with as web designers. We often need numerous content regions, responsive design, multiple page layout template designs, amongst many other things. And to implement the design and get it to display correctly, floats and positioning are required. Floats sound simple, but these can sometimes be tricky to work with.

Luckily, the grid provides an easier way to design and display web content. It’s an awesome time to be a designer because CSS Grid Layouts are quickly gaining traction. It may feel like grids have been a new idea in web design in recent years, but believe it or not, CSS Grid Layouts have been in the works for many years. Browser support for them happened very quickly, so now they can help ease some of the frustration around positioning that designers have had to deal with for many years.

It’s finally time to break into the grid and explore the new design possibilities!

CSS Grid support

It all depends on the browsers you need to support, but there’s a pretty good chance that you do not have to worry about “flag mode” when using CSS Grids. You can always visit the Can I Use documentation to double check, but support for CSS Grids has dramatically increased and many designers are able to use it in production, which is cause for celebration!

Our free local development app, Local by Flywheel, will help you simplify your workflow and safely experiment with your site. Try it today!

CSS Grid Layout basics

By utilizing CSS, grid layouts will help define content areas on your web page. There is a relatively new set of properties defined in the CSS Grid Layout Specifications. This is a great resource to reference when learning more about this new way of layout design. CSS Grid Layouts help to simplify things and make creating layouts easier. Think of the grid as a structure where measurements can be defined.

css-grid-layouts-grid-diagram

Parts of the grid

Lines

In this case, there are five vertical lines and three horizontal lines. Lines are given numbers starting from one. Vertical lines are shown from left to right in this example, but this depends on the writing direction. Because this shows reading from left to right, if it is from right to left, things will be reversed. Lines can be given names (optional), which helps with referencing them in CSS.

Tracks

A track is the space between two parallel lines. In the diagram, there are four vertical tracks and two horizontal tracks. There is a great dual effort between lines and tracks. Lines are a great way to reference where the content starts and stops. Tracks are where the content actually goes.

Cells

Cells are found where a horizontal and a vertical track meet. There are eight cells in the diagram.

Areas

Cells come into play when specifying areas. An area is a rectangular shape that can span a number of cells. Like lines, areas can be optionally named. There are a few labels included in the diagram: “A,” “B,” and “C.”

Creating a grid layout

It can be helpful to sketch things out before starting your layout. There’s no substitute for good old graph paper.

HTML for the grid

<div class="container">
  <div class="grid header">Header</div>
  <div class="grid sidebar">Sidebar</div>
  <div class="grid content">Main Content</div>
  <div class="grid extra">Extra Content</div>
  <div class="grid footer">Footer</div>
</div>

The container is very important. Within the container are the different content blocks for the website. The order of the grid items within the container does not matter. Next, we’ll use CSS to place them in our layout.

CSS styles

After you are done with the HTML markup, the most important declaration is done in the CSS. Within the container, you need to apply display:grid or display:inline-grid. Use display:grid if you would like a block-level grid. Use display:inline-grid for inline-level grids. To learn more, check out this great reference guide.

.container {
  	display: grid;
  	grid-template-columns: 1fr 3fr;
        grid-column-gap: 10px;
        grid-row-gap: 15px;
}

.grid {
  background-color: #444;
  color: #fff;
  padding: 25px;
  font-size: 3rem;
}

The grid-template-columns and grid-template-rows properties are used to specify the width of the rows and columns. The grid-template-columns have been set as 1fr and 3fr. This is where the grid is taking shape with the fractional units. With these values, it is apparent there are two columns and they are not equal width. The column set to 3fr is three times wider than the other. This explains how the sidebar appears more narrow than the content area.

There are responsive customizations that can be made, but using the fractional units is a great first step. Spacing between areas can be controlled with the grid-column-gamp and the grid-row-gap.

Things look pretty tight, but with a few more specifications, things will take shape.

This example starts with placing the header, but elements can be placed in whatever order works best for you. If you want to start with the footer, that will work, too.

css-grid-layouts-grid-example-start

Let’s start with the header, which goes from column line 1 to column line 4 and row line 1 to row line 2. The CSS will look like this:

.header {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

You may notice that the sidebar is squished and we can’t see it very much. We will need to do a little rearranging. In this layout, referencing the lines to get the placement will help with the arrangement. The lines act as the guidelines. The header is located between the line at row one and the line at row two. For the sidebar, it will start at row three and end at line six. The header row ended at two, so this will be placed right under it. To view the example, see the project on Codepen.

We use grid-column-start to specify the starting vertical line for an element. In this case, it would be set to three. The grid-column-end indicates the ending vertical line for an element. In this case, this property would be equal to four. Other row values will also be set this same way. The placement of the sidebar is there, it is just covered by the content area.

.sidebar {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 4;
  background: #a0c263;
}

css-grid-layouts-grid-exmple-start-02

The main content starts at column three and ends at column four. The top of the sidebar and content area are even, so they both have a grid-row-start of three. You may be wondering how the content and sidebar are much taller. By putting a height on the container, in this case 400px, this is now taller than the other elements.

.content {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 3;
  background: #f5c531;
  height: 400px;
}

The last two content areas are the extra content area and the footer.

.extra {
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
  background: #898989;
}

.footer {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 3;
  grid-row-end: 4;
  background: #FFA500;
}  

css-grid-layouts-grid-example-start-final

End and start declarations can be written more efficiently. You may see grid-column-start: 1; and grid-column-end: 3; written in shorthand. This would look like grid-column: 1 / 3;. This same idea can be used to declare column row information.

Responsive advantages

Now that a layout has been created, it seems very “desktop.” What about tablets and mobile devices? CSS Grid Layouts work well with media queries so the design can adapt to different screen sizes. What’s really cool is that you can change the content areas at these different media query breakpoints. As a designer, this means you choose what is best for your layout at different breakpoints. For example, if you want the “extra content” to be placed above the “content” area, you can specify the correct columns and rows.

/* For mobile phones: */
    .header {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
  }

  .extra {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 3;
    grid-row-end: 4;
  }

  .content {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 5;
    grid-row-end: 6;
    background: #f5c531;
    height: 400px;
  }

By having the columns start at one and end at four, we’ve made the content areas full width. The grid rows are placed so that the “extra content” is now above the “content.”

Browser tool for CSS Grid Layout

As you’re designing layouts, or inspecting other websites, Firefox offers a great tool for working with CSS Grid Layouts. It is called CSS Grid Playground and it makes examining the grid very intuitive. By going to the inspector there’s an option in the layout tab to visually see how the grid is constructed. It will make the design process easier to have this tool to explore how different grid properties affect the overall grid layout and design.

CSS Grid Layouts are a new, exciting way to create web layouts. As you can see, it is pretty easy to be up and running when creating a simple page layout. This simple example is a good foundation for how to make more complex layouts. As this gains in popularity, there will be an advantage to this technology when designing for various devices and breakpoints with the layout customizations that can be made.

This article was originally published on August 3rd, 2016. It was last updated on December 6th, 2017.

8 Comments

  • Great article. I published similar primer some time ago on my blog. https://pawelgrzybek.com/lets-get-into-the-basics-of-css-grid-layout-model/
    Im uber excited about this module, and I’m waiting for a better support in all vendors. Thanks for write up!

    • Pawel, that is an excellent article. I love the visuals in the post, giving us an in-depth explanation of each grid element. I am also very excited for better browser support. Looking forward to the different ways things can be configured at different breakpoints with this new way of designing.

  • Lucas says:

    HTML Tables are back! In CSS form. Thanks for the intro, it’s good to stay ahead. :)

  • chakri says:

    Great article and the image is explaining everything thanks

  • pooledesign says:

    Great article on CSS grids, Abbey. What are your recommendations for connecting the dots and using rapid grid layout with WordPress? Are there themes that allow it better than others? Any that have markdown already in place, or what is the best way to integrate this layout into an existing non-already-grid-based theme?

    thanks!

  • AC says:

    Examples no longer seem to be working…..

    I just see all the divs following each other in a vertical layout, one after another.
    No grid.

    I am using Chrome: Version 59.0.3071.115 (Official Build) (64-bit), which caniuse
    says will support css grid layout. I did ‘enable’ Experimental Web Platform features, but same results.

    But also tried it on Firefox with same result.

    Here’s my css, and html:

    // grid exampl
    .container {
    display: grid;
    grid-template-columns: 0.25fr 15px 0.75fr;
    grid-template-rows: auto 25px auto 25px auto 25px auto;

    }
    .grid {
    background-color: #444;
    color: #fff;
    padding: 25px;
    font-size: 2rem;
    }
    .header {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    grid-row-end: 2;
    }
    .sidebar {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 3;
    grid-row-end: 6;
    background: #a0c263;
    }

    Compiler Project Manager Proof of Concept

    Header
    Sidebar
    Main Content
    Extra Content
    Footer

    $(“.toggle”).on(“click”, function() {
    $(“.toggle”).parent().toggleClass(‘active’);
    });

  • create a simple layout bootstrap

  • Thanks for helping me in finding a good layout.

Join the discussion

Share this article:
Get more great content in your inbox

More articles

Get content like this sent directly to your inbox!

Install WordPress locally free