Image for post
Image for post

Design + CSS

Understanding CSS Grid

A comprehensive tutorial in 5 minutes

Christine Vallaure
Aug 27, 2019 · 5 min read

CSS Grid is a new way to create two-dimensional layouts on the web. With just a few lines of CSS, you can create a grid that was hardly possible before without JavaScript. No plugin or complicated installs, no heavy additional files, no more design limitations due to 12-columns only.

What kind of grids are possible?

In short: Actually, almost all grids that come to mind and many more. Choose the space, size and location of different grid items freely. A good overview of the most common grids with Markup can be found at Grid by Example.

Image for post
Image for post

Let’s get started! HTML markup for our example:

A div with the class of .container holds 5 div/items (can of course be more or less). If you like, you can experiment with the HTML and CSS markup in CodePen directly.

<div class="container">
<div class="item color-1"> item-1 </div>
<div class="item color-2"> item-2 </div>
<div class="item color-3"> item-3 </div>
<div class="item color-4"> item-4 </div>
<div class="item color-5"> item-5 </div>
</div>
Image for post
Image for post
I added some CSS styling for better understanding, not relevant for the grid

Base: Set Grid, Columns and Rows in the CSS

In the CSS, we turn the .container class into a grid by adding display:grid. With grid-template-columns we activate the desired columns, in this case 5 columns with 250px each. With grid-template-rowswe can set the height of the row (if needed), in this case 150px. And that's it, the first grid is done!

.container{
display: grid;
grid-template-columns: 250px 250px 250px 250px 250px;
grid-template-rows: 150px;
}
/* short form: */
grid-template-columns: repeat(5, 250px);
Image for post
Image for post

Setting the gutter

Any desired distance between the items can be created with grid-gap for all items or separate for horizontal and vertical distances with column-gap and row-gap. By the way you can use all common units, for example px for fixed gutters or % for flexible gutters.

.container{
display: grid;
grid-template-columns: repeat(5, 250px);
grid-template-rows: 150px;
grid-gap: 30px;
}
Image for post
Image for post

Automatic distribution to the available screen area with “fr”

A designer’s dream! With Fractional Units short fr you can divide the available space according to your wishes! Here, for example, we divide the screen size into 6 parts. The first column takes 1/6 = 1fr of the space, the second column 3/6= 3fr and the third column 2/6= 2fr. You can of course also add grid-gap if you wish.

.container{
display: grid;
grid-template-columns: 1fr 3fr 2fr;
}
Image for post
Image for post

all rows flexible

px and fr mixing for fixed and flexible columns

pxand fr can be mixed in any desired way the rest will adapt to the available space. Works like a charm!

.container{
display: grid;
grid-template-columns: 300px 3fr 2fr;
}
Image for post
Image for post
first row fixed by px, remaining layout flexible

Absolute freedom of arrangement

The best thing is, all items can take up as much space as you like even within the gird! For this purpose a starting point is set with grid-column-start and the end with grid-column-end. Or in short grid-column: startpoint / endpoint;

.container{
display: grid;
grid-template-columns: 1fr 3fr 2fr;
}
.item-1 {
grid-column: 1 / 4;
}
.item-5 {
grid-column: 3 / 4;
}
Image for post
Image for post

Don’t get confused by the grid lines, they start at the very beginning of the first item!

The same applies to vertical or full-area distribution!

Here CSS Grid can shine and prove its superiority over Boostrap and Co. Items can take all vertical sizes and positions with the help of grid-row. As we will see in the next example, this is an absolute advantage for adapting to different screen sizes and devices.

.container{
display: grid;
grid-template-columns: 1fr 3fr 2fr;
}
.item-2 {
grid-row: 1 / 3;
}
.item-1 {
grid-column: 1 / 4;
grid-row: 3 / 4;

}
Image for post
Image for post
Any vertical width and position

Adapting to different screen sizes and devices? Of course!

Here CSS Grid also has a clear advantage over conventional grids, depending on the screen size you can not only switch from flexible to fixed elements with media queries, you can also adjust the position of entire items!

.container{
display: grid;
grid-template-columns: 250px 3fr 2fr;
}
.item-1 {
grid-column: 1 / 4;
}
.item-2 {
grid-row: 2 / 4;
}
@media only screen and (max-width: 720px){
.container{
grid-template-columns: 1fr 1fr;
}
.item-1 {
grid-column: 1 / 3;
grid-row: 2 / 3;
}
.item-2 {
grid-row: 1 / 1;
}
}
Image for post
Image for post

Browser support

CSS Grid is now natively supported by all modern browsers (Safari, Chrome, Firefox, Edge). With a global support of 87.85% CSS Grids are already an alternative to Boostrap and Co.

Image for post
Image for post
Status: October 2018 via caniuse.com

Real life examples with CSS Grid

Slack, Company Website

Medium, right here :)

Skyler Hughes, Photography

Max Böck, front-end developer

Design+Code, tutorials for webdesigner

Hi Agency, Deck, template page

If you are a Designer

also check out my article about CSS Grid (same intro as here) AND setting up perfect Sketch files for CSS Grid.

Design + Sketch

The best collection of articles, tips, tutorials, and…

Christine Vallaure

Written by

Berlin-based UX/UI Designer with a passion for code www.christinevallaure.com

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Christine Vallaure

Written by

Berlin-based UX/UI Designer with a passion for code www.christinevallaure.com

Design + Sketch

The best collection of articles, tips, tutorials, and stories on designing and prototyping with Sketch and beyond

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store