Difference between revisions of "CSS Grid"

From Publication Station
 
(30 intermediate revisions by the same user not shown)
Line 1: Line 1:
With CSS there are multiple ways of positioning elements such as `position: absolute`, `display: flex` and `CSS Grid`. CSS grid is a really nice CSS property to position elements on a grid layout.  
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 the basic concepts of CSS grid and links to resources with more info on CSS grid.
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 `<div class="grid-container">` is the parent element.  
[[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.


The following code creates a grid of 3 columns, each column 200px wide and 2 rows of 300px height.
<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-rows.png]]
[[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 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