The Multi-Grid One-Page Layout

An experiment using Flexbox & CSS Grid with HTML5 Sections

5 min readNov 9, 2017

The CSS Grid

I have found CSS Grid to be a fantastic way to layout a website. It can make the design, as well as the development of the front-end a million times faster and easier. I am a big fan!

CSS Grid enables you to create a grid, then go on to position elements of the page within and/or over the grid. If you are familiar with graphic design grid layouts then you will already feel comfortable with this idea, so when starting to work with CSS Grid it all seems to make perfect sense.

**Traditional Graphic Design Grid System Vs The CSS Grid**

Learning Flexbox + CSS Grid

You can find many great articles about both Flexbox, CSS Grid and using a combination of the two. At the end of this article I have included links to a few articles and resources which I have found very helpful while learning.

However, I have only found examples that use just a single CSS Grid across a whole website. With this article, I aim to introduce the idea of using multiple grids within just one website with the purpose of aiding the iteration process found within today’s development environments.

The Problem

For me, the problem started to arise when designing and developing a one-page website. Love them, or hate them, the one-pager still has its place on the web and when using CSS Grid this can become a little tricky. This is due to the fact that all sections of information are on that same one page, causing the grid to get extremely long. In turn, this means editing or adding sections at a later date during an iteration process can become troublesome.

This got me thinking…

“What if I used HTML5 Section tags to divide the grid into more manageable chunks?”

My Solution

With this in mind, I went about trying to create a solution to this problem and created The Multi-Grid One-Page Layout. This experimental layout demonstrates an alternative method of sectioning information while still having the benefits offered by CSS Grid layout. This is achieved through using HTML5 Section tags as usual but then placing separate CSS Grids within each section instead of just working with one huge site-long grid.

The result of using this method looks a little something like this demo I have created on CodePen.

The Code

For each HTML5 Section in the demo I have created a separate CSS Grid placed within the section as described earlier. The code I have used is pretty simple, as shown below.

HTML:

<section id="section-one">
  <h1>Section One</h1>
  <div class=”grid”>
    <div class=”box s1-a”>
      <h2>S1-A</h2>
    </div>   
    <div class=”box s1-b”>
      <h2>S1-B</h2>
    </div>
    <div class=”box s1-c”>
      <h2>S1-C</h2>
    </div>
    <div class=”box s1-d”>
      <h2>S1-D</h2>
    </div>
    <div class=”box s1-e”>
      <h2>S1-E</h2>
    </div>
    <div class=”box s1-f”>
      <h2>S1-F</h2>
    </div>
  </div>
</section>

CSS:

section#section-one {
  background: rgba(255, 153, 0, 0.8);
}section#section-one .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 4fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 4fr 1fr 1fr;
  margin: 1em;
  grid-gap: 1em;
}.box {
  display: flex;
  justify-content: center;
  background-color: rgb(255, 0, 196);
}.s1-a {
  grid-column: 1 / span 3;
  grid-row: 1 / span 2;
}.s1-b {
  grid-column: 4 / span 2;
  grid-row: 1 / span 4;
}.s1-c {
  grid-column: 1 / span 2;
  grid-row: 3 / span 1;
}

This is example code which has been shortened to get to the point. Please view on CodePen to see the full demo code.

In Conclusion

I have found with this method that the information architecture of a website is far easier to maintain. It also means that code can be edited faster when working within teams and within an iterative development process. However, this said, I feel that The Multi-Grid One-Page Layout is still just one solution, to just one problem.

I hope with CSS Grid we learn to break the mould that has become today’s front-end with most designers playing it safe and keeping to the same familiar layouts for every website they create. Flexbox and CSS Grid give designer/developers a much greater control and freedom over the layouts they create. As CSS Grid becomes further adopted I hope it will bring with it a far more creative landscape while still maintaining a high focus on UX.

One Last Note

It can be noted that another way to solve this problem would be through a method of using Nested Grids. By nesting smaller grids within the larger site-long grid a similar end result can be achieved. However, when placing a brand new section of information within a website it can still mean you need to move whole sections into other grid-areas. This then creates a domino-like knock-on effect which can be fiddly in more complex designs. It is for this reason I have found it is still easier to manage sections of content when using multi-grids nested within HTML5 Sections instead of other grids.

An example of Nested Grids can be found Here on Grid by Example created by Rachel Andrew.

Further Resources

As mentioned, here are some links to articles and resources of which I have found very helpful when learning Flexbox and CSS Grid.

A Complete Guide to Flexbox (article on CSS-Tricks) by Chris Coyier
Grid by Example (resources website) by Rachel Andrew
An Introduction to the `fr` CSS unit (article on CSS-Tricks) by Robin Rendle
Getting to know CSS Grid Layout (article on Campaign Monitor Engineering) by Chris Wright
Grid Garden (educational game) by Codepip
Flexbox Froggy (educational game) by Codepip
How Flexbox works - Explained with Big, Colorful, Animated GIFs (article on FreeCodeCamp) by Scott Domes

Thank You!

Thank you to everyone who has helped me learn CSS Grid, Flexbox and just plain old vanilla CSS over the years through creating awesome free resources like these I have listed above. I couldn’t have done it without you.

Thanks for reading!