CSS Grid and website prototyping

Eric Njnaga Dec 27, 2017

CSS Grid can be used as a website prototyping tool. Supposing we’d like to try a couple of arrangement possibilities for a layout, CSS Grid is an excellent choice and we’ll see why!

Using Named Areas

CSS Grid “Named Areas” gives us the power to carve “specific areas” inside the grid and assign grid items to these area. Supposing our layout has a simple markup:

<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">CONTENT</div>
<div class="footer">FOOTER</div>

Using the grid-template-areas property, we create a 12 column grid and carve 4 areas for the following sections: header, side menu, content and footer:

.container {
//Defining container as a grid layout
display: grid;
//Defining the number of columns, rows and how tall each row will be
grid-template-columns: repeat(12, 1fr);
grid-template-rows: 50px 350px 50px;
grid-gap: 5px;
//Defining which area of the grid will be occupied by markup elements
grid-template-areas: 'h h h h h h h h h h h h'
'c c c c c c c c c c m m'
'f f f f f f f f f f f f';

Now using grid-area, we match the newly created grid areas with HTML Markup elements:

.container .header {
grid-area: h;
.container .menu {
grid-area: m;
.container .content {
grid-area: c;
.container .footer {
grid-area: f;

We get the following layout:

Grid layout with named areas

Grid layout with named areas (copyright: www.medium.com)

Now, to move around any section of the layout, we just have to play with grid-template-areas:

Menu and header on top, each spanning 6 columns, content span 12 columns

'm m m m m m h h h h h h'
'c c c c c c c c c c c c'
'f f f f f f f f f f f f'

Content spanning 6 column and centered

'm m m m m m h h h h h h'
'. . . c c c c c c . . .'
'f f f f f f f f f f f f'


In which case should we use Named Areas?

We should consider using Named Areas if we have the following problems:

  1. Need to quickly create a layout
  2. Need to try out several layout arrangements (moving blocks around)
  3. Need a flexible layout that can quickly grow in complexity without the markup having to do so
  4. Don’t want to write too much CSS rules
  5. Don’t have access or don’t want to change the markup

The most used CSS property names:

  • grid-template-areas
  • grid-area

CSS Grid module Takeout

  • It is all about building layouts
  • It reduces dependency to the markup
  • It’s fun


Inspiration: How to prototype websites quickly with CSS Grid by Harald Borgen