1. css
  2. /properties
  3. /grid

grid

Definition

The grid property is a shorthand property used in CSS Grid Layout to define both the rows and columns of a grid, as well as any grid gaps, and to set the grid's overall display properties.

Examples

Basic usage:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 10px;
}

Using named grid areas:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
}

Using the grid-auto-flow property:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  grid-gap: 10px;
  grid-auto-flow: dense;
}

Values

ValueDescription
<grid-template>Specifies the rows, columns, and gaps of the grid, using the grid-template-rows, grid-template-columns, grid-template-areas, and grid-gap properties.
<grid-auto-flow>Specifies the direction in which grid items should be placed within the grid.
<grid-auto-columns>Specifies the size of any auto-generated columns.
<grid-auto-rows>Specifies the size of any auto-generated rows.
<grid>Specifies all of the above properties in a single declaration.

Best Practices

  • Use named grid areas whenever possible, as they make your code more readable and easier to maintain.
  • Use fr units to create flexible, responsive grids that adjust to the size of the container.
  • Use the repeat() function to create repeated patterns of rows and columns, which can save time and make your code more concise.
  • Use the grid-auto-flow property to control the direction in which grid items are placed within the grid.
  • Use the grid-auto-columns and grid-auto-rows properties to specify the size of any auto-generated rows or columns.

Browser Compatibility

ChromeFirefoxSafariInternet ExplorerMicrosoft EdgeOpera
YesYesYesYesYesYes