{"id":374225,"date":"2022-10-17T07:12:00","date_gmt":"2022-10-17T14:12:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=374225"},"modified":"2022-10-18T09:03:56","modified_gmt":"2022-10-18T16:03:56","slug":"grid-column","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-column\/","title":{"rendered":"grid-column"},"content":{"rendered":"\n<p>The <code>grid-column<\/code> CSS property is a shorthand that specifies the column grid lines where a grid item starts and ends in a grid layout in one declaration.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n}\n\n.grid-item:nth-child(2) {\n  grid-column: 3 \/ 5; \/* Starts on the third column line and ends on the fifth column line *\/\n}<\/code><\/pre>\n\n\n\n<p>Because of CSS Grid\u2019s default auto-placement behavior, the second child element of the grid in this example would normally be placed in the second column of the grid\u2019s first row. But since we declared <code>grid-column<\/code> and set it to align the grid item\u2019s starting edge with the third grid line and its ending edge with the fifth grid line, the item to spans the third and fourth columns instead of a single column.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"805\" height=\"288\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//10//s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662830734930_first-example.jpg?resize=805%2C288&amp;ssl=1\%22 alt=\"\" class=\"wp-image-374227\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662830734930_first-example.jpg?w=805&amp;ssl=1 805w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662830734930_first-example.jpg?resize=300%2C107&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662830734930_first-example.jpg?resize=768%2C275&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Setting the location and the size of the second grid item using the <code>grid-column<\/code> CSS Grid property.<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"constituent-properties\">Constituent properties<\/h3>\n\n\n<p>As mentioned, the <code>grid-column<\/code> property is a shorthand that combines two properties:<\/p>\n\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-374225\">\n\n  <time datetime=\"2022-08-25\" title=\"Originally published Oct 17, 2022\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Oct 4, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//g//grid-column-start///">\n      grid-column-start    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//g//grid-column-start///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { grid-column-start: 3; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///" aria-label=\"Author page of Mojtaba Seyedi\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//7b9f5e341bcb99d32f140c1f08f32f3a?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card \" id=\"mini-post-374225\">\n\n  <time datetime=\"2022-08-25\" title=\"Originally published Oct 17, 2022\">\n    <strong>\n                \n      Almanac\n      <\/strong>\n\n    on\n\n    Oct 4, 2022  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//g//grid-column-end///">\n      grid-column-end    <\/a>\n  <\/h3>\n\n      <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//g//grid-column-end///" class=\"almanac-example\">\n      <code class=\"language-css\">.element { grid-column-end: 4; }<\/code>\n    <\/a>\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///" aria-label=\"Author page of Mojtaba Seyedi\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//7b9f5e341bcb99d32f140c1f08f32f3a?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/7b9f5e341bcb99d32f140c1f08f32f3a?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//seyedi///">\n      Mojtaba Seyedi    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">grid-column: &lt;grid-line> [ \/ &lt;grid-line> ]?<\/code><\/pre>\n\n\n\n<details >\n  <summary>\n          Full definition      <\/summary>\n  \n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;grid-line> =\n  auto |\n  &lt;custom-ident> |\n  [ [ &lt;integer [\u2212\u221e,\u22121]> | &lt;integer [1,\u221e]> ] &amp;&amp; &lt;custom-ident>? ] |\n  [ span &amp;&amp; [ &lt;integer [1,\u221e]> || &lt;custom-ident> ] ]<\/code><\/pre>\n\n\n<\/details>\n\n\n<ul class=\"is-style-almanac-list\"><li><strong>Initial value:<\/strong> <code>auto<\/code><\/li><li><strong>Applies to:<\/strong> grid items and absolutely-positioned boxes whose containing block is a grid container<\/li><li><strong>Inherited:<\/strong> no<\/li><li><strong>Computed value<\/strong>: as specified for its longhand properties<\/li><li><strong>Animation type:<\/strong> discrete<\/li><\/ul>\n\n\n\n<p>This property can take two values separated by a forward slash (<code>\/<\/code>). The value before the slash sets the <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//g//grid-column-start///"><code>grid-column-start<\/code><\/a> property, while the value after the slash sets the <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//g//grid-column-end///"><code>grid-column-end<\/code><\/a> property. You can declare a single value without the slash which applies to the <code>grid-column-start<\/code> property, and sets the <code>grid-column-end<\/code> property to <code>auto<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"values\">Values<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">\/* Keyword value *\/\ngrid-column: auto;\n\n\/* &lt;custom-ident> value *\/\ngrid-column: myLineName;\ngrid-column: myGridArea;\ngrid-column: sidebar-start \/ main-end;\n\n\/* &lt;integer> + &lt;custom-ident> values *\/\ngrid-column: 3;\ngrid-column: 2 \/ -3;\ngrid-column: main 2;\ngrid-column: 3 line \/ 5 line;\n\n\/* span + &lt;integer> + &lt;custom-ident> values *\/\ngrid-column: span 3;\ngrid-column: span 2 \/ 5;\ngrid-column: 1 \/ span myline;\ngrid-column: 2 \/ span gridline 3;\n\n\/* Global values *\/\ngrid-column: inherit;\ngrid-column: initial; \/* same as `auto` *\/\ngrid-column: revert;\ngrid-column: revert-layer;\ngrid-column: unset;<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"auto\"><code>auto<\/code><\/h4>\n\n\n<p>This is the <strong>default<\/strong> value. It indicates the default span (<code>1<\/code>) and auto-placement behavior, which means the grid item is automatically placed in the next available empty grid cell.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"ltcustomidentgt\"><code>&lt;custom-ident&gt;<\/code><\/h4>\n\n\n<p>This syntax allows you to either use an <strong>integer<\/strong> to refer to a numbered grid line or a <strong>string<\/strong> to refer to a <a href=https://css-tricks.com/"https:////css-tricks.com//things-ive-learned-css-grid-layout//#aa-things-are-way-easier-if-you-name-your-grid-lines\">named grid line<\/a> or a <a href=https://css-tricks.com/"https:////css-tricks.com//simple-named-grid-areas///">named grid<\/a> <a href=https://css-tricks.com/"https:////css-tricks.com//simple-named-grid-areas///">area<\/a>. In other words, you can specify a grid line by its <strong>numerical index<\/strong> or <strong>name<\/strong> to the starting and the ending edge of a grid item.<\/p>\n\n\n<h5 class=\"wp-block-heading\" id=\"positioning-items-by-line-numbers\">Positioning Items by line numbers<\/h5>\n\n\n<p>There are two grid lines before and after each grid track with a numerical index assigned to them automatically, starting from number one.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"805\" height=\"288\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//10//s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662901953944_grid-lines-index.jpg?resize=805%2C288&amp;ssl=1\%22 alt=\"A two row grid with four columns. The last two columns in the second row are empty.\" class=\"wp-image-374230\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662901953944_grid-lines-index.jpg?w=805&amp;ssl=1 805w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662901953944_grid-lines-index.jpg?resize=300%2C107&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662901953944_grid-lines-index.jpg?resize=768%2C275&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Showing only the index of column grid tracks<\/figcaption><\/figure>\n\n\n\n<p>In the first example of this article, we used this syntax to refer to the third grid line by its index (<code>3<\/code>) which aligns the starting edge of the grid item with the starting edge of the third column, while its ending edge is aligned with the fifth column using the <code>&lt;custom-ident&gt;<\/code> syntax:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-item:nth-child(2) {\n  grid-column: 3 \/ 5;\n}<\/code><\/pre>\n\n\n\n<p>Note that you can also use a negative number to refer to a grid line, but it counts starting from the ending edge of the grid. The following code points to the same grid lines in the previous example, but counting in reverse:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-item:nth-child(2) {\n  grid-column: -3 \/ -1; \/* same as: grid-column: 3 \/ 5; *\/\n}<\/code><\/pre>\n\n\n\n<p>Notice the negative integers have been assigned to our grid as well as positive ones:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"805\" height=\"288\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//10//s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662902106902_first-example.jpg?resize=805%2C288&amp;ssl=1\%22 alt=\"\" class=\"wp-image-374235\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662902106902_first-example.jpg?w=805&amp;ssl=1 805w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662902106902_first-example.jpg?resize=300%2C107&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662902106902_first-example.jpg?resize=768%2C275&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Placing the second grid item into the third and fourth columns using the <code>grid-column<\/code> CSS property<\/figcaption><\/figure>\n\n\n<h5 class=\"wp-block-heading\" id=\"positioning-items-by-line-names\">Positioning items by line names<\/h5>\n\n\n<p>You can assign a custom name to a grid line using the <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//g//grid-template-columns//#aa-linename\"><code>grid-template-columns<\/code><\/a> and <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//g//grid-template-rows//#aa-linename\"><code>grid-template-rows<\/code><\/a> line-based placement grid properties to refer to that line by its name.<\/p>\n\n\n\n<p>Let\u2019s go back to our example and name all its column track lines like the following declaration:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid {\n  display: grid;\n  grid-template-columns: [first] 1fr [second] 1fr [third] 1fr [fourth] 1fr [last];  \n}<\/code><\/pre>\n\n\n\n<p>We can refer to the third and the fifth line by our custom names instead of their index:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-item:nth-child(2) {\n  grid-column: third \/ last; \/* same as index numbers 3 \/ 5 *\/\n}<\/code><\/pre>\n\n\n\n<p class=\"is-style-explanation\">Note that the <code>&lt;custom-ident&gt;<\/code> cannot take the <code>span<\/code> value. <code>span<\/code> is a reserved keyword for grid placement properties (e.g. <code>grid-column: 1 \/ span 2<\/code>).<\/p>\n\n\n<h5 class=\"wp-block-heading\" id=\"positioning-items-by-grid-areas\">Positioning items by grid areas<\/h5>\n\n\n<p>When defining grid areas using the <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//g//grid-template-areas///"><code>grid-template-areas<\/code><\/a> property, you get <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//g//grid-template-areas//#aa-implicitly-assigned-line-names\">implicit line names<\/a> for free based on the name of the areas. For instance, a grid area with the name <code>content<\/code> generates a line named <code>content-start<\/code> before it and one named <code>content-end<\/code> after it. You can refer to these lines to set the position of a grid item.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-item:nth-child(2) {\n  grid-column: content-start \/ content-end;\n}<\/code><\/pre>\n\n\n\n<p>Alternately, you can refer to the area\u2019s name to position an item at the starting and ending line of the <code>content<\/code> named area:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-item:nth-child(2) {\n  grid-column: content;\n}<\/code><\/pre>\n\n\n\n<p>Here is a full example:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;body>\n  &lt;main>&lt;\/main>\n  &lt;aside>&lt;\/aside>\n&lt;\/body><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">body {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;   \n  grid-template-areas: \"content content sidebar\";\n}\n\nmain {\n  grid-column: content;\n}<\/code><\/pre>\n\n\n\n<p>This sets the position of the <code>&lt;main&gt;<\/code> element to the <code>content<\/code> area in our grid.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"804\" height=\"374\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//10//s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662904277267_area-name.jpg?resize=804%2C374&amp;ssl=1\%22 alt=\"Single row grid with two columns.\" class=\"wp-image-374242\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662904277267_area-name.jpg?w=804&amp;ssl=1 804w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662904277267_area-name.jpg?resize=300%2C140&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662904277267_area-name.jpg?resize=768%2C357&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Placing the main element into content area by its name using the <code>grid-column<\/code> CSS property.<\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"ltintegergt-ampamp-ltcustomidentgt\"><code>&lt;integer&gt; &amp;&amp; &lt;custom-ident&gt;?<\/code><\/h4>\n\n\n<p>This flavor of syntax allows you to position grid items by grid lines when there are repeated names. If there are grid lines with the same name, this syntax helps specify which of those lines you are referring to.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid {\n  display: grid;\n  grid-template-columns: [bar] 1fr [foo] 1fr [bar] 300px [bar];\n\n  \/*\n    Using repeat() function also gives you repeated named grid line, for example:\n    grid-template-columns: repeat(3, [bar] 1fr);\n  *\/\n}<\/code><\/pre>\n\n\n\n<p>Let\u2019s assume you want to choose the third line, but that line has the same name as the first and the last grid line \u2014 all of them are called <code>bar<\/code>. Since the <em>second<\/em> line named <code>bar<\/code> is the third grid line, you can use <code>2<\/code> to select it as the starting point:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-item:nth-child(2) {\n  grid-column: 2 bar; \/* The second `bar` named line which is the third line *\/\n\n  \/* This is equivalent to *\/\n  grid-column-start: 2 bar;  \n  grid-column-end: auto;  \n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"765\" height=\"177\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//10//s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1659028322971_repeated-linename.jpg?resize=765%2C177&amp;ssl=1\%22 alt=\"Single row grid with three columns. The second column is empty.\" class=\"wp-image-374247\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1659028322971_repeated-linename.jpg?w=765&amp;ssl=1 765w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1659028322971_repeated-linename.jpg?resize=300%2C69&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Note that the order doesn\u2019t matter, so the previous code can also be written like this as well:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-item:nth-child(2) {\n  grid-column: bar 2;\n}<\/code><\/pre>\n\n\n\n<p>Like the previous syntax, you can use a negative integer to count the grid lines starting from the end edge of the grid too. In our example, if we want to refer to the first <code>bar<\/code>, we can count starting from the ending edge of our grid and write it like this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-item:nth-child(2) {\n  grid-column: -3 bar;\n}<\/code><\/pre>\n\n\n\n<p class=\"is-style-explanation\">Note that the integer value cannot be zero.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"span-ampamp-ltintegergt-ltcustomidentgt\"><code>span &amp;&amp; [ &lt;integer&gt; || &lt;custom-ident&gt; ]<\/code><\/h4>\n\n\n<p>This syntax allows a grid item to span across the grid tracks. It can be specified in three different ways.<\/p>\n\n\n\n<p>Note that if the integer is not specified anywhere in this syntax \u2014 the default value is <code>1<\/code>.<\/p>\n\n\n<h5 class=\"wp-block-heading\" id=\"span-ltintegergt\"><code>span &lt;integer&gt;<\/code><\/h5>\n\n\n<p>Using the <code>span<\/code> keyword followed by an integer indicates the number of tracks a grid item spans from a specific grid line. For example, if we want a grid item to span three column tracks towards its ending edge, we can apply the following value:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-item:nth-child(2) {\n  grid-column: auto \/ span 3;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"751\" height=\"390\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//10//s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658590211906_span-integer.png?resize=751%2C390&amp;ssl=1\%22 alt=\"A two row grid with 5 columns. The second grid item spands the middle three columns in the first row.\" class=\"wp-image-374252\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658590211906_span-integer.png?w=751&amp;ssl=1 751w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658590211906_span-integer.png?resize=300%2C156&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The grid item spans three columns using the <code>grid-column<\/code> CSS property.<\/figcaption><\/figure>\n\n\n<h5 class=\"wp-block-heading\" id=\"span-ltcustomidentgt\"><code>span &lt;custom-ident&gt;<\/code><\/h5>\n\n\n<p>It\u2019s also possible to combine the <code>span<\/code> keyword with the name of a grid line to make the grid item expand until it reaches that specified grid line.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-item:nth-child(3) {\n  grid-column: 3 \/ span lastline;\n}<\/code><\/pre>\n\n\n\n<p>Since the starting line of the grid item is known (<code>3<\/code>), we can span the item until it hits a grid line named <code>lastline<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"863\" height=\"384\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//10//s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662916517306_span-custom-ident.jpg?resize=863%2C384&amp;ssl=1\%22 alt=\"Two row grid with five columns. The third grid item spans the last three columns in the first row.\" class=\"wp-image-374253\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662916517306_span-custom-ident.jpg?w=863&amp;ssl=1 863w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662916517306_span-custom-ident.jpg?resize=300%2C133&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662916517306_span-custom-ident.jpg?resize=768%2C342&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The grid item spans across the grid until it hits the specified grid line named lastline using the <code>grid-column<\/code> CSS property.<\/figcaption><\/figure>\n\n\n<h5 class=\"wp-block-heading\" id=\"span-ltcustomidentgt-ltintegergt\"><code>span &lt;custom-ident&gt; &lt;integer&gt;<\/code><\/h5>\n\n\n<p>If the specified grid line name is assigned to more than one grid line \u2014 in other words, if we have repeated named grid lines \u2014 we need to say which ones we want to target. To do that, we can add an integer to our value specifying which grid line we are referring to.<\/p>\n\n\n\n<p>Take the following grid as an example:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-container {\n  display: grid;\n  grid-template-columns: [y] 1fr [x] 1fr [x] 1fr [y] 1fr [x] 1fr [x];\n}\n\n.grid-item:nth-child(3) {\n  grid-column: 2 \/span x 2;\n}<\/code><\/pre>\n\n\n\n<p>We set the starting line of the grid item to the second line. Then we want it to span forward until it hits a grid line named <code>x<\/code>. And since we want it to be the second <code>x<\/code> grid line, we wind up with <code>span x 2<\/code>.<\/p>\n\n\n\n<p>As a result, our grid item spans from the second line, as illustrated below. The first line that it hits is the first one, <code>x<\/code>, followed by <code>y<\/code>, and finally, it hits the desired second line, named <code>x<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"737\" height=\"546\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//10//s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658672273188_span-integer-custom-indent.jpg?resize=737%2C546&amp;ssl=1\%22 alt=\"Three row grid with five columns.\" class=\"wp-image-374258\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658672273188_span-integer-custom-indent.jpg?w=737&amp;ssl=1 737w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658672273188_span-integer-custom-indent.jpg?resize=300%2C222&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Setting the position of a grid item from the second line to the second line named <code>x<\/code> using the <code>grid-column<\/code> CSS property<\/figcaption><\/figure>\n\n\n\n<p>This syntax is helpful when you want to span a grid item towards a grid line using its name. But beware aware that there is more than one grid line with the same name using this method, so we add an integer to say we want the <code>N<\/code> of that grid line.<\/p>\n\n\n\n<p class=\"is-style-explanation\">See <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//g//grid-column-start///">grid-column-start<\/a><\/code> and <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//g//grid-column-end///">grid-column-end<\/a><\/code> for more information and examples of the syntax of these individual properties.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"examples\">Examples<\/h3>\n\n\n<p>Let\u2019s look at a few different scenarios where <code>grid-column<\/code> can be used.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"full-bleed-layout\">Full bleed layout<\/h4>\n\n\n<p>Sometimes we want our text to be narrowed and centered but an element like an image or a video extends to the edge of the viewport. This kind of layout is called <a href=https://css-tricks.com/"https:////css-tricks.com//full-bleed///">full bleed layout<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"805\" height=\"630\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//10//s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662990035830_example-1.jpg?resize=805%2C630&amp;ssl=1\%22 alt=\"Demonstrating a full bleed layout that has the text centered but the image extends to the very edge.\" class=\"wp-image-374263\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662990035830_example-1.jpg?w=805&amp;ssl=1 805w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662990035830_example-1.jpg?resize=300%2C235&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662990035830_example-1.jpg?resize=768%2C601&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Consider the following HTML:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;article>\n  &lt;h1>&lt;\/h1>\n  &lt;p>&lt;\/p>\n  &lt;img src=\"bridge.webp\" alt=\"A brightly-lot floating bridge against the night sky.\">\n  &lt;p>&lt;\/p>\n&lt;\/article><\/code><\/pre>\n\n\n\n<p>In order to create this layout using CSS Grid, we setup a three-column grid:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">article {\n  display: grid;\n  grid-template-columns: 1fr min(60ch, 100%) 1fr;\n}<\/code><\/pre>\n\n\n\n<p>Now, we need to place all the children of the <code>&lt;article&gt;<\/code> into the second column, and align the starting edge of the <code>&lt;img&gt;<\/code> with the first grid line and its ending edge with the last line:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">article > * {\n  grid-column: 2 \/ 3;\n}\narticle > img {\n  grid-column: 1 \/ -1;\n}<\/code><\/pre>\n\n\n\n<p>You can see the result in the following image:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"805\" height=\"684\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//10//s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662990038305_example.jpg?resize=805%2C684&amp;ssl=1\%22 alt=\"Show the grid lines of an article layout that contains an image that spans edge to edge.\" class=\"wp-image-374264\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662990038305_example.jpg?w=805&amp;ssl=1 805w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662990038305_example.jpg?resize=300%2C255&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/10\/s_5E600D44A3602E06FB6B7B59AD446BE1961B4B0D409EEEA69A28E839C5C65BD4_1662990038305_example.jpg?resize=768%2C653&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Using the <code>grid-column<\/code> CSS property Setting the image element to span across all grid columns while other elements are in the second column.<\/figcaption><\/figure>\n\n\n\n<p>The whole snippet for a full bleed layout is the following CSS code:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.content {\n  display: grid;\n  grid-template-columns: 1fr min(60ch, 100%) 1fr;\n}\n.content > * {\n  grid-column: 2 \/ 3;\n}\n.full-bleed {\n  grid-column: 1 \/ -1;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWGXNaR\" src=https://css-tricks.com/"////codepen.io//anon//embed//MWGXNaR?height=750&amp;theme-id=1&amp;slug-hash=MWGXNaR&amp;default-tab=result\%22 height=\"750\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWGXNaR\" title=\"CodePen Embed MWGXNaR\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"stacking-grid-items\">Stacking grid items<\/h4>\n\n\n<p>When positioning items across the grid, we can stack or overlap them on top of each other. This gives us the ability to sometimes use CSS Grid as an alternative to absolute positioning. For instance, we can put a caption layer on top of an image without using the <code>position<\/code> property as demonstrated below:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">&lt;figure>\n  &lt;img src=\"image.png\" alt=\"how dare you leave alt empty?\">\n  &lt;figcaption>The caption of our image&lt;\/figcaption>\n&lt;\/figure><\/code><\/pre>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">figure {\n  display: grid;\n}\n\nimg,\nfigcaption {\n  grid-column: 1 \/ -1;\n  grid-row: 1 \/ -1;\n}<\/code><\/pre>\n\n\n\n<p>Here\u2019s what we get:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"250\" height=\"250\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//08//s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658845486547_caption.png?resize=250%2C250&amp;ssl=1\%22 alt=\"Cabin in the woods with a green to blue gradient overlay and the words the caption of our image on top.\" class=\"wp-image-372562\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658845486547_caption.png?w=250&amp;ssl=1 250w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658845486547_caption.png?resize=150%2C150&amp;ssl=1 150w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>By default, grid items stack in the source order, but you can control their level using the <code><a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//z//z-index///">z-index<\/a><\/code> property. In the following example, we overlap some items and we use the <code>z-index<\/code> property to bring the second item to the highest level in the stacking context:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"4\"><code markup=\"tt\">.item:nth-child(2) {\n  grid-column: 2 \/ 4;\n  grid-row: 2 \/ 4;\n  z-index: 1;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=https://css-tricks.com/"https:////paper-attachments.dropbox.com//s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658926511371_stacking.jpg/" alt=\"Four overlapping grid items in a five-by-five grid.\"\/><figcaption>Bringing the second grid item to the top of the stack using the <code>z-index<\/code> CSS property<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"accessibility\">Accessibility<\/h3>\n\n\n<p>One thing to note when using the grid placement properties is the issue caused by rearranging the items. When you change the position of an item, only the visual order of the grid items changes, and that order might not be the same as the original document order. This may cause a very bad experience for someone tabbing through the document on a keyboard or listening to a screen reader that reads the content in the same order as the HTML.<\/p>\n\n\n\n<p>So, avoid changing the order of grid items when the HTML order of the elements matters. For example, it can be good for a random image gallery but perhaps not so much for your form inputs.<\/p>\n\n\n\n<p>However, at the time of this writing, <a href=https://css-tricks.com/"https:////github.com//w3c//csswg-drafts//issues//7387/" rel=\"noopener\">there is a proposal to tackle this issue<\/a> that will hopefully resolve this concern in the future.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"demo\">Demo<\/h3>\n\n\n<p>You can change the value of grid placement properties in the demo to see what happens to the third grid item:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_MWGXdmJ\" src=https://css-tricks.com/"////codepen.io//anon//embed//MWGXdmJ?height=450&amp;theme-id=1&amp;slug-hash=MWGXdmJ&amp;default-tab=result\%22 height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed MWGXdmJ\" title=\"CodePen Embed MWGXdmJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<script src=https://css-tricks.com/"https:////cdn.jsdelivr.net//gh//ireade//caniuse-embed//public//caniuse-embed.min.js/"><\/script>\n  <p class=\"ciu_embed\" data-feature=\"mdn-css__properties__grid-column\" data-periods=\"future_1,current,past_1,past_2\" data-accessible-colours=\"false\"><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=https://css-tricks.com/"https:////www.w3.org//TR//css-grid-1//#placement-shorthands\" rel=\"noopener\">CSS Grid Layout Module Level 1<\/a> (W3C)<\/li><li><a href=https://css-tricks.com/"https:////www.digitalocean.com//community//tutorials//customize-the-browsers-scrollbar-with-css?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_almanac\%22 rel=\"noopener\">CSS Grid Layout: Introduction<\/a> (DigitalOcean)<\/li><li><a href=https://css-tricks.com/"https:////www.digitalocean.com//community//tutorials//placing-spanning-and-density-in-css-grid?utm_medium=content_acq&amp;utm_source=css-tricks&amp;utm_campaign=&amp;utm_content=awareness_almanac\%22 rel=\"noopener\">Placing, Spanning, and Density in CSS Grid<\/a> (DigitalOcean)<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-guides\">Related guides<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-374225\">\n\n  <time datetime=\"2021-05-12\" title=\"Originally published Oct 17, 2022\">\n    <strong>\n                \n      Snippet\n      <\/strong>\n\n    on\n\n    Feb 9, 2023  <\/time>\n\n  <h3>\n    <a href=https://css-tricks.com/"https:////css-tricks.com//snippets//css//complete-guide-grid///">\n      A Complete Guide to CSS Grid    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=https://css-tricks.com/"https:////css-tricks.com//author//caiman///" aria-label=\"Author page of Chris House\">\n      <img alt='' src='https:////secure.gravatar.com//avatar//630a7407c7d243e025aed1a891f1aa41?s=80&amp;d=retro&amp;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/630a7407c7d243e025aed1a891f1aa41?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=https://css-tricks.com/"https:////css-tricks.com//author//caiman///">\n      Chris House    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The grid-column CSS property is a shorthand that specifies the column grid lines where a grid item starts and ends [&hellip;]<\/p>\n","protected":false},"author":4997,"featured_media":300990,"parent":13923,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-almanac-single.php","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"tags":[],"acf":[],"share_on_mastodon":{"url":"","error":""},"jetpack_sharing_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/374225"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/4997"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=374225"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/374225\/revisions"}],"predecessor-version":[{"id":374542,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/374225\/revisions\/374542"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13923"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/300990"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=374225"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=374225"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}