{"id":36809,"date":"2019-07-12T23:11:28","date_gmt":"2019-07-12T15:11:28","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=36809"},"modified":"2019-07-12T19:28:09","modified_gmt":"2019-07-12T11:28:09","slug":"css-grid-layout-minmax","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/","title":{"rendered":"How to Use minmax() CSS Grid"},"content":{"rendered":"<p>The <strong><a href=\"https:\/\/www.w3.org\/TR\/css-grid-1\/\" target=\"_blank\" rel=\"nofollow\">CSS Grid Layout Module<\/a><\/strong> takes responsive design to the next level by introducing a <strong>new kind of flexibility<\/strong> that was never seen before. Now, we can\u2019t only <strong>define custom grids<\/strong> blazingly fast solely with pure CSS, but the CSS Grid also has <strong>many hidden gems<\/strong> that allow us to further tweak the grid and achieve complicated layouts.<\/p>\n<p>The <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/minmax\" target=\"_blank\"><code>minmax()<\/code><\/a> function<\/strong> is one of these less widely known features. It makes it possible to define the size of a grid track <strong>as a minimum to maximum range<\/strong> so that the grid can adapt to the viewport of each user the best possible way.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-module\/\">Introduction to the CSS Grid Layout Module<\/a>\n\t\t\t\t<\/p>\n<h2>Syntax<\/h2>\n<p>The syntax of the <code>minmax()<\/code> function is relatively simple, it takes <strong>two arguments<\/strong>: a minimum and a maximum value:<\/p>\n<pre>\r\nminmax(min, max)\r\n<\/pre>\n<p>The <code>min<\/code> value <strong>has to be smaller<\/strong> than the <code>max<\/code>, otherwise <code>max<\/code> gets ignored by the browser.<\/p>\n<p>We can use the <code>minmax()<\/code> function as the <strong>value of the <code>grid-template-columns<\/code> or <code>grid-template-rows<\/code> property (or both)<\/strong>. In our example, we\u2019ll use the former, as it\u2019s a much more frequent use case.<\/p>\n<pre>\r\n.container {\r\n  display: grid;\r\n  grid-template-columns: minmax(100px, 200px) 1fr 1fr;\r\n  grid-template-rows: 100px 100px 100px;\r\n  grid-gap: 10px;\r\n}\r\n<\/pre>\n<p>In the Codepen demo below, you can find the <strong>HTML and CSS code<\/strong> we\u2019ll use throughout the article.<\/p>\n<p><iframe height=\"422\" scrolling=\"no\" title=\"Starter demo for the minmax() CSS function\" src=\"https:\/\/codepen.io\/hkdc\/embed\/yXjNgq\/?height=422&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/hkdc\/pen\/yXjNgq\/\" rel=\"nofollow\">Starter demo for the minmax() CSS function <\/a> by HONGKIAT (<a href=\"https:\/\/codepen.io\/hkdc\" rel=\"nofollow\">@hkdc<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<p>We can use <strong>different kind of values<\/strong> inside the <code>minmax()<\/code> function, all depends on what kind of custom grid we want to create.<\/p>\n<h2>Static length values<\/h2>\n<p>There are two basic ways how we can use the <code>minmax()<\/code> function with <strong>static length values<\/strong>.<\/p>\n<p>Firstly, we can use <code>minmax()<\/code> <strong>only for one grid column<\/strong> and define the width of the other columns as simple static values (pixels here).<\/p>\n<pre>\r\ngrid-template-columns: minmax(100px, 200px) 200px 200px;\r\n<\/pre>\n<p>On the gif demo below, you can see that this layout is <strong>not responsive<\/strong>, however the first column has <strong>some flexibility<\/strong>. The second and the third columns retain their fixed width (200px) while the first column ranges from 100px to 200px, <strong>based on the available space<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/fix-minmax-fix-columns.gif\" width=\"800\" height=\"470\" alt=\"Fixed minmax() with fixed columns\"><\/figure>\n<p>Secondly, we can define the width of <strong>more than one grid column<\/strong> using <code>minmax()<\/code>. The min and max values are both static, so by default, the grid is <strong>not responsive<\/strong>. However, the columns themselves are <strong>flexible<\/strong>, but only between 100px and 200px. They <strong>grow and shrink simultaneously<\/strong> as we change the viewport size.<\/p>\n<pre>\r\ngrid-template-columns: minmax(100px, 200px) minmax(100px, 200px)\r\n                       minmax(100px, 200px);\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/fix-minmax-all-columns.gif\" width=\"800\" height=\"470\" alt=\"Fixed minmax() in all columns\"><\/figure>\n<p>Note that we can also <strong>use the <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/repeat\" target=\"_blank\"><code>repeat()<\/code><\/a> function<\/strong> togehter with <code>minmax()<\/code>. So, the previous code snippet can also be written like this:<\/p>\n<pre>\r\ngrid-template-columns: repeat(3, minmax(100px, 200px));\r\n<\/pre>\n<h2>Dynamic length values<\/h2>\n<p>Apart from static values, the <code>minmax()<\/code> function also accepts <strong>percentage units<\/strong> and the <strong>new <a href=\"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-fr-unit\/\">fraction (fr) unit<\/a><\/strong> as arguments. By using them, we can achieve custom grids that are both <strong>responsive<\/strong> and <strong>change their dimensions<\/strong> according to the available space.<\/p>\n<p>The code below results in a grid in which the width of the first column <strong>ranges between 50% and 80%<\/strong> while the second and the third one <strong>evenly share the remaining space<\/strong>.<\/p>\n<pre>\r\ngrid-template-columns: minmax(50%, 80%) 1fr 1fr;\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/dynamic-minmax.gif\" width=\"800\" height=\"470\" alt=\"Minmax() with dynamic values\"><\/figure>\n<p>When we use dynamic values with the <code>minmax()<\/code> function, it\u2019s crucial to set up a <strong>rule that makes sense<\/strong>. Let me show you an example where the <strong>grid falls apart<\/strong>:<\/p>\n<pre>\r\ngrid-template-columns: minmax(1fr, 2fr) 1fr 1fr;\r\n<\/pre>\n<p>This rule doesn\u2019t make any sense, as the browser is <strong>unable to decide<\/strong> which value to assign to the <code>minmax()<\/code> function. The minimum value would lead to a <code>1fr 1fr 1fr<\/code> column width, while the maximum to <code>2fr 1fr 1fr<\/code>. But, both are possible even on a very small screen. There\u2019s <strong>nothing the browser can relate to<\/strong>.<\/p>\n<p>Here is the result:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/misused-minmax.gif\" width=\"800\" height=\"470\" alt=\"Misused minmax()\"><\/figure>\n<h2>Combine static and dynamic values<\/h2>\n<p>It\u2019s also possible to <strong>combine static and dynamic values<\/strong>. For instance, in the Codepen demo above, I used the <code>minmax(100px, 200px) 1fr 1fr;<\/code> rule that results in a grid where the first column <strong>ranges between 100px and 200px<\/strong> and the remaining space is <strong>evenly shared between the other two<\/strong>.<\/p>\n<pre>\r\ngrid-template-columns: minmax(100px, 200px) 1fr 1fr;\r\n<\/pre>\n<p>It\u2019s interesing to observe that as the viewport grows, first, the first column grows from 100px to 200px. The other two, ruled by the fr unit, begin to grow <strong>only after the first one reached its maximum width<\/strong>. This is logical, as the goal of the fraction unit is to divide up the available (remaining) space.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/combine-static-dynamic-minmax.gif\" width=\"800\" height=\"470\" alt=\"Combine static and dynamic values\"><\/figure>\n<h2>The <code>min-content<\/code>, <code>max-content<\/code>, and <code>auto<\/code> keywords<\/h2>\n<p>There\u2019s a <strong>third kind of value<\/strong> we can assign to the <code>minmax()<\/code> function. The <code>min-content<\/code>, <code>max-content<\/code>, and <code>auto<\/code> keywords relate the dimensions of a grid track to the <strong>content it contains<\/strong>.<\/p>\n<h3><code>max-content<\/code><\/h3>\n<p>The <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/minmax#Values\" target=\"_blank\"><code>max-content<\/code><\/a> keyword<\/strong> directs the browser that the grid column needs to be <strong>as wide as the widest element it contains<\/strong>.<\/p>\n<p>On the demo below, I placed a <strong>400px-wide image<\/strong> inside the first grid track, and used the following CSS rule <em>(you can find a Codepen demo with the full modified code at the end of the article)<\/em>:<\/p>\n<pre>\r\n.container {\r\n  grid-template-columns: max-content 1fr 1fr;\r\n  \/**\r\n  * The same with the minmax() notation:\r\n  * grid-template-columns: minmax(max-content, max-content) 1fr 1fr;\r\n  *\/\r\n}\r\n<\/pre>\n<p>I haven\u2019t used <code>minmax()<\/code> notation yet, but in the code comment above you can see how the same code would look like with it (although it\u2019s superfluous here).<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/max-content-grid-track.gif\" width=\"800\" height=\"553\" alt=\"Grid column with max-content\"><\/figure>\n<p>As you can see, the first grid column is as wide as its widest element (here the image). This way, users can always see the image <strong>in full size<\/strong>. However, under a certain viewport size, this layout is <strong>not responsive<\/strong>.<\/p>\n<h3><code>min-content<\/code><\/h3>\n<p>The <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/minmax#Values\" target=\"_blank\"><code>min-content<\/code><\/a> keyword<\/strong> directs the browser that the grid column needs to be as wide as the <strong>narrowest element it contains<\/strong>, in a way that <strong>doesn\u2019t lead to an overflow<\/strong>.<\/p>\n<p>Let\u2019s see how the previous demo with the image looks like if we change the value of the first column to <code>min-content<\/code>:<\/p>\n<pre>\r\n.container {\r\n  grid-template-columns: min-content 1fr 1fr;\r\n  \/**\r\n  * The same with the minmax() notation:\r\n  * grid-template-columns: minmax(min-content, min-content) 1fr 1fr;\r\n  *\/\r\n}\r\n<\/pre>\n<p>I left the green background below the image so that you can see the full size of the first grid cell.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/min-content-grid-track.gif\" width=\"800\" height=\"474\" alt=\"Grid column with max-content\"><\/figure>\n<p>As you can see, the first column retains the smallest width that <strong>can be achieved without an overflow<\/strong>. In this example, this will be defined by the minimal width of the 4th and 7th grid cells, which stems from the <code>padding<\/code> and <code>font-size<\/code> properties, as the image in the first cell <strong>could be shrinked to zero<\/strong> without an overflow.<\/p>\n<p>If the grid cell contained a text string, <code>min-content<\/code> would be <strong>equal to the width of the longest word<\/strong>, as that\u2019s the smallest element that can\u2019t be further shrinked without an overflow. Here\u2019s a <a href=\"https:\/\/bitsofco.de\/how-the-minmax-function-works\/\" target=\"_blank\">great article by BitsOfCode<\/a> where you can see how <code>min-content<\/code> and <code>max-content<\/code> behave when the grid cell contains a text string.<\/p>\n<h3>Using <code>min-content<\/code> and <code>max-content<\/code> together<\/h3>\n<p>If we <strong>use <code>min-content<\/code> and <code>max-content<\/code> together<\/strong> inside the <code>minmax()<\/code> function we get a grid column that:<\/p>\n<ol>\n<li>is responsive<\/li>\n<li>doesn\u2019t have any overflow<\/li>\n<li>doesn\u2019t grow wider than its widest element<\/li>\n<\/ol>\n<pre>\r\n.container {\r\n    grid-template-columns: minmax(min-content, max-content) 1fr 1fr;\r\n}\r\n<\/pre>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/min-content-max-content-combined.gif\" width=\"800\" height=\"491\" alt=\"Grid column with min-content and max-content\"><\/figure>\n<p>We can also use the <code>min-content<\/code> and <code>max-content<\/code> keywords <strong>together with other length values<\/strong> inside the <code>minmax()<\/code> function, until the rule makes sense. For instance, <code>minmax(25%, max-content)<\/code> or <code>minmax(min-content, 300px)<\/code> would be both valid rules.<\/p>\n<h3><code>auto<\/code><\/h3>\n<p>Finally, we can also use the <strong><code>auto<\/code> keyword<\/strong> as an argument of the <code>minmax()<\/code> function.<\/p>\n<p>When <code>auto<\/code> is <strong>used as a maximum<\/strong>, its value is identical to <code>max-content<\/code>.<\/p>\n<p>When it\u2019s <strong>used as a minimum<\/strong>, its value is specified by the <code>min-width\/min-height<\/code> rule, which means that <code>auto<\/code> is sometimes identical to <code>min-content<\/code>, but <strong>not always<\/strong>.<\/p>\n<p>In our previous example, <code>min-content<\/code> does equal to <code>auto<\/code>, as the minimal width of the first grid column is always smaller than its minimal height. So, the belonging CSS rule:<\/p>\n<pre>\r\n.container {\r\n    grid-template-columns: minmax(min-content, max-content) 1fr 1fr;\r\n}\r\n<\/pre>\n<p>could be also written like this:<\/p>\n<pre>\r\n.container {\r\n    grid-template-columns: minmax(auto, auto) 1fr 1fr;\r\n}\r\n<\/pre>\n<p>The <code>auto<\/code> keyword can also be <strong>used together with other static and dynamic units<\/strong> (pixels, fr unit, percentages, etc.) inside the <code>minmax()<\/code> function, for instance <code>minmax(auto, 300px)<\/code> would be a valid rule.<\/p>\n<p>You can test how the <code>min-content<\/code>, <code>max-content<\/code>, and <code>auto<\/code> keywords work with the <code>minmax()<\/code> function in the following Codepen demo:<\/p>\n<p><iframe height=\"442\" scrolling=\"no\" title=\"CSS Grid Layout - minmax() function with min-content and max-content\" src=\"https:\/\/codepen.io\/hkdc\/embed\/EXRjpJ\/?height=442&theme-id=0&default-tab=css,result&embed-version=2\" frameborder=\"no\" allowtransparency=\"true\" allowfullscreen=\"true\" style=\"width: 100%;\">See the Pen <a href=\"https:\/\/codepen.io\/hkdc\/pen\/EXRjpJ\/\" rel=\"nofollow\">CSS Grid Layout \u2013 minmax() function with min-content and max-content<\/a> by HONGKIAT (<a href=\"https:\/\/codepen.io\/hkdc\" rel=\"nofollow\">@hkdc<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"nofollow\">CodePen<\/a>. <\/iframe><\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/moving-css-grid-items\/\">Moving Items in CSS Grid Layout [Guide]<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"<p>The CSS Grid Layout Module takes responsive design to the next level by introducing a new kind of flexibility that was never seen before. Now, we can\u2019t only define custom grids blazingly fast solely with pure CSS, but the CSS Grid also has many hidden gems that allow us to further tweak the grid and&hellip;<\/p>\n","protected":false},"author":146,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4319,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Use minmax() CSS Grid - Hongkiat<\/title>\n<meta name=\"description\" content=\"The CSS Grid Layout Module takes responsive design to the next level by introducing a new kind of flexibility that was never seen before. Now, we can&#039;t\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Use minmax() CSS Grid\" \/>\n<meta property=\"og:description\" content=\"The CSS Grid Layout Module takes responsive design to the next level by introducing a new kind of flexibility that was never seen before. Now, we can&#039;t\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-12T15:11:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/fix-minmax-fix-columns.gif\" \/>\n<meta name=\"author\" content=\"Anna Monus\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Anna Monus\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-layout-minmax\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-layout-minmax\\\/\"},\"author\":{\"name\":\"Anna Monus\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\"},\"headline\":\"How to Use minmax() CSS Grid\",\"datePublished\":\"2019-07-12T15:11:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-layout-minmax\\\/\"},\"wordCount\":1187,\"commentCount\":1,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-layout-minmax\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-grid-layout-minmax\\\/fix-minmax-fix-columns.gif\",\"keywords\":[\"CSS\",\"CSS Grid Layout\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-layout-minmax\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-layout-minmax\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-layout-minmax\\\/\",\"name\":\"How to Use minmax() CSS Grid - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-layout-minmax\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-layout-minmax\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-grid-layout-minmax\\\/fix-minmax-fix-columns.gif\",\"datePublished\":\"2019-07-12T15:11:28+00:00\",\"description\":\"The CSS Grid Layout Module takes responsive design to the next level by introducing a new kind of flexibility that was never seen before. Now, we can't\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-layout-minmax\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-layout-minmax\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-layout-minmax\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-grid-layout-minmax\\\/fix-minmax-fix-columns.gif\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-grid-layout-minmax\\\/fix-minmax-fix-columns.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-grid-layout-minmax\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Use minmax() CSS Grid\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/a601053a0ab457901e00cdc83bd5359e\",\"name\":\"Anna Monus\",\"description\":\"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.\",\"sameAs\":[\"https:\\\/\\\/www.annalytic.com\\\/\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/anna_monus\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Use minmax() CSS Grid - Hongkiat","description":"The CSS Grid Layout Module takes responsive design to the next level by introducing a new kind of flexibility that was never seen before. Now, we can't","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/","og_locale":"en_US","og_type":"article","og_title":"How to Use minmax() CSS Grid","og_description":"The CSS Grid Layout Module takes responsive design to the next level by introducing a new kind of flexibility that was never seen before. Now, we can't","og_url":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2019-07-12T15:11:28+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/fix-minmax-fix-columns.gif","type":"","width":"","height":""}],"author":"Anna Monus","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Anna Monus","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/"},"author":{"name":"Anna Monus","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e"},"headline":"How to Use minmax() CSS Grid","datePublished":"2019-07-12T15:11:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/"},"wordCount":1187,"commentCount":1,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/fix-minmax-fix-columns.gif","keywords":["CSS","CSS Grid Layout","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/","url":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/","name":"How to Use minmax() CSS Grid - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/fix-minmax-fix-columns.gif","datePublished":"2019-07-12T15:11:28+00:00","description":"The CSS Grid Layout Module takes responsive design to the next level by introducing a new kind of flexibility that was never seen before. Now, we can't","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/fix-minmax-fix-columns.gif","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-grid-layout-minmax\/fix-minmax-fix-columns.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-grid-layout-minmax\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to Use minmax() CSS Grid"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/a601053a0ab457901e00cdc83bd5359e","name":"Anna Monus","description":"Anna is Technical Editor and Writer for Hongkiat.com. She mainly covers front-end frameworks, web standards, accessibility, WordPress development, and UX design.","sameAs":["https:\/\/www.annalytic.com\/"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/anna_monus\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-9zH","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/36809","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/146"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=36809"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/36809\/revisions"}],"predecessor-version":[{"id":48268,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/36809\/revisions\/48268"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=36809"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=36809"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=36809"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=36809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}