{"id":372551,"date":"2022-08-25T12:28:00","date_gmt":"2022-08-25T19:28:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=372551"},"modified":"2022-10-04T11:24:29","modified_gmt":"2022-10-04T18:24:29","slug":"grid-column-start","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-column-start\/","title":{"rendered":"grid-column-start"},"content":{"rendered":"\n<p>The <code>grid-column-start<\/code> CSS property is part of the <a href=\"https:\/\/www.w3.org\/TR\/css-grid-1\/\" rel=\"noopener\">CSS Grid Layout specification<\/a>, used to indicate the column grid line where a grid item starts 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<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: 1fr 1fr 1fr;\n}\n\n.grid-item:nth-child(2) {\n  grid-column-start: 3; \/* Item starts on the third column line *\/\n}<\/code><\/pre>\n\n\n\n<p>Based on CSS Grid\u2019s default auto-placement behavior, the second child element of the grid in this example should be placed in the second column. But we declared a <code>grid-column-start<\/code> position on the third grid line, moving the grid item into the third column and aligning its starting edge with the third grid line.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropbox.com\/s_BB84D354B106255C013FCC31314E4429C722F043F336CBF96CD3C59DBDA45755_1657474539958_first-example.PNG\" alt=\"A three-by-two grid with five items.\"\/><figcaption>Shifting the second grid item into the third column using <code>grid-column-start<\/code> CSS Grid property.<\/figcaption><\/figure>\n\n\n\n<details >\n  <summary>\n          <h3>Table of contents<\/h3>\n      <\/summary>\n  \n<ul class=\"simpletoc-list\"   >\n<li>\n<a  href=\"#syntax\">Syntax<\/a><\/li><li>\n<a  href=\"#values\">Values<\/a><\/li><li>\n<a  href=\"#positioning-grid-items-may-generate-implicit-tracks\">Positioning grid items may generate implicit tracks<\/a><\/li><li>\n<a  href=\"#positioning-grid-items-may-cause-holes\">Positioning grid items may cause holes<\/a><\/li><li>\n<a  href=\"#stacking-grid-items\">Stacking grid items<\/a><\/li><li>\n<a  href=\"#using-a-negative-index-for-more-flexibility\">Using a negative index for more flexibility<\/a><\/li><li>\n<a  href=\"#grid-line-indexes-depend-on-the-writing-mode\">Grid line indexes depend on the writing mode<\/a><\/li><li>\n<a  href=\"#named-area-wins-over-named-line\">Named area wins over named line<\/a><\/li><li>\n<a  href=\"#accessibility\">Accessibility<\/a><\/li><li>\n<a  href=\"#demo\">Demo<\/a><\/li><li>\n<a  href=\"#browser-support\">Browser support<\/a><\/li><li>\n<a  href=\"#related-tricks\">Related tricks!<\/a><\/li><li>\n<a  href=\"#related-guides\">Related guides<\/a><\/li><li>\n<a  href=\"#more-information\">More information<\/a><\/li><\/ul>\n\n<\/details>\n\n<h3 class=\"wp-block-heading\" id=\"syntax\">Syntax<\/h3>\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">grid-column-start: &lt;grid-line><\/code><\/pre>\n\n\n\n<details >\n  <summary>\n          Full definition      <\/summary>\n  \n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">where\n&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<\/li><li><strong>Animation type:<\/strong> discrete<\/li><\/ul>\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-start: auto;\n\n\/* &lt;custom-ident> value *\/\ngrid-column-start: myLineName;\ngrid-column-start: myGridArea;\n\n\/* &lt;integer> + &lt;custom-ident> values *\/\ngrid-column-start: 3;\ngrid-column-start: -2;\ngrid-column-start: main-area 2;\ngrid-column-start: 3 sidebar-start;\n\n\/* span + &lt;integer> + &lt;custom-ident> values *\/\ngrid-column-start: span 3;\ngrid-column-start: span main;\ngrid-column-start: span myarea 5;\n\n\/* Global values *\/\ngrid-column-start: inherit;\ngrid-column-start: initial; \/* same as `auto` *\/\ngrid-column-start: revert;\ngrid-column-start: revert-layer;\ngrid-column-start: 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\/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\/simple-named-grid-areas\/\">named grid area<\/a>. In other words, you can specify a grid line by its <strong>numerical index<\/strong> or <strong>name<\/strong> to the starting 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=\"795\" height=\"274\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/8cp2kz7P.jpeg?resize=795%2C274&#038;ssl=1\" alt=\"A three-by-two-grid with six items.\" class=\"wp-image-372585\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/8cp2kz7P.jpeg?w=795&amp;ssl=1 795w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/8cp2kz7P.jpeg?resize=300%2C103&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/8cp2kz7P.jpeg?resize=768%2C265&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/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>) to align the starting edge of the grid item with the starting edge of the third column using <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-start: 3;\n}<\/code><\/pre>\n\n\n\n<p>Note that you can also use a negative number to refer to a grid line, remember that it counts starting from the ending edge of the grid. The following code points to the same grid line in the previous example, but counts 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-start: -2; \/* same as 3 *\/\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=\"796\" height=\"281\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_BB84D354B106255C013FCC31314E4429C722F043F336CBF96CD3C59DBDA45755_1657474539958_first-example.png?resize=796%2C281&#038;ssl=1\" alt=\"A three-by-two grid with five items where the second item is positioned in the third column with the grid-column-start CSS property.\" class=\"wp-image-372553\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_BB84D354B106255C013FCC31314E4429C722F043F336CBF96CD3C59DBDA45755_1657474539958_first-example.png?w=796&amp;ssl=1 796w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_BB84D354B106255C013FCC31314E4429C722F043F336CBF96CD3C59DBDA45755_1657474539958_first-example.png?resize=300%2C106&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_BB84D354B106255C013FCC31314E4429C722F043F336CBF96CD3C59DBDA45755_1657474539958_first-example.png?resize=768%2C271&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Shifting the second grid item into the third column using the <code>grid-column-start<\/code> CSS Grid 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 <a href=\"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\/almanac\/properties\/g\/grid-template-rows\/#aa-linename\"><code>grid-template-rows<\/code><\/a> and use 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 [last];  \n}<\/code><\/pre>\n\n\n\n<p>We can refer to the third line by our custom name instead of its 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-start: third; \/* same as index number 3 *\/\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 since <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\/almanac\/properties\/g\/grid-template-areas\/\"><code>grid-template-areas<\/code><\/a> property, you get <a href=\"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>sidebar<\/code> generates a line name <code>sidebar-start<\/code> before it and a <code>sidebar-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-start: sidebar-start;\n}<\/code><\/pre>\n\n\n\n<p>Alternately, you can refer to the area\u2019s name to position an item at the starting line of the <code>sidebar<\/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-start: sidebar;\n}<\/code><\/pre>\n\n\n\n<p>Since you are using the <code>grid-column-start<\/code> property in this example, the browser understands that you want the <code>sidebar-start<\/code> line of the <code>sidebar<\/code> area; therefore, it will align the starting edge of the grid item with the starting edge of the grid area.<\/p>\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: \"main main sidebar\";\n}\n\naside {\n  grid-column-start: sidebar-start;\n}<\/code><\/pre>\n\n\n\n<p>This sets the position of the <code>aside<\/code> element to the <code>sidebar<\/code> area in our grid.<\/p>\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-start: 2 bar; \/* The second `bar` named line which is the third line *\/\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropbox.com\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1659028322971_repeated-linename.jpg\" alt=\"A single row grid with three columns and the second item in the third column.\"\/><\/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-start: 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-start: -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, 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 starting 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-start: span 3;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/paper-attachments.dropbox.com\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658590211906_span-integer.png\" alt=\"A six-by-two grid where the second item spans three columns.\"\/><figcaption>The grid item spans three columns using the <code>grid-column-start<\/code> property.<\/figcaption><\/figure>\n\n\n\n<p>When we use <code>span<\/code> for placing the starting line of an item, technically, it spans backward instead of forward to the ending edge, which is usually what happens in real-world scenarios.<\/p>\n\n\n<h5 class=\"wp-block-heading\" id=\"span-ltcustomidentgt\"><code>span &lt;custom-ident&gt;<\/code><\/h5>\n\n\n<p>You can combine <code>span<\/code> with a 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-start: span thirdline;\n  grid-column-end: 6;\n}<\/code><\/pre>\n\n\n\n<p>Since the end line of the grid item is known (<code>6<\/code>) we can span the item towards the starting line until it hits a grid line named <code>thirdline<\/code>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"752\" height=\"388\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658669629528_span-custom-ident.png?resize=752%2C388&#038;ssl=1\" alt=\"A five-by-two grid where the third item spans three columns.\" class=\"wp-image-372558\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658669629528_span-custom-ident.png?w=752&amp;ssl=1 752w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658669629528_span-custom-ident.png?resize=300%2C155&amp;ssl=1 300w\" 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 <code>thirdline<\/code> using the <code>grid-column-start<\/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-start: span x 2;\n  grid-column-end: 5; \/* equivalent to grid-column-end: x 3; *\/\n}<\/code><\/pre>\n\n\n\n<p>We set the end line of the grid item to the fifth line. Then we want it to span towards the starting line 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>grid-column-start: span x 2<\/code>.<\/p>\n\n\n\n<p>As a result, our grid item starts spanning toward the starting line from the fifth line, as illustrated below. The first line that it hits is named <code>y<\/code>, next is the first <code>x<\/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:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658672273188_span-integer-custom-indent.jpg?resize=737%2C546&#038;ssl=1\" alt=\"A five-by-three grid where each row has a few empty columns.\" class=\"wp-image-372559\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/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\/08\/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 fifth line back to the second named line towards the start edge of the item using the <code>grid-column-start<\/code> 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 you are aware that there is more than one grid line with that name, so we add an integer to say we want the <code>N<\/code> of that grid line.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"positioning-grid-items-may-generate-implicit-tracks\">Positioning grid items may generate implicit tracks<\/h3>\n\n\n<p>Setting the position of a grid item to a grid line\u2019s index or a grid line\u2019s name that does not exist in an explicit grid will force the grid to create implicit tracks to add that position to the grid.<\/p>\n\n\n\n<p>Let\u2019s create a grid with two columns and set the position of its item to non-existent lines. In the following example, we have only two columns and we didn\u2019t name any of our gird lines. So, there is no line with an index of <code>5<\/code> and no line with the name of <code>test<\/code>, but we set these values to our properties:<\/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: 1fr 1fr;\n  grid-auto-columns: 100px;\n}\n\n.grid-item {\n  gird-column-start: span test;\n  grid-column-end: 5;\n}<\/code><\/pre>\n\n\n\n<p>Since we know there are implicit tracks in our grid and we want them to have a size so we can see them, we add the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-auto-columns\/\"><code>grid-auto-columns<\/code><\/a> property to our code.<\/p>\n\n\n\n<p>Now that we have everything set up, let\u2019s see what happens to our grid:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"744\" height=\"258\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1659024204645_implicit-lines-with-numbers-figma.jpg.png?resize=744%2C258&#038;ssl=1\" alt=\"A single-row grid with five columns, two of which are explicit.\" class=\"wp-image-372560\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1659024204645_implicit-lines-with-numbers-figma.jpg.png?w=744&amp;ssl=1 744w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1659024204645_implicit-lines-with-numbers-figma.jpg.png?resize=300%2C104&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Giving grid placement properties the values that do not exist causes the grid to create implicit tracks to be able to position our grid item<\/figcaption><\/figure>\n\n\n\n<p>We set <code>grid-column-end<\/code> to <code>5<\/code>, but the last index of our explicit grid is <code>3<\/code> and because of that, two implicit tracks are created towards the end of the grid to give us a line with an index of <code>5<\/code>. On the other hand, we set the <code>grid-column-start<\/code> to a grid line with the name of <code>test<\/code>. Again, since we don\u2019t have such a name in our grid, and because we want that grid line to align with the start edge of our grid item, an implicit column track gets created on the starting side of the explicit grid in the inline direction, and its line is <code>test<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"positioning-grid-items-may-cause-holes\">Positioning grid items may cause holes<\/h3>\n\n\n<p>As you may have seen in the previous examples, line-based positioning can cause empty spaces between grid items.<\/p>\n\n\n\n<p>In case those holes aren\u2019t welcome in your design, they can be handled easily by applying the <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-auto-flow\/\"><code>grid-auto-flow<\/code><\/a> property with the <code>dense<\/code> value to the grid container.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1343\" height=\"534\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658756780073_dense.png?resize=1343%2C534&#038;ssl=1\" alt=\"Showing the before and after results of using a dense CSS Grid layout.\" class=\"wp-image-372561\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658756780073_dense.png?w=1343&amp;ssl=1 1343w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658756780073_dense.png?resize=300%2C119&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658756780073_dense.png?resize=1024%2C407&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658756780073_dense.png?resize=768%2C305&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-auto-flow\/\">grid-auto-flow<\/a><\/code>&nbsp;property can fill empty spaces caused by line-based positioning.<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"stacking-grid-items\">Stacking grid items<\/h3>\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-start: 1;\n  grid-column-end: -1;\n  grid-row-start: 1;\n  grid-row-end: -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:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658845486547_caption.png?resize=250%2C250&#038;ssl=1\" 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 <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/z\/z-index\/\"><code>z-index<\/code><\/a> 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:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"6\"><code markup=\"tt\">.item:nth-child(2) {\n  grid-column-start: 2;\n  grid-column-end: 4;\n  grid-row-start: 2;\n  grid-row-end: 4;\n  z-index: 1;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"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&nbsp;<code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/z\/z-index\/\">z-index<\/a><\/code>&nbsp;property.<\/figcaption><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"using-a-negative-index-for-more-flexibility\">Using a negative index for more flexibility<\/h3>\n\n\n<p>There are cases where you want a full-width item in your grid, meaning it starts from the first grid line and ends with the last one. For example, in a four-column grid, the end line index is <code>5<\/code>, so you can write the code below to have your full-width item.<\/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.full-width {\n  grid-column-start: 1;\n  grid-column-end: 5;\n}<\/code><\/pre>\n\n\n\n<p>It works like a charm, but what if the number of columns changes to six? In that case, we need to update the index value for the placement property.<\/p>\n\n\n\n<p>The flexible solution is to use the negative index!<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-item.full-width {\n  grid-column-start: 1;\n  grid-column-end: -1;\n}<\/code><\/pre>\n\n\n\n<p>Now, no matter how many columns we have, the grid item with the <code>full-width<\/code> class always stretches across the grid.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"grid-line-indexes-depend-on-the-writing-mode\">Grid line indexes depend on the writing mode<\/h3>\n\n\n<p>The whole module of grid layout is based on the writing mode of the document; hence, grid lines depend on the direction and writing mode as well. For example, in a right-to-left language like Persian and Arabic, the first grid line with <code>1<\/code> index is the right-most line in a grid.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"882\" height=\"546\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658847033207_writing-mode.png?resize=882%2C546&#038;ssl=1\" alt=\"Two single-row grids with four columns, one showing a left-to-right writing mode and the other showing a right-to-left writing mode.\" class=\"wp-image-372563\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658847033207_writing-mode.png?w=882&amp;ssl=1 882w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658847033207_writing-mode.png?resize=300%2C186&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658847033207_writing-mode.png?resize=768%2C475&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Demonstrating how writing mode affects the direction of a grid layout and indexes of its grid lines.<\/figcaption><\/figure>\n\n\n\n<p>So, take the writing direction of your grid into account when using a grid line index to position grid items using a property like <code>grid-column-start<\/code>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"named-area-wins-over-named-line\">Named area wins over named line<\/h3>\n\n\n<p>If a <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-areas\/\">named grid area<\/a> has the same name as a <a href=\"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-columns\/#aa-linename\">line name<\/a>, the placement algorithm will prefer to use named grid area\u2019s lines.<\/p>\n\n\n\n<p>Consider the following example:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container {\n  display: grid;\n  grid-template-columns: 1fr [y] 1fr 1fr 1fr 1fr;\n  grid-template-areas: \"x x x y y\";\n}<\/code><\/pre>\n\n\n\n<p>The second grid line is named <code>y<\/code>, and the last two columns are defined as an area with the same name. Now, to position the first grid item, we assign <code>y<\/code> as a value for <code>grid-column-start<\/code>. Let\u2019s see which line it will refer to:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">.item:first-child {\n  grid-column-start: y;\n}<\/code><\/pre>\n\n\n\n<p>As you can see in the next image, although the <code>y<\/code> line is closer to the first item, the browser chose the grid area\u2019s edge to place the starting edge of the item.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"733\" height=\"275\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658862014243_area-vs-line.jpg?resize=733%2C275&#038;ssl=1\" alt=\"\" class=\"wp-image-372564\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658862014243_area-vs-line.jpg?w=733&amp;ssl=1 733w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658862014243_area-vs-line.jpg?resize=300%2C113&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>A grid area and a grid line have the same name, <code>y<\/code>. The browser selects the grid area line over the named grid line when you assign that name to grid placement properties.<\/figcaption><\/figure>\n\n\n\n<p>Note that this doesn\u2019t apply if you use the implicit name line of a grid area. For instance, let\u2019s change the name of the grid line in the previous example to <code>y-start<\/code>. Also, we know that the area with the name <code>y<\/code> has an implicit grid line of <code>y-start<\/code> assigned. Now, if we set <code>y-start<\/code> to the <code>grid-column-start<\/code>, the grid named line will be the winner this time.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.container {\n  display: grid;\n  grid-template-columns: 1fr [y-start] 1fr 1fr 1fr 1fr;\n  grid-template-areas: \"x x x y y\";\n}\n\n.item:first-child {\n  grid-column-start: y-start;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"733\" height=\"275\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658862844242_implicit-area-vs-line.jpg?resize=733%2C275&#038;ssl=1\" alt=\"\" class=\"wp-image-372565\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658862844242_implicit-area-vs-line.jpg?w=733&amp;ssl=1 733w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/08\/s_66AE538FE3EF7732102B9AF7161E0839F67CE60C5D1206875C538C7FCE63BEF8_1658862844242_implicit-area-vs-line.jpg?resize=300%2C113&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/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:\/\/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_YzarjYr\" src=\"\/\/codepen.io\/anon\/embed\/YzarjYr?height=800&amp;theme-id=1&amp;slug-hash=YzarjYr&amp;default-tab=result\" height=\"800\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzarjYr\" title=\"CodePen Embed YzarjYr\" 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:\/\/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-start\" data-periods=\"future_1,current,past_1,past_2\" data-accessible-colours=\"false\"><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-tricks\">Related tricks!<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-372551\">\n\n  <time datetime=\"2017-11-24\" title=\"Originally published Aug 25, 2022\">\n    <strong>\n                \n      Snippet\n      <\/strong>\n\n    on\n\n    Dec 13, 2019  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/snippets\/css\/css-grid-starter-layouts\/\">\n      CSS Grid Starter Layouts    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?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\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-372551\">\n\n  <time datetime=\"2017-07-21\" title=\"Originally published Aug 25, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 28, 2017  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/collection-interesting-facts-css-grid-layout\/\">\n      A Collection of Interesting Facts about CSS Grid Layout    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/mmatuzo\/\" aria-label=\"Author page of Manuel Matuzovic\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/fee3aee3642c55f15adfcbeab11e6bb6?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/fee3aee3642c55f15adfcbeab11e6bb6?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\/author\/mmatuzo\/\">\n      Manuel Matuzovic    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" id=\"mini-post-372551\">\n\n  <time datetime=\"2017-06-06\" title=\"Originally published Aug 25, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 6, 2017  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/breaking-css-grid-explained\/\">\n      Breaking Out with CSS Grid Explained    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?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\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card link\" id=\"mini-post-372551\">\n\n  <time datetime=\"2017-09-05\" title=\"Originally published Aug 25, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Sep 5, 2017  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/breaking-the-grid\/\">\n      Breaking the Grid    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/geoffgraham\/\" aria-label=\"Author page of Geoff Graham\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1a1b5ca4b139c0c8caaea26ef437d943?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\/author\/geoffgraham\/\">\n      Geoff Graham    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-372551\">\n\n  <time datetime=\"2019-06-24\" title=\"Originally published Aug 25, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 24, 2019  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/building-a-conference-schedule-with-css-grid\/\">\n      Building a Conference Schedule with CSS Grid    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/mrwweb\/\" aria-label=\"Author page of Mark Root-Wiley\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/1d4925cfe7b4025037be5038af7d4292?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/1d4925cfe7b4025037be5038af7d4292?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\/author\/mrwweb\/\">\n      Mark Root-Wiley    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-372551\">\n\n  <time datetime=\"2018-11-02\" title=\"Originally published Aug 25, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 2, 2018  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/simple-named-grid-areas\/\">\n      Simple Named Grid Areas    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?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\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \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-372551\">\n\n  <time datetime=\"2021-05-12\" title=\"Originally published Aug 25, 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\/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\/author\/caiman\/\" aria-label=\"Author page of Chris House\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/630a7407c7d243e025aed1a891f1aa41?s=80&#038;d=retro&#038;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\/author\/caiman\/\">\n      Chris House    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n<ul><li><a href=\"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:\/\/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\" rel=\"noopener\">CSS Grid Layout: Introduction<\/a> (DigitalOcean)<\/li><li><a href=\"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\" rel=\"noopener\">Placing, Spanning, and Density in CSS Grid<\/a> (DigitalOcean)<\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The grid-column-start CSS property is part of the CSS Grid Layout specification, used to indicate the column grid line where a grid item starts 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. Based on CSS [&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":{"_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":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":372680,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-column-end\/","url_meta":{"origin":372551,"position":0},"title":"grid-column-end","date":"August 25, 2022","format":false,"excerpt":"The grid-column-end CSS property is part of the CSS Grid Layout specification, 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\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":374225,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-column\/","url_meta":{"origin":372551,"position":1},"title":"grid-column","date":"October 17, 2022","format":false,"excerpt":"The grid-column 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. .grid-container { display: grid; grid-template-columns: repeat(4, 1fr); } .grid-item:nth-child(2) { grid-column: 3 \/ 5; \/* Starts on the third column line and ends\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":375172,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-area\/","url_meta":{"origin":372551,"position":2},"title":"grid-area","date":"November 22, 2022","format":false,"excerpt":"The\u00a0grid-area\u00a0CSS property is a shorthand that specifies the location and the size of a grid item in a grid layout by setting the value of\u00a0grid-row-start,\u00a0grid-column-start,\u00a0grid-row-end\u00a0and\u00a0grid-column-end\u00a0in one declaration. .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); } .grid-item:nth-child(2) { grid-area: 2 \/ 4 \/ 4 \/ 6; \/* is equivalent to:\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":362360,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-columns\/","url_meta":{"origin":372551,"position":3},"title":"grid-template-columns","date":"April 25, 2022","format":false,"excerpt":"The grid-template-columns CSS property is part of the CSS Grid Layout specification, defining the columns of a grid container by specifying the size of the grid tracks and its line names. .sidebar-layout { display: grid; grid-template-columns: 300px 1fr; } It\u2019s worth noting the difference between grid lines and grid tracks\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":366713,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-auto-columns\/","url_meta":{"origin":372551,"position":4},"title":"grid-auto-columns","date":"July 15, 2022","format":false,"excerpt":"The grid-auto-columns CSS property is part of the CSS Grid Layout specification, specifying the size of the grid columns that were created without having an explicit size. In other words, this property sets the size of implicit columns and any other columns that have not been explicitly sized in the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":373214,"url":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-row-start\/","url_meta":{"origin":372551,"position":5},"title":"grid-row-start","date":"September 21, 2022","format":false,"excerpt":"The grid-row-start CSS property is part of the CSS Grid Layout specification, used to indicate the row grid line where a grid item starts 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\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/12\/css-tricks-logo-gradient-outline.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/372551"}],"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=372551"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/372551\/revisions"}],"predecessor-version":[{"id":374294,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/372551\/revisions\/374294"}],"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=372551"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=372551"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}