Web

June 26, 2019

Making layout easy with CSS Grids

From my experience, CSS grids is not as widely used (or known) as for example Flex-box. Since it is a quite new technology, one reason is that there is a popular belief that it is not widely supported by browsers. The truth is that all major browsers now support it. Here is a list of supported browsers.

A reason to start using CSS Grids is that it makes it very easy to create a view layout, but also to change the layout for different screen formats, for example mobile.

In this post, I’ll show an example of how to setup a layout for desktop and a separate layout for mobile.

Setting it up

Let’s start by creating a file called index.html with the following content.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<title>CSS Grids</title>
</head>
<body>
  <div class="app">
    <div class="header"></div>
    <div class="sidebar"></div>
    <div class="content"></div>
    <div class="footer"></div>
  </div>
</body>
</html>

We will use CSS Grids to layout the different divs on screen.
Let’s create the styling file index.css for the HTML document. To prevent confusion between the html-classes and the grid elements, the grid elements will start with a capital letter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
.app {
    display: grid;

    /* Make the web app take up the full screen. */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    /* This is how CSS Grids will layout our divs on screen. The layout is not in any way constrained to a 3 by 4 ratio. It can have any ratio.*/
    grid-template-areas: "Header Header Header"
                         "Sidebar Content Content"
                         "Sidebar Content Content"
                         "Footer Footer Footer";
    grid-template-columns: 150px 1fr 1fr;
    grid-template-rows: 100px 1fr 1fr 50px;
}
}

/* Here we define what grid area the class belongs to. */
.header {
    grid-area: Header;
    background-color: green;
}

.sidebar {
    grid-area: Sidebar;
    background-color: red;
}

.content {
    grid-area: Content;
    background-color: grey;
}

.footer {
    grid-area: Footer;
    background-color: blue;
}

Note:
The ‘fr’ unit is the ‘flex-factor’ and is basically the fraction. Here is a quote form the specs:
Tracks sized with fr units are called “flexible tracks”, as they flex in response to leftover space similar to how flex items fill space in a flex container.

When rendering it in the browser it looks like this.

The web app will now look like this. The different grid areas are styled with different colors.

Changing the layout

Now that all areas and structure is set up it is easy to make different layouts, for example mobile. We can simply change ‘grid-template-areas’ like this. Add the following lines under .app

1
2
3
4
5
6
7
8
9
10
@media (max-width: 750px) {
  grid-template-areas:
    “Header Header”
    “Content Content”
    “Content Content”
    “Footer Footer”;

  grid-template-rows: repeat(4, 1fr); /* I'll explain this shortly */
  grid-template-columns: 1fr 1fr;
}

Now if the window width is made smaller than 750 pixels it will instantly change to look like the screenshot below.

The layout is changed so that the sidebar is no longer visible. This is typical for a mobile design.

Nesting

It is also possible to use a grid inside another grid area. In this example, the Content area could be composed further with more sub-views. There is nothing stopping CSS Grid Layouts from being nested inside one another. So let’s add two div’s inside the ‘content’.

1
2
3
4
<div class="content">
  <div class="article"></div>
  <div class="comment-section"></div>
</div>

And let’s add these lines to the CSS file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.content {
    grid-area: Content;
    background-color: grey;

    display: grid;
    grid-template-areas: "Article Comments"
                         "Article Comments";
    grid-template-columns: 3fr 1fr;
    grid-template-rows: 1fr 1fr;
}

.article {
  grid-area: Article;
}

.comment-section {
  grid-area: Comments;
}

Now we have a nested CSS Grid!

The repeat function

In the mobile styling I used ‘repeat(4, 1fr);’. This is a function which allows you to be a little less redundant when writing your CSS code. Essentially it becomes:

1
repeat(4, 1fr) = 1fr 1fr 1fr 1fr

It is also possible to have other values there such as:

1
repeat(4, 100px)

Or:

1
repeat(4, 25%)

There are lots of more functionality to CSS Grids. For a complete guide on the functions I can recommend further reading here.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *