CSS grid layout

Browser support

Grid layout is supported in some of the latest browser versions.

Grid element

A grid layout consists of a parent element and 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>

display attribute

When a HTML element sets the display property is set to grid or inline-grid after that, it becomes a grid container, and all lineal child elements of this element will become grid elements.

.grid-container {
  display: grid;
}

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

Grid orbit

We passed grid-template-columns and grid-template-rows property todefine rows and columns in the grid.

These attributes define the orbit of the grid, which is the space between any two lines in the grid.

In the following figure, you can see the track of a green box-the first row track of the grid. The second line has three white box tracks.

The following example we use grid-template-columns property to create four columns in the grid container

Example

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
}

The following example we use grid-template-rows property to set the height of the row in the grid container

Example

.grid-container {
  display: grid;
  grid-template-rows: 100px 300px;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

Grid column

The vertical direction of a grid element is called a Column.

Grid row

The horizontal direction of a grid element is called a Row.

Grid spacing

Grid spacing (Column Gap) refers to the horizontal or vertical spacing between two grid elements.

You can use the following properties to resize the gap:

• grid-column-gap

• grid-row-gap

• grid-gap

The following examples use the grid-column-gap property to set the gridspacing between columns

Example

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

The following examples use the grid-row-gap property to set the grid spacing between rows

Example

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

grid-gap The property is grid-row-gap and the grid-column-gap , The abbreviation of the property:

Example

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

grid-gap property to set row and column spacing at the same time

Example

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

Grid line

The intersection between column and column, row and row is the grid line.

Grid will create numbered gridlines for us to locate each grid element.

For example, in the following three-column, two-row grid, there are four vertical grid lines (gray circle marks) and three horizontal grid lines (black circle marks).

You can refer to these line numbers when setting grid elements.

The following figure defines four vertical grid lines and four horizontal grid lines:

The numbering order of the grid lines depends on the writing mode of the article. In a language written from left to right, the grid line numbered 1 is on the far left. In languages written from right to left, the grid line numbered 1 is on the far right.

Next, I used grid-column-start , grid-column-end , grid-row-start and use the grid-row-end attribute to demonstrate how to use grid lines.

In the following example, we set the gridlines of a grid element to start with the first column and end with the third column:

Example

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

In the following example, we set the gridlines of a grid element to start onthe first line and end on the third line:

Example

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

CSS Grid Properties