Difference between revisions of "CSS Grid"
From Publication Station
VKranendonk (talk | contribs) |
VKranendonk (talk | contribs) |
||
Line 3: | Line 3: | ||
This article describes the basic concepts of CSS grid and links to resources with more info on CSS grid. | This article describes the basic concepts of CSS grid and links to resources with more info on CSS grid. | ||
CSS grid places its direct children onto a "grid". The following code creates a grid of 3 columns, each column 200px wide and 2 rows of 300px height. | CSS grid places its direct children onto a "grid". In the following HTML snippet `<div class="grid-container">` is the parent element. | ||
<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> | |||
</source> | |||
We first have to set the parent element to be displayed as a grid via CSS. | |||
<style> | |||
.grid-container { | |||
display: grid; | |||
} | |||
</style> | |||
The following code creates a grid of 3 columns, each column 200px wide and 2 rows of 300px height. | |||
{{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> | ||
<div>Grid item 2</div> | <div>Grid item 2</div> |
Revision as of 08:22, 5 September 2022
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.
This article describes the basic concepts of CSS grid and links to resources with more info on CSS grid.
CSS grid places its direct children onto a "grid". In the following HTML snippet `
` is the parent element.
<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 CSS.
<style> .grid-container {
display: grid;
} </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