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.

css-grid-layouts-print-example

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, there will soon to be an easier way to design and display web content. It’s an awesome time to be a designer because CSS Grid Layouts are gaining traction.

CSS Grid Support

Part of being a designer is knowing what the future of web design holds. CSS Grid Layouts are a game changer and will help ease some of the frustration around positioning that designers have had to deal with for many years. Although is is not quite a mainstream practice yet, it is something to look forward to.

Before we really dive into the power of grid layouts, it’s important to understand that browser support is not universal at this time, but hopefully this way of working will become more common in the future. The good news is that in the meantime, you can easily experiment with CSS Grid Layouts to become familiar with how the styling works.

If you follow along with the examples, you will need to make sure you are in a browser that supports it. Support is currently found in only Internet Explorer 10+ and Edge. There are other ways to view it in other browsers, but since it is not officially supported, you will have to use a different browser in “experimental mode.” If you view the Can I Use documentation on CSS Grid Layouts, at the time of this post, you will notice little flag indicators. These show that you will need to be in “flag mode.”

When you are testing grid layouts, you will need to do a couple things to see the layout accurately. To view things in Chrome, you will need to enable the  “Experimental Web Platform features.” To do this, use the chrome://flags address in the Chrome browser. When you load the chrome://flags URL, scroll down to the option to “Enable experimental Web Platform features.”

Firefox also allows you to view grid layouts with the “layout.css.grid.enabled” flag. It is similar to the instructions for Chrome. Use the about:config URL in the Firefox browser. Scroll down the list and enable the “layout.css.grid.enabled” option.

If you want to start using CSS Grid Layouts right away, there is a workaround for browsers that don’t support it yet. If you’re familiar with the idea of polyfills, there are some solutions that have been created. If you are not familiar with polyfills, they are basically a browser fallback that utilizes the power of JavaScript and allows the modern browser functionality (in this case the CSS Grid Layout) to work in older browsers.

Polyfills are out of this scope for this tutorial, but as more and more designers start to use this technology, more polyfill options are sure to turn up. If you’re ready to try one out, here’s a great polyfill option. Be sure to read the author’s documentation for details on how to use it.

Basically, before committing 100% to CSS Grid Layouts, but be sure to do some in-depth testing before using as production code.

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.

css-grid-layouts-grid-working

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: 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: 3rem;
}

The grid-template-columns and grid-template-rows properties are used to specify the width of the rows and columns. There are five columns defined for the layout. The 15px columns act as gutters to provide required spacing between elements. The third column takes up 0.25 parts of the remaining space. Similarly, fifth column takes up 0.75 parts of the remaining space.

There are responsive customizations that can be made, but this is a great step to take prior to that. It may seem like using pixel measurements would be limiting, however, using auto for the first row in grid-template-rows allows the row to expand as necessary based on the content inside it. The 25px row acts as a gutter.

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: 4;
  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: 3;
  grid-row-end: 6;
  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: 3;
  grid-column-end: 4;
  grid-row-start: 3;
  grid-row-end: 4;
  background: #f5c531;
  height: 400px;
}

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


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

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

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

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.”

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.

5 Comments

Join the discussion

Share this article:
Get more great content in your inbox

More articles

Build WordPress sites faster. Try Flywheel free today! Try Flywheel