Difference between revisions of "CSS Grid"

From Publication Station
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.  
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.
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.
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.
{{Columns}}
{{Columns}}
{{Column}}
{{Column}}
Line 23: Line 23:
}
}
</style>
</style>
</source>
</source>
{{ColumnEnd}}
{{ColumnEnd}}

Revision as of 08:19, 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". 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>

CSS-grid-display-grid-with-rows.png

Resources