{"id":372340,"date":"2022-08-08T10:14:38","date_gmt":"2022-08-08T17:14:38","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=372340"},"modified":"2022-08-12T06:14:16","modified_gmt":"2022-08-12T13:14:16","slug":"grid","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid\/","title":{"rendered":"grid"},"content":{"rendered":"\n

The grid<\/code> CSS property is a shorthand that allows you to set all the implicit and the explicit grid properties in a single declaration.<\/p>\n\n\n\n

.grid-container {\n  display: grid;\n  grid: auto-flow dense \/ repeat(5, 150px);\n}<\/code><\/pre>\n\n\n\n\n\n\n\n
The above example sets grid-template-columns<\/a><\/code> to repeat(5, 150px)<\/code> and grid-auto-flow<\/a><\/code> to row dense<\/code> which creates a grid container that has five explicit columns and auto-repeated rows.<\/p>\n\n\n
Constituent properties<\/h3>\n\n\n
As mentioned, the grid<\/code> property is a shorthand that combines multiple properties. This is the list of all its sub-properties:<\/p>\n\n\n\n    \t\t\n    
\n      
\n\n  
\n    \n      grid-auto-columns    <\/a>\n  <\/h3>\n\n      \n      .element { grid-auto-columns: minmax(100px, 200px); }<\/code>\n    <\/a>\n  \n  \n  
\n    \n          <\/a>\n  \n    \n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      grid-auto-flow    <\/a>\n  <\/h3>\n\n      \n      .element { grid-auto-flow: dense; }<\/code>\n    <\/a>\n  \n  \n  
\n    \n          <\/a>\n  \n    \n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      grid-auto-rows    <\/a>\n  <\/h3>\n\n      \n      .element { grid-auto-rows: minmax(1fr, 500px) 3fr; }<\/code>\n    <\/a>\n  \n  \n  
\n    \n          <\/a>\n  \n    \n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      grid-template-areas    <\/a>\n  <\/h3>\n\n      \n      .element { grid-template-areas: \"header header\" \"sidebar main\"; }<\/code>\n    <\/a>\n  \n  \n  
\n    \n          <\/a>\n  \n    \n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      grid-template-columns    <\/a>\n  <\/h3>\n\n      \n      .element { grid-template-columns: 300px 1fr; }<\/code>\n    <\/a>\n  \n  \n  
\n    \n          <\/a>\n  \n    \n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n
\n\n  
\n    \n      grid-template-rows    <\/a>\n  <\/h3>\n\n      \n      .element { grid-template-rows: minmax(auto, 1fr) 3fr; }<\/code>\n    <\/a>\n  \n  \n  
\n    \n          <\/a>\n  \n    \n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n\n
That\u2019s a lot of properties for a single shorthand! As you might imagine, some declarations can get super complex super fast. We\u2019ll cover the syntax and values, then get into some examples to help you use grid<\/code> them effectively.<\/p>\n\n\n
Syntax<\/h3>\n\n\n
The grid<\/code> property syntax matches the grid-template<\/code><\/a> property, plus an additional syntax for defining auto-flow grids<\/a>:<\/p>\n\n\n\n
grid: <'grid-template'> | <'grid-template-rows'> \/ [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? \/ <'grid-template-columns'><\/code><\/pre>\n\n\n\n