{"id":375172,"date":"2022-11-22T06:16:43","date_gmt":"2022-11-22T14:16:43","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=375172"},"modified":"2022-11-22T06:16:44","modified_gmt":"2022-11-22T14:16:44","slug":"grid-area","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-area\/","title":{"rendered":"grid-area"},"content":{"rendered":"\n

The grid-area<\/code> CSS property is a shorthand that specifies the location and the size of a grid item in a grid layout by setting the value of grid-row-start<\/code><\/a>, grid-column-start<\/code><\/a>, grid-row-end<\/code><\/a> and grid-column-end<\/code><\/a> in one declaration.<\/p>\n\n\n\n

.grid-container {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));\n}\n\n.grid-item:nth-child(2) {\n  grid-area: 2 \/ 4 \/ 4 \/ 6;\n\n  \/* is equivalent to: *\/\n  grid-row-start: 2;\n  grid-column-start: 4;\n  grid-row-end: 4;\n  grid-column-end: 6;\n}<\/code><\/pre>\n\n\n\n
Because of CSS Grid\u2019s default auto-placement behavior<\/a>, the second grid item in this example would normally be placed in the second column of the grid\u2019s first row. But since we declared grid-area<\/code> and set it to align the grid item\u2019s starting and ending edges with our desired grid lines, the item moved to the second row and fourth column and spanned two tracks in both directions to meet the correct ending grid lines.<\/p>\n\n\n\n\n\n\n\n
\"\"
Setting the location and the size of the second grid item using the grid-area<\/code> CSS property.<\/figcaption><\/figure>\n\n\n
Constituent properties<\/h3>\n\n\n
As mentioned, the grid-area<\/code> property is a shorthand that combines four properties:<\/p>\n\n\n\n    \t\t\n    
\n      
\n\n  
\n    \n      grid-column-start    <\/a>\n  <\/h3>\n\n      \n      .element { grid-column-start: 3; }<\/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-column-end    <\/a>\n  <\/h3>\n\n      \n      .element { grid-column-end: 4; }<\/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-row-start    <\/a>\n  <\/h3>\n\n      \n      .element { grid-row-start: 2; }<\/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-row-end    <\/a>\n  <\/h3>\n\n      \n      .element { grid-row-end: 3; }<\/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
Syntax<\/h3>\n\n\n
grid-area: <grid-line> [ \/ <grid-line> ]{0,3}<\/code><\/pre>\n\n\n\n
\n  \n          Full definition      <\/summary>\n  \n\n
<grid-line> =\n  auto |\n  <custom-ident> |\n  [ [ <integer [\u2212\u221e,\u22121]> | <integer [1,\u221e]> ] && <custom-ident>? ] |\n  [ span && [ <integer [1,\u221e]> || <custom-ident> ] ]<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n<\/details>\n\n\n