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

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