Difference between revisions of "CSS Grid"

From Publication Station
 
(44 intermediate revisions by the same user not shown)
Line 1: Line 1:
CSS grid is used to create a layout. This article describes the basic concepts of CSS grid and additional links for extra studies.
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 how to create a layout with CSS Grid.
 
[[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">
<div class="grid-container>
<div class="grid-container">
   <div>Grid item 1</div>
   <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>
</div>
</source>
</source>


[[File:CSS grid.png]]
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>
.grid-container {
  display: grid;
}
</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}}
{{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: 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
</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>
{{ColumnEnd}}
{{Column}}
[[File:CSS-grid-display-grid-with-fractions.png]]
{{ColumnEnd}}
{{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 ==


https://cssgridgarden.com/
* [https://www.w3schools.com/css/css_grid.asp W3 Schools] overview of basic CSS properties including visuals
https://css-tricks.com/snippets/css/complete-guide-grid/
* [https://cssgrid.io/ CSS Grid course by Wes Bos] is full-on in depth course on CSS Grid
https://cssgrid.io/
* [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
* [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

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 position: absolute;, Flexbox display: flex; and CSS grid display: grid;.

This article describes how to create a layout with CSS Grid.

CSS grid.png

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 grid-template-columns and grid-template-rows are used to create columns and 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:

  • grid-template-columns: 200px 200px; will create two columns of each 200 pixels width.
  • grid-template-columns: 200px 200px 200px; will create 3 columns of each 200 pixels width
  • 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.

<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>
CSS-grid-display-grid-with-rows.png

Fractions

Instead of pixels you can also use 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 grid-template-columns: 1fr 1fr 1fr 1fr;. Which means each column will be around 25% (1/4).

We also add grid-column-gap: 10px; which sets the gutter to 10 pixels.


<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>

CSS-grid-display-grid-with-fractions.png

Dev tool tip

In Firefox developer tools you can show the CSS grid by clicking on the grid icon between "display" and "grid".

Css-grid-ff-dev-tool.gif

In Chrome developer tools you can click the grid icon next to the HTML element.

Css-grid-ff-chrome-tool.gif

Resources