Define a grid system
grid
Use templates to define a fixed layout of rows and columns, or auto-rules to define grids with auto-expanding rows or columns.
Define fixed grids:
- grid
- grid-template
- grid-template-rows
- grid-template-columns
- grid-template-areas
Define auto-expanding grids:
- grid-auto-rows
- grid-auto-columns
- grid-auto-flow
Define element membership in a grid:
- grid-area
- grid-row
- grid-row-start
- grid-row-end
- grid-column
- grid-column-start
- grid-column-end
Define gutters between rows and columns:
- grid-gap
- grid-row-gap
- grid-column-gap
grid
All-in-one spec
Specify all of these grid properties at once: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow.
css, style, grid, grid
grid-template
Defining grids with fixed columns and rows
Use this property to define a grid system that has a fixed number of rows and columns.
css, style, grid, grid-template
grid-template-rows
Defining grids with fixed rows
Use this property to define a grid system that has a fixed number of rows.
css, style, grid, grid-template-rows
grid-template-columns
Defining grids with fixed columns
Use this property to define a grid system that has a fixed number of columns.
css, style, grid, grid-template-columns
grid-template-areas
Defining grids using names
Use this property to define a grid system based on arbitrary names that have user-specific meanings.
css, style, grid, grid-template-areas
grid-auto-rows
Defining grids with flexible rows
Use this property to define a grid system that has a flexible number of rows.
css, style, grid, grid-auto-rows
grid-auto-columns
Defining grids with flexible columns
Use this property to define a grid system that has a flexible number of columns.
css, style, grid, grid-auto-columns
grid-auto-flow
Defining grids with flexible rows
Use this property to define how new elements are positioned in layouts that are configured with auto-columns or auto-rows.
css, style, grid, grid-auto-flow
grid-area
Grid area
Use this property to define the element's four edges with respect to the grid system.
css, style, grid, grid-area
grid-row
Grid row
Use this property to define the element's top and bottom edges with respect to the grid system.
css, style, grid, grid-row
grid-row-start
Grid row start
Use this property to define the element's top edge with respect to the grid system.
css, style, grid, grid-row-start
grid-row-end
Grid row end
Use this property to define the element's bottom edge with respect to the grid system.
css, style, grid, grid-row-end
grid-column
Grid column
Use this property to define the element's left and right edges with respect to the grid system.
css, style, grid, grid-column
grid-column-start
Grid column start
Use this property to define the element's left edge with respect to the grid system.
css, style, grid, grid-column-start
grid-column-end
Grid column end
Use this property to define the element's right edge with respect to the grid system.
css, style, grid, grid-column-end
grid-gap
Grid gutters
Use this property to define the width and height of the gutters between columns and rows.
css, style, grid, grid-gap
grid-row-gap
Grid row gutters
Use this property to define the height of the gutters between rows.
css, style, grid, grid-row-gap
grid-column-gap
Grid column gutters
Use this property to define the width of the gutters between columns.
css, style, grid, grid-column-gap
