{"id":367122,"date":"2022-07-27T07:56:45","date_gmt":"2022-07-27T14:56:45","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=367122"},"modified":"2022-07-27T07:56:46","modified_gmt":"2022-07-27T14:56:46","slug":"grid-auto-flow","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-auto-flow\/","title":{"rendered":"grid-auto-flow"},"content":{"rendered":"\n<p>The <code>grid-auto-flow<\/code> CSS property is part of the <a href=https://css-tricks.com/"https:////www.w3.org//TR//css-grid-1///" rel=\"noopener\">CSS Grid Layout specification<\/a> that allows us to control the flow of grid items that are automatically placed when they are not explicitly positioned with any grid-placement properties.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"4\"><code markup=\"tt\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(8, 50px);\n  grid-auto-flow: dense;\n}<\/code><\/pre>\n\n\n\n<p>That example creates a grid container that can hold eight items in each row and fills any remaining available space with smaller items that come later and can fit the space.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1343\" height=\"534\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//07//s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656053435015_usecase.png?resize=1343%2C534&amp;ssl=1\%22 alt=\"\" class=\"wp-image-367123\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656053435015_usecase.png?w=1343&amp;ssl=1 1343w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656053435015_usecase.png?resize=300%2C119&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656053435015_usecase.png?resize=1024%2C407&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656053435015_usecase.png?resize=768%2C305&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Demonstrating the effect of <code>grid-auto-flow: dense<\/code> in a grid layout.<\/figcaption><\/figure>\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-css\" data-line=\"\"><code markup=\"tt\">grid-auto-flow: [ row | column ] || dense<\/code><\/pre>\n\n\n\n<ul class=\"is-style-almanac-list\"><li><strong>Initial value:<\/strong> <code>row<\/code><\/li><li><strong>Applies to:<\/strong> grid containers<\/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 values *\/\ngrid-auto-flow: column;\ngrid-auto-flow: row;\ngrid-auto-flow: dense;\ngrid-auto-flow: column dense;\ngrid-auto-flow: row dense; \/* same as `dense` *\/\n\n\n\/* Global values *\/\ngrid-auto-flow: inherit;\ngrid-auto-flow: initial; \/* same as `row` *\/\ngrid-auto-flow: revert;\ngrid-auto-flow: revert-layer;\ngrid-auto-flow: unset;<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"row\"><code>row<\/code><\/h4>\n\n\n<p>This is the <strong>default<\/strong> value. Once specified, items will be laid out in a horizontal direction. Grid\u2019s auto-placement algorithm will place grid items by filling each row and will only create new rows if needed.<\/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(auto-fill, 50px);\n  grid-auto-rows: 50px;\n}<\/code><\/pre>\n\n\n\n<p>This example shows that the grid items are placed next to each other in a row and once there is no room in the current row, grid adds new rows automatically in order to place the rest of the grid items.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"753\" height=\"442\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//07//s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1655998708740_row.png?resize=753%2C442&amp;ssl=1\%22 alt=\"\" class=\"wp-image-367124\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1655998708740_row.png?w=753&amp;ssl=1 753w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1655998708740_row.png?resize=300%2C176&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The auto-placement algorithm\u2019s default behavior places grid items by filling each row and creating new rows if needed.<\/figcaption><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"column\"><code>column<\/code><\/h4>\n\n\n<p>Grid items will be laid out vertically by column. The auto-placement algorithm will place grid items by filling each column and create additional columns if needed.<\/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(auto-fill, 50px);\n  grid-template-rows: 50px 50px 50px;\n  grid-auto-flow: column;\n}<\/code><\/pre>\n\n\n\n<p>As you see in the following image, in this example, grid places the items in columns and once there is no cell left, it automatically moves on to the new column until there are no more grid items.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"753\" height=\"441\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//07//s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1655998719731_column.png?resize=753%2C441&amp;ssl=1\%22 alt=\"\" class=\"wp-image-367125\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1655998719731_column.png?w=753&amp;ssl=1 753w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1655998719731_column.png?resize=300%2C176&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Setting the <code>grid-auto-flow property<\/code> to <code>column<\/code> makes the auto-placement algorithm to places grid items by filling each column and create new columns if necessary.<\/figcaption><\/figure>\n\n\n\n<p>In the above example, there were three rows explicitly defined by <code>grid-template-rows<\/code>. Now let\u2019s see another example with no rows specified and <code>grid-auto-flow<\/code> being set to <code>column<\/code>:<\/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(5, 50px);\n  grid-auto-flow: column;\n}<\/code><\/pre>\n\n\n\n<p>Here we only defined five columns but since we set auto-placement to <code>column<\/code>, it generates additional columns in order to place the rest of the grid items, which may cause an overflow.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"267\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//07//s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656000126040_single-row.png?resize=1024%2C267&amp;ssl=1\%22 alt=\"\" class=\"wp-image-367126\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656000126040_single-row.png?resize=1024%2C267&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656000126040_single-row.png?resize=300%2C78&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656000126040_single-row.png?resize=768%2C200&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656000126040_single-row.png?w=1137&amp;ssl=1 1137w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>Demonstrating how <code>grid-auto-flow: column<\/code> puts items next to each other. No additional rows are specified, which causes the grid to overflow its container.<\/figcaption><\/figure>\n\n\n\n<p>Note that those additional columns are called <strong>implicit column<\/strong><strong>s<\/strong> and we can control their size using the <a href=https://css-tricks.com/"https:////css-tricks.com//almanac//properties//g//grid-auto-columns///"><code>grid-auto-columns<\/code><\/a> property.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"dense\"><code>dense<\/code><\/h4>\n\n\n<p>If specified, the auto-placement algorithm attempts to fill available space in the grid with smaller items, even if they are out of order in the markup.<\/p>\n\n\n\n<p>To understand better the <code>dense<\/code> keyword value, let\u2019s establish an 8&#215;8 grid of <code>50px<\/code> squares 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: repeat(8, 50px);\n  grid-template-rows: repeat(8, 50px);\n}<\/code><\/pre>\n\n\n\n<p>Then we expand the size of some of them:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.grid-item:is(:nth-child(3), :nth-child(5), :nth-child(8), :nth-child(12), :nth-child(17) {\n  grid-column: span 3;\n  grid-row: span 2;\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=\"535\" height=\"534\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//07//s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656004743467_holes.png?resize=535%2C534&amp;ssl=1\%22 alt=\"An 8-by-8 grid that contains 31 items inside with a few of them expanded.\" class=\"wp-image-367127\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656004743467_holes.png?w=535&amp;ssl=1 535w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656004743467_holes.png?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/s_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656004743467_holes.png?resize=150%2C150&amp;ssl=1 150w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption> The grid has the default value of auto-placement which has caused some holes to appear among grid items.<\/figcaption><\/figure>\n\n\n\n<p>As you can see, by default, grid lays out items in the same order as they are in the HTML order. And when it comes to a space where it can\u2019t fit an item, it skips that space, leaving \u201choles\u201d in our layout.<\/p>\n\n\n\n<p>The <code>dense<\/code> keyword changes this behavior by allowing the grid to ignore the HTML in a way that, when it finds an item that fits a hole, it will take the item \u2014 regardless of whether it\u2019s next in the HTML or not \u2014 and places it into that hole.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"5\"><code markup=\"tt\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(8, 50px);\n  grid-template-rows: repeat(8, 50px);\n  grid-auto-flow: dense;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"535\" height=\"534\" src=https://css-tricks.com/"https:////i0.wp.com//css-tricks.com//wp-content//uploads//2022//07//B3325332-2C2D-4111-9E27-661007F610BC.png?resize=535%2C534&amp;ssl=1\%22 alt=\"\" class=\"wp-image-367155\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/B3325332-2C2D-4111-9E27-661007F610BC.png?w=535&amp;ssl=1 535w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/B3325332-2C2D-4111-9E27-661007F610BC.png?resize=300%2C300&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/07\/B3325332-2C2D-4111-9E27-661007F610BC.png?resize=150%2C150&amp;ssl=1 150w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption>The <code>dense<\/code> keyword makes auto-placement algorithm to reorder items in order to back-fill holes in the layout.<\/figcaption><\/figure>\n\n\n\n<p>Take a look at the sixth grid item, now it moved in order to fill the first hole that it can fit in.<\/p>\n\n\n\n<p>So by default, grid progresses forward and never looks back to check if it can fit an item in previous empty spaces. But when we declare <code>dense<\/code>, the algorithm attempts to fill as many holes as it can, regardless of the source order.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"row-dense\"><code>row dense<\/code><\/h4>\n\n\n<p>Since <code>row<\/code> is the default value, using <code>row dense<\/code> is the same as using <code>dense<\/code> and it has the same effect.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"column-dense\"><code>column dense<\/code><\/h4>\n\n\n<p>Grid items will be laid out by column while filling holes.<\/p>\n\n\n\n<p>If we change the value of <code>grid-auto-flow<\/code> property to <code>column dense<\/code> in the previous example, we will have the following result:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"5\"><code markup=\"tt\">.grid-container {\n  display: grid;\n  grid-template-columns: repeat(8, 50px);\n  grid-template-rows: repeat(8, 50px);\n  grid-auto-flow: column dense;\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_B7E6D9942D0654182E7822C8DA4E6A6C2F823A623853B9F9847EC7C55BD41E60_1656004774562_dense-column.png/" alt=\"Using column dense value lays out items by column while filling holes.\"\/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"accessibility-concern\">Accessibility concern<\/h3>\n\n\n<p>One thing to note when using the <code>grid-auto-flow<\/code> property is the issue caused by <code>dense<\/code> algorithm.<\/p>\n\n\n\n<p>The <code>dense<\/code> keyword only changes the visual order of the grid items and that order might not be the same as the original document order which may cause a very bad experience for someone tabbing through the document on a keyboard or listening to a screen reader that\u2019s reads content in the same order as the HTML.<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='500' src='https:////videopress.com//embed//42O0pg5c?cover=1&amp;playsinline=1&amp;preloadContent=metadata&amp;useAverageColor=1&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:////v0.wordpress.com//js//next//videopress-iframe.js?m=1674852142'><\/script>\n<\/div><\/figure>\n\n\n\n<p>So, avoid using the <code>dense<\/code> keyword values 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>Creating a gallery with CSS Grid has become very enjoyable and you can add <code>grid-auto-flow<\/code> to make it more awesome:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.gallery {\n  display: grid;\n  grid-template-columns: repeat(8, 8vw);\n  grid-template-rows: repeat(8, 8vw);\n  grid-auto-flow: dense;\n  gap: 1rem;\n}\n\n.item:is(:nth-child(2), :nth-child(4), :nth-child(6)) {\n  grid-column: span 2;\n  grid-row: span 2;\n}<\/code><\/pre>\n\n\n\n<p>You can change the value of the <code>grid-auto-flow<\/code> property to see its effect on the gallery:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaYXpqr\" src=\"\/\/codepen.io\/anon\/embed\/BaYXpqr?height=450&amp;theme-id=1&amp;slug-hash=BaYXpqr&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaYXpqr\" title=\"CodePen Embed BaYXpqr\" 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-auto-flow\" data-periods=\"future_1,current,past_1,past_2\" data-accessible-colours=\"false\"><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"specification\">Specification<\/h3>\n\n\n<p><a href=\"https:\/\/drafts.csswg.org\/css-grid\/#grid-auto-flow-property\" rel=\"noopener\">CSS Grid Layout Module Level 2<\/a><\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"more-information\">More information<\/h3>\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card \" id=\"mini-post-367122\">\n\n  <time datetime=\"2021-05-12\" title=\"Originally published Jul 27, 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<article class=\"in-article-card articles\" id=\"mini-post-367122\">\n\n  <time datetime=\"2020-01-08\" title=\"Originally published Jul 27, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jan 7, 2021  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/the-auto-flowing-powers-of-grids-dense-keyword\/\">\n      The Auto-Flowing Powers of Grid&#8217;s Dense Keyword    <\/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 articles\" id=\"mini-post-367122\">\n\n  <time datetime=\"2020-11-18\" title=\"Originally published Jul 27, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 18, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/grid-auto-flow-css-grid-flex-direction-flexbox\/\">\n      grid-auto-flow : CSS Grid :: flex-direction : Flexbox    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\" aria-label=\"Author page of Robin Rendle\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/me-black-white.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/robinrendle\/\">\n      Robin Rendle    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card articles\" id=\"mini-post-367122\">\n\n  <time datetime=\"2020-05-21\" title=\"Originally published Jul 27, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 21, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/flexbox-like-just-put-elements-in-a-row-with-css-grid\/\">\n      Flexbox-like &#8220;just put elements in a row&#8221; with CSS grid    <\/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<article class=\"in-article-card articles\" id=\"mini-post-367122\">\n\n  <time datetime=\"2019-05-28\" title=\"Originally published Jul 27, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    May 28, 2019  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/using-the-grid-shepherd-technique-to-order-data-with-css\/\">\n      Using the Grid Shepherd Technique to Order Data with CSS    <\/a>\n  <\/h3>\n\n  \n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/davidbernegger\/\" aria-label=\"Author page of David Bernegger\">\n      <img loading=\"lazy\" decoding=\"async\" alt=\"\" class=\"avatar avatar-80 photo avatar-default\" height=\"80\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/david.jpg?resize=80%2C80&#038;ssl=1\" width=\"80\"  data-recalc-dims=\"1\">    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/davidbernegger\/\">\n      David Bernegger    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card notes\" id=\"mini-post-367122\">\n\n  <time datetime=\"2019-06-12\" title=\"Originally published Jul 27, 2022\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jun 12, 2019  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/grid-content-re-ordering-and-accessibility\/\">\n      Grid, content re-ordering and accessibility    <\/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","protected":false},"excerpt":{"rendered":"<p>The grid-auto-flow CSS property is part of the CSS Grid Layout specification that allows us to control the flow of [&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\/367122"}],"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=367122"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/367122\/revisions"}],"predecessor-version":[{"id":367157,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/367122\/revisions\/367157"}],"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=367122"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=367122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}