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