Grid Shorthand Properties

grid-template

This is a shorthand for:

• grid-template-rows
• grid-template-columns
• grid-template-areas

It combines all three into a single property.

Example:

.grid-container {
  display: grid;
  grid-template:
    "header header" 100px
    "sidebar main" 300px
    "footer footer" 80px
    / 150px 1fr;
}

Breakdown:

• Each row contains the area names (inside quotes).
• The number after each row specifies its height.
• After the /, the numbers represent the widths of the columns.

So, this single property defines the entire grid layout in one line.

grid (Main Shorthand)

This is another powerful shorthand that combines almost all the grid layout properties.

You can include:

• grid-template-rows
• grid-template-columns
• grid-template-areas
• grid-auto-rows
• grid-auto-columns
• grid-auto-flow

However, we usually use the grid shorthand when the layout is small and simple.

Example:

.grid-container {
  display: grid;
  grid: auto-flow / 100px 1fr;
}

Meaning:

• The auto-flow direction is being used (by default, it’s row).
• The column widths are 100px and 1fr.

It’s a short and quick way to create a basic grid layout.