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;
    '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.

ChromeInternet ExplorerFirefoxSafariOpera

Grid Properties

column-gapThis property specifies the gap between the columns
gapThis property specifies the row-gap and the column-gap properties
gridThis 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-areaThis 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-columnsThis property specifies a default column size
grid-auto-flowThis property specifies how auto-placed items are inserted in the grid
grid-auto-rowsThis property specifies a default row size
grid-columnThis property specifies property for the grid-column-start and the grid-column-end properties
grid-column-endThis property specifies where to end the grid item
grid-column-gapThis property specifies the size of the gap between columns
grid-column-startSpecifies where to start the grid item
grid-gapA shorthand property for the grid-row-gap and grid-column-gap properties
grid-rowA shorthand property for the grid-row-start and the grid-row-end properties
grid-row-endSpecifies where to end the grid item
grid-row-gapSpecifies the size of the gap between rows
grid-row-startSpecifies where to start the grid item
grid-templateA shorthand property for the grid-template-rowsgrid-template-columns and grid-areas properties
grid-template-areasSpecifies how to display columns and rows, using named grid items
grid-template-columnsSpecifies the size of the columns, and how many columns in a grid layout
grid-template-rowsSpecifies the size of the rows in a grid layout
row-gapSpecifies 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;