grid
Published Feb 27, 2022Updated May 17, 2022
Contribute to Docs
The grid
property is a shorthand for setting the following properties:
grid-template-rows
grid-template-columns
grid-template-areas
grid-auto-rows
grid-auto-columns
grid-auto-flow
Syntax
grid: <grid-template-rows> / <grid-template-columns>;
grid: <grid-template-areas>;
grid: <grid-template-rows> / <grid-auto-columns>;
grid: <grid-auto-rows> / <grid-template-columns>;
grid: <grid-template-rows> / <grid-auto-flow> <grid-auto-columns>;
grid: <grid-auto-flow> <grid-auto-rows> / <grid-template-columns>;
Example 1
The example below is a grid
declaration for the rows and columns (separated by a /
) with the following:
- There are three rows that are each 200-pixels high.
- There are two columns, with one being
25%
of the grid’s width and another at75%
-wide.
.my-grid {display: grid;grid: repeat(3, 200px) / 25% 75%;}
Example 2
.my-grid {display: grid;grid: auto / auto auto auto;}
The example above defines a grid that has three columns. Each column and row is auto
-sized.
Contribute to Docs
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.
Learn CSS on Codecademy
- Career path
Front-End Engineer
Front-end engineers work closely with designers to make websites beautiful, functional, and fast.Includes 34 CoursesWith Professional CertificationBeginner Friendly115 hours - Free course
Learn CSS
In this CSS tutorial, you’ll learn how to add CSS to visually transform HTML into eye-catching sites.Beginner Friendly6 hours