Grid Intro

CSS Grid Intro includes a Layout (aka “Grid”), which is a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces.

.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
  grid-gap: 15px;
  background-color: red;
  padding: 11px;
}

Grid Intro- Browser Support

Most browsers shipped native, unprefixed support for CSS Grid: Chrome (including on Android), Firefox, Safari (including on iOS), and Opera. Internet Explorer 10 and 11 on the other hand support it.

Chrome	Internet Explorer	Firefox	Safari	Opera
57.0	16.0	52.0	10	44

Grid Properties

column-gap	This property specifies the gap between the columns
gap	This property specifies the row-gap and the column-gap properties
grid	This property specifies the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-area	This property specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columns	This property specifies a default column size
grid-auto-flow	This property specifies how auto-placed items are inserted in the grid
grid-auto-rows	This property specifies a default row size
grid-column	This property specifies property for the grid-column-start and the grid-column-end properties
grid-column-end	This property specifies where to end the grid item
grid-column-gap	This property specifies the size of the gap between columns
grid-column-start	Specifies where to start the grid item
grid-gap	A shorthand property for the grid-row-gap and grid-column-gap properties
grid-row	A shorthand property for the grid-row-start and the grid-row-end properties
grid-row-end	Specifies where to end the grid item
grid-row-gap	Specifies the size of the gap between rows
grid-row-start	Specifies where to start the grid item
grid-template	A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areas	Specifies how to display columns and rows, using named grid items
grid-template-columns	Specifies the size of the columns, and how many columns in a grid layout
grid-template-rows	Specifies the size of the rows in a grid layout
row-gap	Specifies the gap between the grid rows

Grid Properties-examples

You can set the display property to inline-grid to make an inline grid container.

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 4px solid rgba(0, 0, 0, 0.8);
  padding: 25px;
  font-size: 35px;
  text-align: center;
}

We can use the grid-row-gap property to adjust the space between the rows.

.grid-container {
  display: grid;
  grid-row-gap: 60px;
  grid-template-columns: auto auto auto;
  background-color: hotpink;
  padding: 10px;
}

We can refer to line numbers when placing a grid item in a grid container:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: yellow;
  padding: 15px;
}