{"id":325791,"date":"2020-11-18T17:11:08","date_gmt":"2020-11-19T01:11:08","guid":{"rendered":"https:\/\/css-tricks.com\/?p=325791"},"modified":"2020-11-18T17:11:09","modified_gmt":"2020-11-19T01:11:09","slug":"grid-auto-flow-css-grid-flex-direction-flexbox","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/grid-auto-flow-css-grid-flex-direction-flexbox\/","title":{"rendered":"grid-auto-flow : CSS Grid :: flex-direction : Flexbox"},"content":{"rendered":"\n<p>When setting a parent element to <code>display: flex<\/code>, its child elements align left-to-right like this:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_e530f9dec0ccd071e611fdb177bf6f69\" src=\"\/\/codepen.io\/anon\/embed\/e530f9dec0ccd071e611fdb177bf6f69?height=200&amp;theme-id=1&amp;slug-hash=e530f9dec0ccd071e611fdb177bf6f69&amp;default-tab=result\" height=\"200\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed e530f9dec0ccd071e611fdb177bf6f69\" title=\"CodePen Embed e530f9dec0ccd071e611fdb177bf6f69\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now, one of the neat things we can do with flexbox is change the direction so that child elements are stacked vertically on top of each other in a column. We can do that with the <code>flex-direction<\/code> property (or with the <code>flex-flow<\/code> shorthand):<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_93ce5a5d49665f1b1368ee882ba36ca4\" src=\"\/\/codepen.io\/anon\/embed\/93ce5a5d49665f1b1368ee882ba36ca4?height=300&amp;theme-id=1&amp;slug-hash=93ce5a5d49665f1b1368ee882ba36ca4&amp;default-tab=css,result\" height=\"300\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 93ce5a5d49665f1b1368ee882ba36ca4\" title=\"CodePen Embed 93ce5a5d49665f1b1368ee882ba36ca4\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Okay, cool. But how would I do something like this with CSS Grid? As in, let\u2019s say I want all those child elements to be aligned like this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">1 3 5 7\n--------\n2 4 6 8<\/code><\/pre>\n\n\n\n<p>&#8230;instead of this:<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">1 2 3 4\n--------\n5 6 7 8<\/code><\/pre>\n\n\n\n<p>By default, when I set a parent element to use CSS Grid, the elements will be positioned left-to-right just like flexbox. In the example below I\u2019m telling the grid to have 6 columns and 2 rows, then let the child elements fill up each column of the first row before they fill up the columns of the second. You know, standard line wrapping behavior.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.parent {\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  grid-template-rows: repeat(2, 150px);\n  gap: 20px;\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_fc23bc3fff9c4346e0335d41dfeba058\" src=\"\/\/codepen.io\/anon\/embed\/fc23bc3fff9c4346e0335d41dfeba058?height=450&amp;theme-id=1&amp;slug-hash=fc23bc3fff9c4346e0335d41dfeba058&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed fc23bc3fff9c4346e0335d41dfeba058\" title=\"CodePen Embed fc23bc3fff9c4346e0335d41dfeba058\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Basically what I want here is the opposite: I want our child elements to fill up column 1, row 1 <strong>and<\/strong> row 2, then move on to the next column. In other words, column wrapping! I know that if I create a grid with rows and columns I could individually place those elements into those positions. Like so:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.parent {\n  display: grid;\n  grid-template-columns: repeat(6, 1fr);\n  grid-template-rows: repeat(6, 150px);\n}\n\n.child-1 {\n  grid-column: 1;\n  grid-row: 1;\n}\n\n.child-2 {\n  grid-column: 1;\n  grid-row: 2;\n}\n\n.child-3 {\n  grid-column: 2;\n  grid-row: 1;\n}\n\n\/* etc, etc. *\/<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_65ed97f438b7150833c1db20c9e63fb3\" src=\"\/\/codepen.io\/anon\/embed\/65ed97f438b7150833c1db20c9e63fb3?height=430&amp;theme-id=1&amp;slug-hash=65ed97f438b7150833c1db20c9e63fb3&amp;default-tab=result\" height=\"430\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 65ed97f438b7150833c1db20c9e63fb3\" title=\"CodePen Embed 65ed97f438b7150833c1db20c9e63fb3\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Okay, neat! This gets me what I want but it\u2019s a giant pain having to individually set the position of each item. It feels like I\u2019m using <code>position: absolute<\/code> and it doesn\u2019t feel particularly smart. So what if I just wanted this layout to be done for me, so that each new child element would align into the correct spot&#8230;correctly? <\/p>\n\n\n\n<p>What I\u2019m asking for (I think) is this: is there a CSS Grid version of <code>flex-direction: column<\/code>?<\/p>\n\n\n\n<p>Well, after searching around a bit, Rachel Andrew pointed me to the correct answer in her rather excellent playground, <a href=\"https:\/\/gridbyexample.com\" rel=\"noopener\">Grid by Example<\/a>. And as you can see in this demo, Rachel shows us how to do just that:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_QbewmG\" src=\"\/\/codepen.io\/anon\/embed\/QbewmG?height=450&amp;theme-id=1&amp;slug-hash=QbewmG&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed QbewmG\" title=\"CodePen Embed QbewmG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Neato! Rachel does this with the <code>grid-auto-flow<\/code> property: it tells a grid container how to fill the unoccupied space with child elements. So I can do that just by writing this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.parent {\n  display: grid;\n  grid-auto-flow: column;\n  \/* set up columns and rows here *\/\n}<\/code><\/pre>\n\n\n\n<p>By default, child elements of a grid will fill up each column until a row is filled, then it\u2019ll <em>flow<\/em> into the next beneath it. This is why the default for <code>grid-auto-flow<\/code> is set to <code>row<\/code> because we\u2019re filling up rows of the grid first. But if we set it to <code>column<\/code>, then each new element will fill up all the space of column 1 before moving on to column 2, etc.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">.parent {\n  display: grid;\n  grid-auto-flow: column;\n  grid-template-columns: repeat(6, 1fr);\n  grid-template-rows: repeat(2, 150px);\n}<\/code><\/pre>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_764a7963fcc82ec3db78cd46ee83efce\" src=\"\/\/codepen.io\/anon\/embed\/764a7963fcc82ec3db78cd46ee83efce?height=450&amp;theme-id=1&amp;slug-hash=764a7963fcc82ec3db78cd46ee83efce&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 764a7963fcc82ec3db78cd46ee83efce\" title=\"CodePen Embed 764a7963fcc82ec3db78cd46ee83efce\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>This is what the <em>flow<\/em> part of <code>grid-auto-flow<\/code> means and for the longest time I ignored the property because it seemed (don\u2019t laugh) <em>scary.<\/em> Just reading the word <code>grid-auto-flow<\/code> is enough to make me want to shut off my laptop and walk into the ocean.<\/p>\n\n\n\n<p>But! It\u2019s a pretty useful property and makes a ton of sense, especially if you think of it as the CSS Grid version of <code>flex-direction<\/code>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>When setting a parent element to display: flex, its child elements align left-to-right like this: Now, one of the neat things we can do with flexbox is change the direction so that child elements are stacked vertically on top of each other in a column. We can do that with the flex-direction property (or with [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","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":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":253164,"url":"https:\/\/css-tricks.com\/css-grid-replace-flexbox\/","url_meta":{"origin":325791,"position":0},"title":"Does CSS Grid Replace Flexbox?","date":"March 31, 2017","format":false,"excerpt":"No. Well. Mostly No. Grid is much newer than Flexbox and has a bit less browser support. That's why it makes perfect sense if people are wondering if CSS grid is here to replace Flexbox. To put a point on it: Grid can do things Flexbox can't do. Flexbox can\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":310085,"url":"https:\/\/css-tricks.com\/chromium-lands-flexbox-gap\/","url_meta":{"origin":325791,"position":1},"title":"Chromium lands Flexbox gap","date":"May 8, 2020","format":false,"excerpt":"I mentioned this the other day via Michelle Barker's coverage, but here I'll link to the official announcement. The main thing is that we'll be getting gap with flexbox, which means: .flex-parent { display: flex; gap: 1rem; } .flex-child { flex: 1; } That's excellent, as putting space in between\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/bricks-with-gaps.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":341894,"url":"https:\/\/css-tricks.com\/equal-columns-with-flexbox-its-more-complicated-than-you-might-think\/","url_meta":{"origin":325791,"position":2},"title":"Equal Columns With Flexbox: It\u2019s More Complicated Than You Might Think","date":"June 10, 2021","format":false,"excerpt":"As awesome as flexbox is, what it\u2019s doing under the hood is actually a little strange because, by default, it is doing two things at once. It first looks at the content size which is what we would get if by declaring width: max-content on an element. But on top\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/three-equal-columns-blueprint.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":281193,"url":"https:\/\/css-tricks.com\/quick-whats-the-difference-between-flexbox-and-grid\/","url_meta":{"origin":325791,"position":3},"title":"Quick! What&#8217;s the Difference Between Flexbox and Grid?","date":"February 12, 2019","format":false,"excerpt":"Let's go rapid fire and try to answer this question with quick points rather than long explanations. There are a lot of similarities between flexbox and grid, starting with the fact that they are used for layout and much more powerful than any layout technique that came before them. They\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/unicode-pattern.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":242476,"url":"https:\/\/css-tricks.com\/dont-overthink-flexbox-grids\/","url_meta":{"origin":325791,"position":4},"title":"Don&#8217;t Overthink It (Flexbox) Grids","date":"June 22, 2016","format":false,"excerpt":"Four years ago I posted \"Don't Overthink it Grids\" and it resonated with quite a few people. Even back then, I thought we might have been at Peak Grid. Someone was promoting a new grid framework practically every week. That article was my way of saying: \"Fear not! You can\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":289112,"url":"https:\/\/css-tricks.com\/grid-content-re-ordering-and-accessibility\/","url_meta":{"origin":325791,"position":5},"title":"Grid, content re-ordering and accessibility","date":"June 12, 2019","format":false,"excerpt":"Take this: Get hungry Order pizza Eat pizza That HTML ends up in the DOM that way (and thus how it is is exposed to assistive technology), and by default, those list items are also visually shown in that order. In most layout situations, the visual order will match that\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/grid-guide.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\/posts\/325791"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=325791"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325791\/revisions"}],"predecessor-version":[{"id":325828,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325791\/revisions\/325828"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=325791"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=325791"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=325791"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}