Difference between revisions of "CSS Grid"

From Publication Station
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". In the following HTML snippet `<div class="grid-container">` is the parent element.  
CSS grid places its direct children onto a "grid". In the following HTML snippet <source lang="html5"><div class="grid-container"></source> is the parent element.  


<source lang="html5">
<source lang="html5">

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

<div class="grid-container">

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>

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

Resources