CSS Grid Layout

CSS Grid Layout Module

Rows and columns are the basis of the grid layout system that the CSS Grid Layout Module provides.

Complex web layouts become easy to build with it.

Responsive layouts are possible too, and they need neither float nor position.

Grid vs. Flexbox: The two differ in dimensions. Flexbox lays things out in one, rows OR columns, whereas CSS Grid lays things out in two, rows AND columns.

Grid layout with named areas

CSS Grid and named grid areas build a full page layout here, made up of a header, a menu, a main content area, a right section, and a footer.

Prompt
Create a page layout using CSS Grid with named grid areas: a header spanning the full width, a left menu, a main content area, and a right section, plus a footer spanning the full width. Use grid-template-areas to define the layout. Fill each area with sample text.
Output: complete HTML page

CSS Grid Components

Every grid has two parts:

  • A Grid Container - The parent element, whose display property has the value grid or inline-grid.
  • One or more Grid Items - Any direct child of the container becomes one automatically.

A Grid Container with Five Grid Items

In the example below, the blue area is the grid container, holding five grid items.

Note: The next chapters explore grid containers and grid items in more depth.

Example

Five grid items fill three columns inside one grid container.

Prompt
Create a grid container with five child items numbered 1 through 5. Set the container to display as grid with three equal columns using grid-template-columns. Add a gap between items and give the container and items visible background colors and padding.
Output: complete HTML page

All CSS Grid Properties

Every CSS Grid property appears in the table below.

CSS Grid properties reference

index.html 
<table>
  <tr>
    <th>Property</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>align-content</td>
    <td>Vertically aligns the whole grid inside the container (when total grid size is smaller than container)</td>
  </tr>
  <tr>
    <td>align-items</td>
    <td>Specifies the default alignment for items inside a flexbox or grid container</td>
  </tr>
  <tr>
    <td>align-self</td>
    <td>Aligns the content for a specific grid item along the column axis</td>
  </tr>
  <tr>
    <td>display</td>
    <td>Specifies the display behavior (the type of rendering box) of an element</td>
  </tr>
  <tr>
    <td>column-gap</td>
    <td>Specifies the gap between the columns</td>
  </tr>
  <tr>
    <td>gap</td>
    <td>A shorthand property for the row-gap and the column-gap properties</td>
  </tr>
  <tr>
    <td>grid</td>
    <td>A shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties</td>
  </tr>
  <tr>
    <td>grid-area</td>
    <td>Either 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</td>
  </tr>
  <tr>
    <td>grid-auto-columns</td>
    <td>Specifies a default column size</td>
  </tr>
  <tr>
    <td>grid-auto-flow</td>
    <td>Specifies how auto-placed items are inserted in the grid</td>
  </tr>
  <tr>
    <td>grid-auto-rows</td>
    <td>Specifies a default row size</td>
  </tr>
  <tr>
    <td>grid-column</td>
    <td>A shorthand property for the grid-column-start and the grid-column-end properties</td>
  </tr>
  <tr>
    <td>grid-column-end</td>
    <td>Specifies where to end the grid item</td>
  </tr>
  <tr>
    <td>grid-column-start</td>
    <td>Specifies where to start the grid item</td>
  </tr>
  <tr>
    <td>grid-row</td>
    <td>A shorthand property for the grid-row-start and the grid-row-end properties</td>
  </tr>
  <tr>
    <td>grid-row-end</td>
    <td>Specifies where to end the grid item</td>
  </tr>
  <tr>
    <td>grid-row-start</td>
    <td>Specifies where to start the grid item</td>
  </tr>
  <tr>
    <td>grid-template</td>
    <td>A shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties</td>
  </tr>
  <tr>
    <td>grid-template-areas</td>
    <td>Specifies how to display columns and rows, using named grid items</td>
  </tr>
  <tr>
    <td>grid-template-columns</td>
    <td>Specifies the size of the columns, and how many columns in a grid layout</td>
  </tr>
  <tr>
    <td>grid-template-rows</td>
    <td>Specifies the size of the rows in a grid layout</td>
  </tr>
  <tr>
    <td>justify-content</td>
    <td>Horizontally aligns the whole grid inside the container (when total grid size is smaller than container)</td>
  </tr>
  <tr>
    <td>justify-self</td>
    <td>Aligns the content for a specific grid item along the row axis</td>
  </tr>
  <tr>
    <td>place-self</td>
    <td>A shorthand property for the align-self and the justify-self properties</td>
  </tr>
  <tr>
    <td>place-content</td>
    <td>A shorthand property for the align-content and the justify-content properties</td>
  </tr>
  <tr>
    <td>row-gap</td>
    <td>Specifies the gap between the grid rows</td>
  </tr>
</table>