Difference between revisions of "CSS Grid"
VKranendonk (talk | contribs) |
VKranendonk (talk | contribs) |
||
Line 4: | Line 4: | ||
[[File:CSS_grid.png]] | [[File:CSS_grid.png]] | ||
== Video == | |||
You can follow the video and or read the steps below the video. | |||
{{#evt: | |||
service=vimeo | |||
|id=746478143 | |||
|dimensions=x400 | |||
}} | |||
== Parent and children == | == Parent and children == |
Revision as of 09:11, 5 September 2022
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.
Video
You can follow the video and or read the steps below the video.
Parent and children
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>
Columns and rows
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>
Fractions
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