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>
The code above will not show any difference in the browser. We also have to create columns and or rows. We can do this with the properties "grid-template-columns" and "grid-template-rows".
<style>
.grid-container {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 300px 300px;
}
</style>
The following code creates a grid of 3 columns, each column 200px wide and 2 rows of 300px height.
<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>
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