Difference between revisions of "CSS Grid"
VKranendonk (talk | contribs) |
VKranendonk (talk | contribs) |
||
(30 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
In CSS land there are multiple ways of positioning elements. The most common methods are absolute positioning {{code|inline=y|lang=css|position: absolute;}}, Flexbox {{code|inline=y|lang=css|display: flex;}} and CSS grid {{code|inline=y|lang=css|display: grid;}}. | |||
This article describes | This article describes how to create a layout with CSS Grid. | ||
CSS grid places its direct children onto a "grid". In the following HTML snippet | [[File:CSS_grid.png]] | ||
== Video == | |||
You can follow the video and read the steps below the video. | |||
{{#evt: | |||
service=vimeo | |||
|id=746478143 | |||
|dimensions=x420 | |||
}} | |||
== 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. | |||
<source lang="html5"> | <source lang="html5"> | ||
Line 16: | Line 30: | ||
</source> | </source> | ||
We first have to set the parent element to be displayed as a grid via CSS. | We first have to set the parent element to be displayed as a grid via the CSS property {{code|inline=y|lang=css|display}}. | ||
<source lang="css"> | |||
<style> | <style> | ||
.grid-container { | .grid-container { | ||
Line 23: | Line 38: | ||
} | } | ||
</style> | </style> | ||
</source> | |||
== Columns and rows == | |||
We also have to create columns and or rows. The CSS properties {{code|inline=y|lang=css|grid-template-columns}} and {{code|inline=y|lang=css|grid-template-rows}} are used to create columns and rows. | |||
<source lang="html5"> | |||
<style> | |||
.grid-container { | |||
display: grid; | |||
grid-template-columns: 200px 200px 200px; | |||
grid-template-rows: 300px 300px; | |||
} | |||
</style> | |||
</source> | |||
You can set the amount of columns by adding or removing values: | |||
* {{code|inline=y|lang=css|grid-template-columns: 200px 200px;}} will create two columns of each 200 pixels width. | |||
* {{code|inline=y|lang=css|grid-template-columns: 200px 200px 200px;}} will create 3 columns of each 200 pixels width | |||
* {{code|inline=y|lang=css|grid-template-columns: 300px 500px 500px;}} will create 3 columns, the first and last 200 pixels wide. The middle column 500 pixels wide. | |||
The following snippet combines columns and rows to create a grid. | |||
{{Columns}} | {{Columns}} | ||
{{Column}} | {{Column}}<source lang="html5"> | ||
<source lang="html5"> | |||
<div class="grid-container"> | <div class="grid-container"> | ||
<div>Grid item 1</div> | <div>Grid item 1</div> | ||
Line 46: | Line 78: | ||
} | } | ||
</style> | </style> | ||
</source> | |||
{{ColumnEnd}} | |||
{{Column}}[[File:CSS-grid-display-grid-with-rows.png]]{{ColumnEnd}} | |||
{{ColumnsEnd}} | |||
== Fractions == | |||
Instead of pixels you can also use {{code|inline=y|lang=css|fr}} which stands for fraction (for example 1/2 or 1/4). This is super handy to create fluid grids. | |||
In the following snippet we set {{code|inline=y|lang=css|grid-template-columns: 1fr 1fr 1fr 1fr;}}. Which means each column will be around 25% (1/4). | |||
We also add {{code|inline=y|lang=css|grid-column-gap: 10px;}} which sets the gutter to 10 pixels. | |||
{{Columns}} | |||
{{Column}}<source lang="html5"> | |||
<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> | |||
</source> | </source> | ||
{{ColumnEnd}} | {{ColumnEnd}} | ||
{{Column}} | {{Column}} | ||
[[File:CSS-grid-display-grid-with- | [[File:CSS-grid-display-grid-with-fractions.png]] | ||
{{ColumnEnd}} | {{ColumnEnd}} | ||
{{ColumnsEnd}} | {{ColumnsEnd}} | ||
== Dev tool tip == | |||
In Firefox developer tools you can show the CSS grid by clicking on the grid icon between "display" and "grid". | |||
[[File:Css-grid-ff-dev-tool.gif]] | |||
In Chrome developer tools you can click the grid icon next to the HTML element. | |||
[[File:Css-grid-ff-chrome-tool.gif]] | |||
== Resources == | == Resources == | ||
* [https://www.w3schools.com/css/css_grid.asp W3 Schools] overview of basic CSS properties including visuals | |||
* [https://cssgrid.io/ CSS Grid course by Wes Bos] is full-on in depth course on CSS Grid | * [https://cssgrid.io/ CSS Grid course by Wes Bos] is full-on in depth course on CSS Grid | ||
* [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout MDN Web Docs] has a good introduction to CSS Grid | * [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout MDN Web Docs] has a good introduction to CSS Grid | ||
* [https://cssgridgarden.com/ CSS Grid Garden] is a fun CSS grid game | * [https://cssgridgarden.com/ CSS Grid Garden] is a fun CSS grid game | ||
* [https://css-tricks.com/snippets/css/complete-guide-grid/ CSS Tricks] has a good reference article on CSS Grid | * [https://css-tricks.com/snippets/css/complete-guide-grid/ CSS Tricks] has a good reference article on CSS Grid |
Latest revision as of 08:04, 12 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 describes how to create a layout with CSS Grid.
Video
You can follow the video and 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. The CSS properties
and grid-template-columns
are used to create columns and rows.
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>
Dev tool tip
In Firefox developer tools you can show the CSS grid by clicking on the grid icon between "display" and "grid".
In Chrome developer tools you can click the grid icon next to the HTML element.
Resources
- W3 Schools overview of basic CSS properties including visuals
- 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