The Interactive Guide to CSS Grid
📣 Sponsor
Creating layouts for your items which are responsive has never been easier, now that CSS Grids are broadly supported by most modern browsers. In the past, instead of using grids, floats were often used which led to many strange behaviours. Below, we'll cover the key features of the grid box, and how to use it.
With CSS grid, you define the grids, usually with grid-template-columns
and grid-template-rows
, and then place items on that grid, so you have complete control over where your content appears.
Create a Grid Box
grid-template-columns:
justify-items:
align-items:
row-gap:
px
column-gap:
px
Item 1 rows from to and columns from to
Item 2 rows from to and columns from to
Item 3 rows from to and columns from to
Item 4 rows from to and columns from to
Code from Generator
.item-1 {
grid-column: 1;
grid-row: 1;
}
.item-2 {
grid-column: 4/5;
grid-row: 2/3;
}
.item-3 {
grid-column: 1/2;
grid-row: 3/5;
}
.item-4 {
grid-column: 3/4;
grid-row: 4/5;
}
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
To make grid work, the container
element has to have display: grid;
attached to it. We can also do inline-grid
for creating grids which are inline with the text.
We then can set up the grid-template-columns
, and also grid-row-columns
if we want to. These two properties define how many rows and columns appear in the grid.
.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
row-gap: 1px;
column-gap: 1px;
}
Properties for Containers
See below for a reference of the key grid elements and how they work.
grid-template-columns
Sets the number of columns for the grid element. Different columns are separated by a space. You can have as many columns as you want.
grid-template-columns:
.container {
display: grid;
grid-template-columns: 20% 20% 20% 20% 20%;
}
grid-template-rows
Sets the number of rows for the grid element. Different rows are separated by a space. You can have as many rows as you want.
grid-template-rows:
.container {
display: grid;
grid-template-rows: 60px 60px 60px 60px 60px;
}
justify-items
Sets the position of items along the column axis, i.e. whether they should be left aligned or stretched.
justify-items:
.container {
display: grid;
justify-items: start;
}
align-items
Sets the position of items along the row axis, i.e. whether it should be aligned at the top, bottom, center or stretched.
align-items:
.container {
display: grid;
align-items: start;
}
row-gap/column-gap
Sets the gap between the different columns and rows in a grid.
row-gap:
px
column-gap:
px
.container {
display: grid;
row-gap: 2px;
column-gap: 2px;
}
Properties for Items
There are also properties that can be applied to individual items in a grid. Below is a reference of those items.
grid-column/grid-row
Sets the position of the item within the grid. Can be condensed to grid-area: [row-start] / [column-start] / [row-end] / [column-end].
Item 1 rows from to and columns from to
.item {
display: grid;
row-gap: 2px;
column-gap: 2px;
}
align-self
Align a particular item along the row axis.
align-self:
.container {
display: grid;
align-self: normal;
}
justify-self
Align a particular item along the column axis.
justify-self:
.container {
display: grid;
justify-self: normal;
}
More Tips and Tricks for CSS
- How to Create Animated Cards with WebGL and Three.js
- Automating CSS Dark Mode
- An Interactive Guide to CSS Flex Box
- CSS Pixel Art Generator
- CSS Inset Borders at Varying Depths
- How to Make your text look crisp in CSS
- Creating Custom, Interactive CSS Checkboxes
- CSS Animations
- Using Only CSS to Recreate Windows 98
- How to disable text selection in CSS