Difference between revisions of "CSS Grid"
From Publication Station
VKranendonk (talk | contribs) |
VKranendonk (talk | contribs) |
||
| Line 5: | Line 5: | ||
CSS grid places its direct children onto a "grid". The following code create a grid of 3 columns, each column 200px wide and 2 rows of 300px height. | CSS grid places its direct children onto a "grid". The following code create a grid of 3 columns, each column 200px wide and 2 rows of 300px height. | ||
{{Columns}} | |||
{{Column}} | |||
<source lang="html5"> | <source lang="html5"> | ||
<div class="grid-container> | <div class="grid-container> | ||
| Line 23: | Line 25: | ||
</style> | </style> | ||
</source> | </source> | ||
{{ColumnEnd}} | |||
{{Column}} | |||
[[File:CSS-grid-display-grid-3-columns.png|CSS display grid with 3 columns of 200px]] | [[File:CSS-grid-display-grid-3-columns.png|CSS display grid with 3 columns of 200px]] | ||
{{ColumnEnd}} | |||
{{ColumnsEnd}} | |||
== Resources == | == Resources == | ||
Revision as of 14:56, 2 September 2022
With CSS there are multiple ways of positioning elements such as `position: absolute` and `display: flex`. CSS grid is a really handy 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". The following code create 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; // 3 columns of 200px
grid-template-rows: 300px 300px; // 2 rows of 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
