Difference between revisions of "CSS Grid"

From Publication Station
Line 2: Line 2:


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.


<source lang="html5">
<source lang="html5">
Line 12: Line 14:
   <div>Grid item 6</div>
   <div>Grid item 6</div>
</div>
</div>
<style>
.grid-container {
  display: grid;
  grid-template-columns: 200px 200px 200px;
}
</style>
</source>
</source>


[[File:CSS-grid-display-grid-3-columns.png|thumb|CSS display grid with 3 columns of 200px]]


== Resources ==
== Resources ==

Revision as of 14:43, 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.

<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;
}
</style>
CSS display grid with 3 columns of 200px

Resources