{"id":247172,"date":"2016-11-02T06:20:19","date_gmt":"2016-11-02T13:20:19","guid":{"rendered":"http:\/\/css-tricks.com\/?p=247172"},"modified":"2019-03-20T15:48:12","modified_gmt":"2019-03-20T22:48:12","slug":"things-ive-learned-css-grid-layout","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/things-ive-learned-css-grid-layout\/","title":{"rendered":"Things I&#8217;ve Learned About CSS Grid Layout"},"content":{"rendered":"<p><em class=\"explanation\">The following is a guest post by Oliver Williams. Oliver has been working with CSS grid layout and has learned quite a bit along the way. In this article he&#8217;s going to hop around to different concepts that he&#8217;s learned on that journey. I like this idea of learning little bite-sized chunks about grid layout, through isolated examples where possible. That makes learning <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\">the whole thing<\/a> a bit less intimidating.<\/em><\/p>\n<p><!--more--><\/p>\n<p>CSS grid looks set to land in browsers in early 2017. <strong>Until then you will need to enable grid for it to work<\/strong> (except in Firefox Nightly where it is enabled by default). <em>Chrome Canary currently has the best implementation.<\/em> Meanwhile, Firefox has an invaluable add-on called CSS Grid Inspector, which can display the lines of your grid. It is currently the only browser to have such a tool.<\/p>\n<p>In Chrome enter `chrome:\/\/flags` into your address bar, find \u2018Enable experimental Web Platform features\u2019 and click enable. IE and Edge have old implementations different from the current spec, and are therefore not recommended for experimenting with grid at this point in time.<\/p>\n<h3>You can&#8217;t have tetris-shaped grid areas<\/h3>\n<p>You&#8217;ll work this out pretty quickly for yourself.<\/p>\n<figure id=\"post-247224\" class=\"align-none media-247224\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/no-tetris.png?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><figcaption>Your grid areas can only be rectangles (like the left), not arbitrary polygons (like the right).<\/figcaption><\/figure>\n<h3>Grid is designed to be used <em>with<\/em> flexbox, not instead of it<\/h3>\n<p>Grid and flexbox can act in similar ways. You may have seen people using flexbox to construct grid systems but that&#8217;s not what flexbox was designed for. It&#8217;s worth reading Jake Archibald&#8217;s blog post <em><a href=\"https:\/\/jakearchibald.com\/2014\/dont-use-flexbox-for-page-layout\/\" rel=\"noopener\">Don&#8217;t use flexbox for overall page layout<\/a><\/em>.<\/p>\n<p>A quick way to think about it is:<\/p>\n<ul>\n<li>Flexbox is for one dimensional layout (row or column).<\/li>\n<li>CSS grid is for two dimensional layout.<\/li>\n<\/ul>\n<p>Or as Rachel Andrews <a href=\"https:\/\/rachelandrew.co.uk\/archives\/2016\/03\/30\/should-i-use-grid-or-flexbox\/\" rel=\"noopener\">put it<\/a>:<\/p>\n<blockquote><p>Flexbox is essentially for laying out items in a single dimension \u2013 in a row OR a column. Grid is for layout of items in two dimensions \u2013 rows AND columns.<\/p><\/blockquote>\n<p>They can be combined as well. You can turn a grid item into a flex container. You can turn a flex item into a grid.<\/p>\n<p>Let&#8217;s take one useful example. We want to vertically center the text inside a grid item but we want the background (whether a color, a gradient or an image) to cover the items entire grid area. We can use the <code>align-items<\/code> property with a value of center but now the background doesn&#8217;t fill the whole area of the item. The default for <code>align-items<\/code> is <code>stretch<\/code> \u2014 as soon as you set it to any other value, it no longer fills the space. Let&#8217;s instead leave it set to stretch and turn our grid item into a flex container.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.grid {\r\n  align-items: stretch;\r\n}\r\n\r\n.griditem {\r\n  display: flex;\r\n  align-items: center;\r\n}<\/code><\/pre>\n<h3>Using negative line numbers can be really helpful<\/h3>\n<p>Imagine a current CSS grid framework with a 12 column grid. At small screens, rather than reducing the number of columns, the content is told to span all twelve columns, giving the impression of being a single full-width column.<\/p>\n<p>You could do this same kind of thing with grid:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">\/* For small screens *\/\r\n.span4, .span6, .spanAll {\r\n  grid-column-end: span 12;\r\n}\r\n\r\n\/* For large screens *\/\r\n@media (min-width: 650px) {\r\n  .span4 {\r\n    grid-column-end: span 4;\r\n  }\r\n  .span6 {\r\n    grid-column-end: span 6;\r\n  }\r\n}<\/code><\/pre>\n<p>There&#8217;s nothing wrong with this approach. However, with CSS grid, it&#8217;s just as easy to redefine the number of columns. By using -1, you can be sure your content will always reach the end.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">\/* For small screens *\/\r\n.span4, .span6, .spanAll {\r\n  grid-column-end: -1;\r\n}<\/code><\/pre>\n<p>For a large screen you may want as many as twelve columns. For a mobile, anywhere between one and four. It&#8217;s easy to change the <code>grid-template-columns<\/code> value with a media query.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.grid {\r\n  grid-template-columns: 1fr 1fr;\r\n}\r\n\r\n@media (min-width: 700px) {\r\n  .grid {\r\n    grid-template-columns: repeat(12, 1fr);\r\n  }\r\n}<\/code><\/pre>\n<p>There are likely some elements we want to span across the whole viewport for all screen sizes, like perhaps the header, footer, or some hero images.<\/p>\n<p>For small screens we could write:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.wide {\r\n  grid-column: 1 \/ 3; \/* start at 1, end at 3 *\/\r\n}<\/code><\/pre>\n<p>However, once we make our media query these elements will cover only the first two columns of twelve columns. We <em>could<\/em> include the new desired <code>grid-column-end<\/code> value of <code>13<\/code> in the same media query but there&#8217;s a far easier method. Just set the end value to <code>-1<\/code> and it will span <em>all<\/em> columns, however many there happen to be. Like:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.wide, .hero, .header, .footer {\r\n  grid-column: 1 \/ -1;\r\n}<\/code><\/pre>\n<p class=\"codepen\" data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"wzgaRN\" data-default-tab=\"html,result\" data-user=\"cssgrid\" data-embed-version=\"2\" data-pen-title=\"Easier media queries with -1\">See the Pen <a href=\"http:\/\/codepen.io\/cssgrid\/pen\/wzgaRN\/\" rel=\"noopener\">Easier media queries with -1<\/a> by CSS GRID (<a href=\"http:\/\/codepen.io\/cssgrid\" rel=\"noopener\">@cssgrid<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Grid areas create implicit line names<\/h3>\n<p>Named grid template areas and grid line numbers are two ways of placing content on the grid but you can use both placement methods in the same grid. You can also make use of the implicit line names that are created whenever you designate a grid-area.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.grid {\r\n  grid-template-areas: \"main main sidebar sidebar\";\r\n}<\/code><\/pre>\n<p>With this code, we just created four implicit line names: main-start, main-end, sidebar-start, and sidebar-end.<\/p>\n<p>This could be useful if you want to overlap content either over several grid areas or in a particular subsection of one grid area.<\/p>\n<p class=\"codepen\" data-height=\"507\" style=\"height: 507px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"GmqBBY\" data-default-tab=\"result\" data-user=\"css-tricks\" data-embed-version=\"2\" data-pen-title=\"implicit line names with grid areas\" class=\"codepen\">See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/GmqBBY\/\" rel=\"noopener\">implicit line names with grid areas<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>There is a second way of defining grid areas<\/h3>\n<p>Just like grid areas create line names, specific line names can create grid areas. The syntax for defining grid areas looks like:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.grid {\r\n  grid-template-areas: \r\n    \"header header header\"\r\n    \"main main sidebar\"\r\n    \"footer footer footer\";\r\n}<\/code><\/pre>\n<p>This syntax can become somewhat unwieldy if you have a lot of empty space in your design (Too many periods! Periods, in lieu of a name, signify an empty cell.) You may not know that there is another way to define grid areas. We can name grid lines whatever we like. However, if we follow the naming convention <code>[name-start]<\/code> and <code>[name-end]<\/code> we can create grid areas. Here&#8217;s an example:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.grid {\r\n  display: grid;\r\n  grid-template-columns: 20px 100px [main-start] 1fr [main-end] 100px 20px;\r\n  grid-template-rows: 100px [main-start] 100px [main-end] 100px;\r\n}\r\n\r\n.griditem1 {\r\n  background-color: red;\r\n  grid-area: main;\r\n}<\/code><\/pre>\n<p class=\"codepen\" data-height=\"402\" style=\"height: 402px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"amyrVb\" data-default-tab=\"result\" data-user=\"cssgrid\" data-embed-version=\"2\" data-pen-title=\"Another way of defining grid-areas\">See the Pen <a href=\"http:\/\/codepen.io\/cssgrid\/pen\/amyrVb\/\" rel=\"noopener\">Another way of defining grid-areas<\/a> by CSS GRID (<a href=\"http:\/\/codepen.io\/cssgrid\" rel=\"noopener\">@cssgrid<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>You probably wouldn&#8217;t lay out a whole page of content with this method, but if you want to combine <code>grid-area<\/code> placement with line number based placement, it&#8217;s nice to know about.<\/p>\n<h3>Use vmin for an equal sized box layout<\/h3>\n<p>CSS grid allows you to use any size unit for your rows and columns. Want equally-sized boxes but also want them to be responsive? If you want content that resizes with the container, you can use viewport units.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.grid {\r\n  grid-template-columns: repeat(5, 20vw);\r\n  grid-template-rows: repeat(5, 20vh);\r\n}<\/code><\/pre>\n<p>This would work perfectly well on desktop and laptop but on mobile phones where the height of the screen exceeds the width, our content will spill over creating a horizontal scroll bar. Dudley Storey recently wrote a blog post about <a href=\"http:\/\/thenewcode.com\/1137\/MinMaxing-Understanding-vMin-and-vMax-in-CSS\" rel=\"noopener\">the usefulness of a lesser-known css unit: vmin<\/a>. This unit will be a percentage of the viewport width on a portrait-oriented screen and a percentage of the viewport height on a landscape-oriented screen.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.gridcontainer {\r\n  display: grid;\r\n  width: 100vw;\r\n  height: 100vh;\r\n  justify-content: center;\r\n  align-content: center;\r\n  grid-template-columns: repeat(5, 20vmin);\r\n  grid-template-rows: repeat(5, 20vmin);\r\n}<\/code><\/pre>\n<p>We now have equally-sized boxes that adapt to any screensize.<\/p>\n<p class=\"codepen\" data-height=\"605\" style=\"height: 605px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"amkobw\" data-default-tab=\"result\" data-user=\"cssgrid\" data-embed-version=\"2\" data-pen-title=\"Boxy Layout with CSS Grid and vmin\">See the Pen <a href=\"http:\/\/codepen.io\/cssgrid\/pen\/amkobw\/\" rel=\"noopener\">Boxy Layout with CSS Grid and vmin<\/a> by CSS GRID (<a href=\"http:\/\/codepen.io\/cssgrid\" rel=\"noopener\">@cssgrid<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Absolute positioning<\/h3>\n<p>When you absolutely position a grid item, rather than its positioning context being its container (i.e. the entire grid) we can position it in relation to its specified grid-column and grid-row start and end lines. As usual, <code>position: absolute<\/code> removes an element from the flow of the document (i.e. it is ignored by other elements). This makes absolute positioning useful if you want to overlap grid items without disrupting the grids auto-placement algorithm. Auto-placement goes out of its way <em>not<\/em> to overlap items unless you explicitly declare both a <code>grid-column-start<\/code> and <code>grid-row-start<\/code> value for every item.<\/p>\n<p>Try deleting <code>position: absolute;<\/code> from the div in this example and think about how many items you&#8217;d have to define grid-column and grid-row properties for!<\/p>\n<p class=\"codepen\" data-height=\"472\" style=\"height: 472px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"NRayjx\" data-default-tab=\"result\" data-user=\"cssgrid\" data-embed-version=\"2\" data-pen-title=\"preserving auto-placement with position: absolute\">See the Pen <a href=\"http:\/\/codepen.io\/cssgrid\/pen\/NRayjx\/\" rel=\"noopener\">preserving auto-placement with position: absolute<\/a> by CSS GRID (<a href=\"http:\/\/codepen.io\/cssgrid\" rel=\"noopener\">@cssgrid<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>Order works differently from how you might think<\/h3>\n<p>If you&#8217;ve used the flexbox <code>order<\/code> property, then you already have this covered. All grid items have a default order value of <code>0<\/code>. So <code>order: 1;<\/code> applied to a grid item would make <em>after<\/em> everything else, not <em>before<\/em>.<\/p>\n<p>You can use negative numbers to push items to the front.<\/p>\n<p class=\"codepen\" data-height=\"384\" style=\"height: 384px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"QKeqKd\" data-default-tab=\"html,result\" data-user=\"cssgrid\" data-embed-version=\"2\" data-pen-title=\"Order value\">See the Pen <a href=\"http:\/\/codepen.io\/cssgrid\/pen\/QKeqKd\/\" rel=\"noopener\">Order value<\/a> by CSS GRID (<a href=\"http:\/\/codepen.io\/cssgrid\" rel=\"noopener\">@cssgrid<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>The limits of minmax<\/h3>\n<p>Do you want columns that equally divide space between themselves until they reach a maximum width? You might think you could use <code>minmax()<\/code> like so:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, minmax(1fr, 300px));\r\n}<\/code><\/pre>\n<p>Unfortunately that isn&#8217;t going to work. If max is less in value than min, it is ignored. The <code>fr<\/code> is invalid as a minimum value in <code>minmax()<\/code>. However, it&#8217;s a very easy behaviour to achieve. The word <code>auto<\/code>, when used as a value in <code>grid-template-columns<\/code> or <code>grid-template-rows<\/code>, will make the column or row as large as its content.<\/p>\n<p class=\"codepen\" data-height=\"288\" style=\"height: 288px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"ALQjAj\" data-default-tab=\"result\" data-user=\"cssgrid\" data-embed-version=\"2\" data-pen-title=\"The value of auto vs fr\">See the Pen <a href=\"http:\/\/codepen.io\/cssgrid\/pen\/ALQjAj\/\" rel=\"noopener\">The value of auto vs fr<\/a> by CSS GRID (<a href=\"http:\/\/codepen.io\/cssgrid\" rel=\"noopener\">@cssgrid<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Then we can set a <code>max-width<\/code> on the content:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.grid {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, auto);\r\n}\r\n\r\n.item {\r\n  max-width: 300px;\r\n}<\/code><\/pre>\n<p class=\"codepen\" data-height=\"338\" style=\"height: 338px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"jrGppp\" data-default-tab=\"result\" data-user=\"cssgrid\" data-embed-version=\"2\" data-pen-title=\"The limits of minmax\">See the Pen <a href=\"http:\/\/codepen.io\/cssgrid\/pen\/jrGppp\/\" rel=\"noopener\">The limits of minmax<\/a> by CSS GRID (<a href=\"http:\/\/codepen.io\/cssgrid\" rel=\"noopener\">@cssgrid<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>There might be good reasons for the way <code>minmax()<\/code> works and use cases I haven&#8217;t thought of. Even so, I wrote an entire post on Medium entitled <a href=\"https:\/\/medium.com\/csstuff\/the-one-thing-i-hate-about-grid-cd2c4acdbb8a#.fyx2dobun\" rel=\"noopener\">The One Thing I Hate About Grid<\/a>.<\/p>\n<h3>Things are way easier if you name your grid lines<\/h3>\n<p>There are multiple approaches you can take. If you&#8217;re really into typing, you can give lines multiple names.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.grid {\r\n  grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end];\r\n}<\/code><\/pre>\n<p>The easiest naming convention makes use of the grids auto-numbering. We don&#8217;t have to type [col2], we can just type the name <code>col<\/code> followed by a number.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.griditem1 {\r\n  grid-column-start: col 2;\r\n}<\/code><\/pre>\n<p>Combined with the span keyword we can stop thinking about <em>line numbers<\/em> and start thinking in terms of the first column we want our content to fill and how many columns we want to take up, which is far more intuitive.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.grid {\r\n  grid-template-columns: repeat(4, [col] 100px);\r\n}\r\n\r\n.griditem1 {\r\n  grid-column: col 2 \/ span 2;\r\n}<\/code><\/pre>\n<h3>The fr unit removes the need for math<\/h3>\n<p>Let&#8217;s say we want to split our grid into four equal columns. It&#8217;s easy to work out the percentages. We just write <code>grid-template-columns: 25% 25% 25% 25%<\/code>.<\/p>\n<p>What if we then want to make use of the <code>grid-gap<\/code> property? <code>grid-gap: 10px<\/code>. We have three gaps between our columns, so our grid width will now be 100% + 30px and unwanted horizontal scrolling will appear with some content overspilling the screen on the right side. We could make use of calc to solve our problem, but using the fr unit is far easier: <code>grid-template-columns: 1fr 1fr 1fr 1fr<\/code>.<\/p>\n<p class=\"codepen\" data-height=\"339\" style=\"height: 339px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"LRzgLJ\" data-default-tab=\"result\" data-user=\"cssgrid\" data-embed-version=\"2\" data-pen-title=\"fr unit vs percentage\">See the Pen <a href=\"http:\/\/codepen.io\/cssgrid\/pen\/LRzgLJ\/\" rel=\"noopener\">fr unit vs percentage<\/a> by CSS GRID (<a href=\"http:\/\/codepen.io\/cssgrid\" rel=\"noopener\">@cssgrid<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>The second thing I hate about grid<\/h3>\n<p>There is no way to force the auto-placement algorithm to leave some columns or rows empty<\/p>\n<p>The <code>grid-gap<\/code> values provides an easy way for spacing our content. While we can specify a separate value to divide our columns and our rows with <code>grid-row-gap<\/code> and <code>grid-column-gap<\/code>, these values must be uniform. If we want to separate our first and second row by ten pixels and our second and third row by 50 pixels, grid offers us no way of doing this, other than by creating rows and keeping them empty.<br \/>\nYou may have seen the periods\/dots in the <code>grid-template-areas<\/code> syntax:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">grid-template-areas: \r\n  \"header header header\"\r\n  \"main    main   main\"\r\n  \"  .       .       .\"\r\n  \"secondary secondary secondary\"\r\n  \"footer footer footer\";<\/code><\/pre>\n<p>This could have provided a simple way to control the auto-placement algorithm to stop it from placing items in these areas. Unfortunately, it doesn&#8217;t work like that: this syntax simply denotes that we don&#8217;t want to turn the third row into a named grid-area. Auto-placed items <em>will<\/em> still end up there.<\/p>\n<h3>Some design advice: You don&#8217;t necessarily need 12 columns (and columns need not be uniform in size)<\/h3>\n<p>Twelve columns is the default of web design. The Bootstrap grid uses 12 columns and just about every other grid framework currently out there. There is a good reason for this: twelve is divisible by both three and four, giving more flexibility in how we can lay out content across the page. We can divide our content evenly into 12 parts, 6 parts, 4 parts, 3 parts, or in half.<\/p>\n<p>While some people like the familiarity that comes with consistently using the same grid for every project, there is no need to have more columns than you actually need and you should build the grid that&#8217;s right for your content and desired layout rather than a one-size-fits all set-up.<\/p>\n<p>Take a look at the examples on <a href=\"https:\/\/gridsetapp.com\/\" rel=\"noopener\">Gridset<\/a>. Gridset is a useful tool for making grids, but once the native CSS grid module lands you won&#8217;t need tools like this. It does showcase some excellently-designed grids.<\/p>\n<figure id=\"post-247227\" class=\"align-none media-247227\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2016\/10\/grid.jpg?ssl=1\" alt=\"\" data-recalc-dims=\"1\" \/><\/figure>\n<p>I took the liberty of remaking one using the CSS grids:<\/p>\n<p class=\"codepen\" data-height=\"700\" style=\"height: 700px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"kkoZro\" data-default-tab=\"result\" data-user=\"cssgrid\" data-embed-version=\"2\" data-pen-title=\"text layout with CSS Grid module\">See the Pen <a href=\"http:\/\/codepen.io\/cssgrid\/pen\/kkoZro\/\" rel=\"noopener\">text layout with CSS Grid module<\/a> by CSS GRID (<a href=\"http:\/\/codepen.io\/cssgrid\" rel=\"noopener\">@cssgrid<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The following is a guest post by Oliver Williams. Oliver has been working with CSS grid layout and has learned quite a bit along the way. In this article he&#8217;s going to hop around to different concepts that he&#8217;s learned on that journey. I like this idea of learning little bite-sized chunks about grid layout, [&hellip;]<\/p>\n","protected":false},"author":245300,"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":false,"jetpack_social_options":[]},"categories":[4],"tags":[686,586],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":308403,"url":"https:\/\/css-tricks.com\/exciting-things-on-the-horizon-for-css-layout\/","url_meta":{"origin":247172,"position":0},"title":"Exciting Things on the Horizon For CSS Layout","date":"May 7, 2020","format":false,"excerpt":"Michelle Barker notes that it's been a heck of a week for us CSS layout nerds. Firefox has long had the best DevTools for CSS Grid, but Chrome is about to catch up and go one bit better by visualizing grid line numbers and names.Firefox supports gap for display: flex,\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":308358,"url":"https:\/\/css-tricks.com\/first-steps-into-a-possible-css-masonry-layout\/","url_meta":{"origin":247172,"position":1},"title":"First Steps into a Possible CSS Masonry Layout","date":"May 18, 2020","format":false,"excerpt":"It's not at the level of demand as, say, container queries, but being able to make \"masonry\" layouts in CSS has been a big ask for CSS developers for a long time. Masonry being that kind of layout where unevenly-sized elements are layed out in ragged rows. Sorta like a\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/css-masonry.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340490,"url":"https:\/\/css-tricks.com\/devtools-for-css-layouts-2021-edition\/","url_meta":{"origin":247172,"position":2},"title":"DevTools for CSS layouts 2021 edition","date":"May 13, 2021","format":false,"excerpt":"Chen Hui Jing covers some recent movement in DevTools: Firefox\u2019s grid inspector was pretty full-featured from the get-to and\u00a0released together with CSS grid in Firefox 52. It was constantly improved upon since. Chrome added a\u00a0basic grid inspector tool in Chrome 62\u00a0that let developers highlight elements using grid layout, but more\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/chrome-align-1280.png?fit=1200%2C443&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":313071,"url":"https:\/\/css-tricks.com\/just-another-1-for-subgrid\/","url_meta":{"origin":247172,"position":3},"title":"Just another +1 for subgrid","date":"June 19, 2020","format":false,"excerpt":"I'd say 85% of my grid usage is in one of these two categories... I just need some pretty basic (probably equal width) columns that ends up being something like like grid-template-columns: repeat(3, minmax(0, 1fr)); to be safe.Actually doing some real layout where five minutes in I realize I'd really\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/hello-subgrid-video-cover.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":367158,"url":"https:\/\/css-tricks.com\/implicit-grids-repeatable-layout-patterns-and-danglers\/","url_meta":{"origin":247172,"position":4},"title":"Implicit Grids, Repeatable Layout Patterns, and Danglers","date":"August 2, 2022","format":false,"excerpt":"Dave Rupert with some modern CSS magic that tackles one of those classic conundrums: what happens when the CSS for component is unable to handle the content we throw at it? The specific situation is when a layout grid expects an even number of items, but is supplied with an\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/06\/boxes-gap.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":326473,"url":"https:\/\/css-tricks.com\/native-css-masonry-layout-in-css-grid\/","url_meta":{"origin":247172,"position":5},"title":"Native CSS Masonry Layout In CSS Grid","date":"November 30, 2020","format":false,"excerpt":"Rachel Andrew introducing the fact that masonry layout is going to be a thing in native CSS via CSS grid layout. The thing with masonry is that we can already do it for the most part, but there is just one thing that makes it hard: doing the vertical-staggering and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/pure-css-masonry.jpg?fit=1200%2C825&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/247172"}],"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\/245300"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=247172"}],"version-history":[{"count":17,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/247172\/revisions"}],"predecessor-version":[{"id":285153,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/247172\/revisions\/285153"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=247172"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=247172"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=247172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}