CSS Grid
In CSS land there are multiple ways of positioning elements. The most common methods are absolute positioning
, Flexbox position: absolute;
and CSS grid display: flex;
.
display: grid;
This article will describe how to create a layout with CSS Grid.
CSS grid places its direct children onto a "grid". In the following HTML snippet the parent element has the class 'grid-container' and 6 children.
<div class="grid-container">
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
<div>Grid item 4</div>
<div>Grid item 5</div>
<div>Grid item 6</div>
</div>
We first have to set the parent element to be displayed as a grid via the CSS property
.
display
<style>
.grid-container {
display: grid;
}
</style>
We also have to create columns and or rows. We can do this with the properties
and grid-template-columns
.
grid-template-rows
<style>
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 300px 300px;
}
</style>
You can set the amount of columns by adding or removing values:
will create two columns of each 200 pixels width.grid-template-columns: 200px 200px;
will create 3 columns of each 200 pixels widthgrid-template-columns: 200px 200px 200px;
will create 3 columns, the first and last 200 pixels wide. The middle column 500 pixels wide.grid-template-columns: 300px 500px 500px;
The following snippet combines columns and rows to create a grid.
<div class="grid-container">
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
<div>Grid item 4</div>
<div>Grid item 5</div>
<div>Grid item 6</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 300px 300px;
}
</style>
Instead of pixels you can also use
which stands for fraction (for example 1/2 or 1/4). This is super handy to create fluid grids.
fr
In the following snippet we set
. Which means each column will be around 25% (1/4).
grid-template-columns: 1fr 1fr 1fr 1fr;
We also add
which sets the gutter to 10 pixels.
grid-column-gap: 10px;
<div class="grid-container">
<div>Grid item 1</div>
<div>Grid item 2</div>
<div>Grid item 3</div>
<div>Grid item 4</div>
<div>Grid item 5</div>
<div>Grid item 6</div>
</div>
<style>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 300px 300px;
grid-column-gap: 10px;
}
</style>
Resources
- CSS Grid course by Wes Bos is full-on in depth course on CSS Grid
- MDN Web Docs has a good introduction to CSS Grid
- CSS Grid Garden is a fun CSS grid game
- CSS Tricks has a good reference article on CSS Grid