Introduction.md

< Previous     Next >

---

Note: if you cant read text on images below, either you are blind or you have dark mode on.

---

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning:

Browser Support

The grid properties are supported in all modern browsers.

Browser	Chrome	Edge	Firefox	Safari	Opera
Version	57.0	16.0	52.0	10.0	44.0

Elements

A grid layout consists of a parent element, with one or more child elements.

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
  <div class="grid-item">9</div>
</div>

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  color:#000;  
  border: 1px solid rgba(0, 0, 0, 0.8);
}

Display

An HTML element becomes a grid container when its display property is set to grid or inline-grid.

.grid-container {
  display: grid;
}

.grid-container {
  display: inline-grid;
}

All direct children of the grid container automatically become grid items.

Columns

The vertical lines of grid items are called columns.

Rows

The horizontal lines of grid items are called rows.

Gaps

The spaces between each column/row are called gaps.

You can adjust the gap size by using one of the following properties:

• column-gap
• row-gap
• gap

.grid-container {
  display: grid;
  column-gap: 50px;
}

.grid-container {
  display: grid;
  row-gap: 50px;
}

.grid-container {
  display: grid;
  gap: 50px 100px;
}

.grid-container {
  display: grid;
  gap: 50px;
}

Lines

The lines between columns are called column lines.
The lines between rows are called row lines.

Refer to line numbers when placing a grid item in a grid container:

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

.item1 {
  grid-row-start: 1;
  grid-row-end: 3;
}