Examples of layouts with CSS grid

CSS Grid on React projects
Photo by @markusspiske

During the rebuild of this website, I started to use CSS Grid for the layouts. But I always forgot the syntax. If you are like me and can't remember the difference between justify-content and align-items, this guide is for you.

As a front-end developer focused on React Native, I am not working on the web that much. I have forgotten almost all my knowledge about CSS.

But I have a fun solution to solve this issue: with a game!
I share it, every time when I am doing some mentoring.

cssgridgarden

Simple centered CSS grid children

CSS grid aligned item

.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
}

.children {
grid-column-start: 3
}

grid-column-start and grid-column-end

.children {
grid-column-start: 1;
grid-column-end: 4;
}

grid-column-end with a negative value

.children {
grid-column-start: 1;
grid-column-end: -2;
}

The span keyword in CSS grid

.children {
grid-column-start: 1;
grid-column-end: span 2;
}

grid-column with operation

.children {
grid-column: 4 / 6;
}

Place your children vertically

.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}

.children {
grid-row-start: 3;
}

CSS Grid building

.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
grid-template-rows: 20% 20% 20% 20% 20%;
}

.children {
grid-column: 2 / 6;
grid-row: span 6 ;
}

CSS grid tetris

.children-1 {
grid-area: 1 / 4 / 6 / 5;
}

.children-2 {
grid-area: 2 / 3 / 5 / 6;
}

CSS Grid order

.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
}

.children-1 {
order: 0;
}

.children-2 {
order: 5;
}

One more thing.
If you learned something new, let me know andshare this article on Twitter.

Meet the author

David is a freelance developer and trainer specializing in cross-platform application development. He helped dozens of companies to ship their MVP and automate their process.

Gravatar for dleuliette@gmail.com

David Leuliette

Freelance React Developer

twitter
github
Subscribe?

Be the first to receive insightful articles and actionable resources that help you to elevate your skills across every touch point.