CSS Grid

From Publication Station
Revision as of 08:22, 5 September 2022 by VKranendonk (talk | contribs)

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>

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

Resources