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.

Like tables, grid layout enables an author to align elements into columns and rows. However, many more layouts are either possible or easier with CSS grid than they were with tables. For example, a grid container's child elements could position themselves so they actually overlap and layer, similar to CSS positioned elements.

Other than in Internet Explorer, CSS Grid Layout is unprefixed in Safari, Chrome, Opera, Firefox and Edge. Support for all the properties and values detailed in these guides is interoperable across browsers. This means that if you write some Grid Layout code in Firefox, it should work in the same way in Chrome. This is no longer an experimental specification, and you are safe to use it in production.

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>

We create a grid container by declaring display: grid or display: inline-grid on an element. As soon as we do this, all direct children of that element become grid items.

.grid-container {
	display: grid;
}

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

A grid column is a vertical track in a CSS Grid Layout, and is the space between two vertical grid lines. It is defined by the grid-template-columns property or in the shorthand grid or grid-template properties.

In addition, columns may be created in the implicit grid when items are placed outside of columns created in the explicit grid. These columns will be auto-sized by default, or can have a size specified with the grid-auto-columns property. When working with alignment in CSS Grid Layout, the axis down which columns run is known as the block, or column, axis.

A grid row is a horizontal track in a CSS Grid Layout, that is the space between two horizontal grid lines. It is defined by the grid-template-rows property or in the shorthand grid or grid-template properties.

In addition, rows may be created in the implicit grid when items are placed outside of rows created in the explicit grid. These rows will be auto sized by default, or can have a size specified with the grid-auto-rows property. When working with alignment in CSS Grid Layout, the axis along which rows run is known as the inline, or row, axis.

The spaces between each column/row are called gaps. Instead of creating empty grid tracks or trying to hack things up with margins, grid-gap is a property available on grid containers that makes it easy to create gutters in your CSS Grid layouts.

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

• grid-column-gap
• grid-row-gap
• grid-gap

The grid-column-gap property sets the gap between the columns:

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

The grid-row-gap property sets the gap between the rows:

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

The grid-gap property is a shorthand property for the grid-column-gap and the grid-row-gap properties:

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

The grid-gap property can also be used to set both the row gap and the column gap in one value:

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

The lines between columns are called column lines and the lines between rows are called row lines, they are created when you define tracks in the explicit grid.

A grid item starting at column line 1, that ends on column line 3:

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

All content taken from:

• w3schools
• MDN