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 {{code|lang=css|position: absolute;}}, "display: flex;" and `display: grid;`. CSS grid ("display: 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.

Revision as of 08:27, 5 September 2022

With CSS there are multiple ways of positioning elements such as

position: absolute;

, "display: flex;" and `display: grid;`. CSS grid ("display: 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 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>

Now the code above will not show any difference in the browser. We also have to create columns and or rows. We can do this with the properties "grid-template-columns" and "grid-template-rows".

<style>
.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  grid-template-rows: 300px 300px;
}
</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>

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

Resources