{"id":372680,"date":"2022-08-25T12:27:00","date_gmt":"2022-08-25T19:27:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=372680"},"modified":"2022-10-04T11:24:21","modified_gmt":"2022-10-04T18:24:21","slug":"grid-column-end","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-column-end\/","title":{"rendered":"grid-column-end"},"content":{"rendered":"\n

The grid-column-end<\/code> CSS property is part of the CSS Grid Layout specification<\/a>, used to indicate the column grid line where a grid item ends in a grid layout. This property \u2014 among other line-based placement grid properties \u2014 controls the size of a grid item and where it sits on the grid.<\/p>\n\n\n\n

.grid-container {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n}\n\n.grid-item:nth-child(2) {\n  grid-column-end: 4; \/* Item ends on the third column line *\/\n}<\/code><\/pre>\n\n\n\n
Based on CSS Grid’s default auto-placement behavior, the second child element of the grid in this example is placed in the second column. But we declared a grid-column-end<\/code> position on the fourth grid line, moving the grid item into the third column and aligning its ending edge with the fourth grid line.<\/p>\n\n\n\n\n\n\n\n
\"Shifting
Shifting the second grid item into the third column using the grid-column-end<\/code> CSS Grid property<\/figcaption><\/figure>\n\n\n
Syntax<\/h3>\n\n\n
grid-column-end: <grid-line>;<\/code><\/pre>\n\n\n\n
\n  \n          Full definition      <\/summary>\n  \n<\/details>\n\n\n
where\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