A CSS grid Layout offers a grid-based system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

To create a grid layout, the outer container needs to be set to display: grid or display: inline-grid. All direct children of the grid container will automatically become grid items.

<div class="grid_container">

</div>

.grid_container {
    display: grid;
}

.grid_container {
    display: inline-grid;
}

This will now allow for a series of rows and columns creating the grid system.

<div class="grid_container">
    <div class="box_1">Header</div>
    <div class="box_2">Content</div>
    <div class="box_3">Sidebar</div>
    <div class="box_4">Footer</div>
</div>

The following CSS now transforms the <div> elements above into grid items of varying sizes, expanding across multiple columns when necessary.

• Line 3 creates the series of columns
• Lines 20 and 21 tell .box_1 to span across all four columns (end 5), creating a grid area for the header
• Line 28 and 29 does the same, creating a grid area for the footer.
• Line 24 and 25 does something similar, spanning across three columns to create the main content area

.grid_container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    column-gap: 3px;
    row-gap: 3px;
    background-color: #ff0000;
    padding: 3px;
}
.grid_container > div {
    background-color: white;
    text-align: center;
    padding: 20px;
    font-size: 24px;
}
.grid_container > .box_2,
.grid_container > .box_3 {
	text-align: left;
}
.box_1 {
  grid-column-start: 1;
  grid-column-end: 5;
}
.box_2 {
  grid-column-start: 1;
  grid-column-end: 4;
}
.box_4 {
  grid-column-start: 1;
  grid-column-end: 5;
}

• CSS – grid Property
  The grid property is shorthand for grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.
• CSS – grid-area Property
  The grid-area property specifies a grid item’s size and location in a grid layout, and is a shorthand property for other grid properties.
• CSS – grid-auto-columns Property
  The grid-auto-columns property sets a size for the columns in a grid container, affecting only columns with the size not set.
• CSS – grid-auto-flow Property
  The grid-auto-flow property controls how auto-placed items get inserted in the grid.
• CSS – grid-auto-rows Property
  The grid-auto-rows property sets a size for the rows in a grid container, affecting only rows with the size not set.
• CSS – grid-column Property
  The grid-column property specifies a grid item’s size and location in a grid layout, and is a shorthand property for other grid properties.
• CSS – grid-column-end Property
  The grid-column-end property defines how many columns in a grid layout an item will span, or on which column-line the item will end.
• CSS – grid-column-gap Property
  The grid-column-gap property defines the size of the gap between the columns in a grid layout.
• CSS – grid-column-start Property
  The grid-column-start property defines on which column-line the item will start in a grid layout.
• CSS – grid-gap Property
  The grid-gap property defines the size of the gap between the rows and columns in a grid layout, and is a shorthand property for other grid properties.
• CSS – grid-row Property
  The grid-row property specifies a grid item’s size and location in a grid layout, and is a shorthand property for other grid properties.
• CSS – grid-row-end Property
  The grid-row-end property defines how many rows an item will span, or on which row-line the item will end.
• CSS – grid-row-gap Property
  The grid-row-gap property defines the size of the gap between the rows in a grid layout.
• CSS – grid-row-start Property
  The grid-row-start property defines on which row-line the item will start in a grid layout.
• CSS – grid-template Property
  The grid-template property is a shorthand property for other grid properties.
• CSS – grid-template-areas Property
  The grid-template-areas property specifies areas within a grid layout.
• CSS – grid-template-columns Property
  The grid-template-columns property specifies the number and widths of columns in a grid layout, where each value is the size of the respective column.
• CSS – grid-template-rows Property
  The grid-template-rows property specifies the number and heights of rows in a grid layout, where each value is the size of the respective row.
• CSS – row-gap Property
  The row-gap property specifies the gap between the grid rows.