{"id":2810,"date":"2020-08-10T12:08:55","date_gmt":"2020-08-10T12:08:55","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=2810"},"modified":"2023-03-02T09:54:05","modified_gmt":"2023-03-02T09:54:05","slug":"css-tutorial-grid-template","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/css-tutorial-grid-template\/","title":{"rendered":"CSS Tutorial &#8211; grid-template"},"content":{"rendered":"<p>The\u00a0<code>grid-template<\/code>\u00a0CSS property is a shorthand that allows you to define grid columns, rows, and areas in a CSS grid container with one declaration.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.grid-container {\r\n  display: grid;\r\n  grid-template:\r\n    \"header  header\"\r\n    \"sidebar main\"   1fr\r\n    \"footer  footer\" min-content\r\n    \/ 250px   1fr;\r\n}<\/pre>\n<h2 id=\"constituent-properties\">Constituent properties<\/h2>\n<p>As mentioned,\u00a0<code>grid-template<\/code>\u00a0is a shorthand that combines multiple properties. Which properties, you ask? These are the three:<\/p>\n<h3>grid-template-columns<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.sidebar-layout {\r\n  display: grid;\r\n  grid-template-columns: 300px 1fr;\r\n}<\/pre>\n<h3>grid-template-rows<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.app-layout {\r\n  display: grid;\r\n  grid-template-rows: auto 1fr auto;\r\n}<\/pre>\n<h3>grid-template-areas<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.grid-container {\r\n  display: grid;\r\n  grid-template-areas: \"header header\" \"sidebar main\";\r\n}<\/pre>\n<h2 id=\"syntax\">Syntax<\/h2>\n<p>The\u00a0<code>grid-template<\/code>\u00a0has multiple syntax comes in different flavors, but is defined as:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">grid-template: none | [ &lt;'grid-template-rows'&gt; \/ &lt;'grid-template-columns'&gt; ] | [ &lt;line-names&gt;? &lt;string&gt; &lt;track-size&gt;? &lt;line-names&gt;? ]+ [ \/ &lt;explicit-track-list&gt; ]?<\/pre>\n<ul class=\"is-style-almanac-list\">\n<li><strong>Initial value:<\/strong>\u00a0as each of the properties of the shorthand, which is\u00a0<code>none<\/code>\u00a0for all.<\/li>\n<li><strong>Applies to:<\/strong>\u00a0grid containers<\/li>\n<li><strong>Inherited:<\/strong>\u00a0no<\/li>\n<li><strong>Computed value<\/strong>: as specified, but with relative lengths converted into absolute lengths for\u00a0<code>grid-template-columns<\/code>\u00a0and\u00a0<code>grid-template-rows<\/code>\u00a0properties.<\/li>\n<li><strong>Animation type:<\/strong>\u00a0simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list for\u00a0<code>grid-template-columns<\/code>\u00a0and\u00a0<code>grid-template-rows<\/code>\u00a0and discrete for<code>grid-template-areas<\/code>.<\/li>\n<\/ul>\n<h2 id=\"values\">Values<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\/* Keyword value *\/\r\ngrid-template: none;\r\ngrid-template: \"col-1 col-2 col-3\";\r\ngrid-template: \"header header header\" \"sidebar main main\";\r\ngrid-template:\r\n  \"header header header\"\r\n  \"sidebar main main\"\r\n  \". footer footer\";\r\n\r\n\/* grid-template-rows \/ grid-template-columns values *\/\r\ngrid-template: 100px 1fr \/ 300px 1fr;\r\ngrid-template: min-content 1fr \/ 200px 1fr 200px;\r\ngrid-template: [line1] 100px \/ [sidebar] 250px [content] 1fr;\r\ngrid-template: repeat(4, auto) \/ repeat(4, minmax(100px, 1fr));\r\n\r\n\/* grid-template-areas grid-template-rows \/ grid-template-column values *\/\r\ngrid-template:\r\n  \"header header\"\r\n  \"sidebar main\"\r\n  \"footer footer\";\r\ngrid-template:\r\n  \"header header header\" min-content\r\n  \"main main main\" 1fr;\r\ngrid-template:\r\n  [row1-top] \"header header\" 100px [row1-bottom]\r\n  \"sidebar main\" 1fr [row2-bottom] \/ [col1-start] 300px [col1-end] 1fr;\r\n\r\n\/* Global values *\/\r\ngrid-template: inherit;\r\ngrid-template: initial;\r\ngrid-template: revert;\r\ngrid-template: unset;<\/pre>\n<h4 id=\"none\"><code>none<\/code><\/h4>\n<p>This is the\u00a0<strong>default<\/strong>\u00a0value.\u00a0<code>none<\/code>\u00a0sets all three properties to their initial values which means there are no named grid areas, and no explicit grid tracks that this property defines on the grid container. It also means that\u00a0grid tracks are\u00a0<em>implicitly<\/em>\u00a0generated\u00a0and sized by the\u00a0<code>grid-auto-columns<\/code>\u00a0and\u00a0<code>grid-auto-rows<\/code>\u00a0properties.<\/p>\n<p>Note that the\u00a0<code>grid-template<\/code>\u00a0property is not the only way to create explicit grid tracks. We can also do that using the\u00a0<a href=\"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-columns\/\"><code>grid-template-columns<\/code><\/a>\u00a0and\u00a0<a href=\"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template-rows\/\"><code>grid-template-rows<\/code><\/a>\u00a0properties.<\/p>\n<h4 id=\"ltgridtemplaterowsgt-ltgridtemplatecolumnsgt\"><a id=\"aa-grid-template-rows-grid-template-columns\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template\/#aa-grid-template-rows-grid-template-columns\" aria-hidden=\"true\"><\/a><code>&lt;'grid-template-rows'&gt; \/ &lt;'grid-template-columns'&gt;<\/code><\/h4>\n<p>This form of the\u00a0<code>grid-template<\/code>\u00a0syntax defines rows and columns on a grid container in a single declaration while setting the\u00a0<code>grid-template-areas<\/code>\u00a0value to\u00a0<code>none<\/code>. We split the values with a slash\u00a0<code>\/<\/code>\u00a0in between them like so:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.grid-container {\r\n  display: grid;\r\n  grid-template: min-content 1fr \/ 200px 1fr 200px;\r\n}<\/pre>\n<p>\u2026which is equivalent to writing this without shorthand:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.grid-container {\r\n  display: grid;\r\n  grid-template-rows: min-content 1fr;\r\n  grid-template-columns: 200px 1fr 200px;\r\n  grid-template-areas: none;\r\n}<\/pre>\n<p><strong>The order matters.<\/strong>\u00a0The values before the slash set the\u00a0<code>grid-template-rows<\/code>\u00a0and the values after the slash set the\u00a0<code>grid-template-columns<\/code>\u00a0property.<\/p>\n<p>Here is another example where explicit line names are used to our grid:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\/* One row of 100px and two columns of 250px and 1fr: *\/\r\n.grid-container {\r\n  display: grid;\r\n  grid-template: [line1] 100px \/ [sidebar] 250px [content] 1fr;\r\n}<\/pre>\n<p>\u2026which, again, is equivalent to writing it this way without the shorthand:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.grid-container {\r\n  display: grid;\r\n  grid-template-rows: [line1] 100px;\r\n  grid-template-columns: [sidebar] 250px [content] 1fr;\r\n  grid-template-areas: none;\r\n}<\/pre>\n<h4 id=\"ltlinenamesgt-ltstringgt-lttracksizegt-ltlinenamesgt-ltexplicittracklistgt\"><code>[ &lt;line-names&gt;? &lt;string&gt; &lt;track-size&gt;? &lt;line-names&gt;? ]+ [ \/ &lt;explicit-track-list&gt; ]?<\/code><\/h4>\n<p>The\u00a0<code>grid-template<\/code>\u00a0property also accepts a syntax that lets us explicitly specify the grid columns, rows and areas at the same time.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">grid-template:\r\n  \"header  header\"\r\n  \"sidebar main\"   1fr\r\n  \"footer  footer\" min-content\r\n  \/ 200px   1fr;<\/pre>\n<p><code>header<\/code>,\u00a0<code>sidebar<\/code>,\u00a0<code>main<\/code>, and\u00a0<code>footer<\/code>\u00a0are the names of the grid areas for a grid container. The number of names inside each string specifies the number of columns (which is two on each row in the example above).<\/p>\n<p>The values after the columns \u2014 like\u00a0<code>1fr<\/code>\u00a0and\u00a0<code>min-content<\/code>\u00a0above \u2014 represent the\u00a0<code>&lt;track-size&gt;<\/code>\u00a0for each row. If we don\u2019t specify a track size on a row, as in the first row of the example above, the size of that row is set to\u00a0<code>auto<\/code>.<\/p>\n<p>The last line of the example contains a forward slash (<code>\/<\/code>) followed by two length values. Those set the column sizes. And since we have two columns on each row, we need to provide two sizes. We\u2019ve set the first column to\u00a0<code>200px<\/code>\u00a0wide and the second row to\u00a0<code>1fr<\/code>.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-366093 jetpack-lazy-image jetpack-lazy-image--handled\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1653064855609_syntax0.jpg?resize=1222%2C538&amp;ssl=1\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1653064855609_syntax0.jpg?w=1222&amp;ssl=1 1222w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1653064855609_syntax0.jpg?resize=300%2C132&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1653064855609_syntax0.jpg?resize=1024%2C451&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1653064855609_syntax0.jpg?resize=768%2C338&amp;ssl=1 768w\" alt=\"Diagram highlighting parts of a grid-template declaration.\" width=\"1222\" height=\"538\" data-recalc-dims=\"1\" data-lazy-loaded=\"1\" \/><figcaption>The length value on a row sets that row\u2019s height. The values on the last line after the slash set the width of the columns.<\/figcaption><\/figure>\n<h2 id=\"basic-usage\"><a id=\"aa-basic-usage\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template\/#aa-basic-usage\" aria-hidden=\"true\"><\/a>Basic usage<\/h2>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.grid {\r\n  display: grid;\r\n  gap: 1rem;\r\n  grid-template: \"header  header\"\r\n                  \"sidebar main\"   1fr\r\n                  \"footer  footer\" min-content\r\n                \/ 200px   1fr;\r\n}<\/pre>\n<p>Above code is equivalent to the following:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.grid {\r\n  display: grid;\r\n  gap: 1rem;\r\n  grid-template-columns: 200px 1fr;\r\n  grid-template-rows: auto 1fr min-content;\r\n  grid-template-areas: \"header header\"\r\n                        \"sidebar main\"\r\n                        \"footer footer\";\r\n}<\/pre>\n<p>And it has the following result:<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-366094 jetpack-lazy-image jetpack-lazy-image--handled\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1649930775618_1..png?resize=768%2C700&amp;ssl=1\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1649930775618_1..png?w=768&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1649930775618_1..png?resize=300%2C273&amp;ssl=1 300w\" alt=\"A webpage layout created with grid-template property\" width=\"768\" height=\"700\" data-recalc-dims=\"1\" data-lazy-loaded=\"1\" \/><\/figure>\n<h2 id=\"its-a-shorthand-for-explicit-grid-properties-not-implicit-ones\"><a id=\"aa-its-a-shorthand-for-explicit-grid-properties-not-implicit-ones\" class=\"aal_anchor\" href=\"https:\/\/css-tricks.com\/almanac\/properties\/g\/grid-template\/#aa-its-a-shorthand-for-explicit-grid-properties-not-implicit-ones\" aria-hidden=\"true\"><\/a>It\u2019s a shorthand for explicit grid properties, not implicit ones<\/h2>\n<p>The\u00a0<code>grid-template<\/code>\u00a0property rests only the explicit grid properties to their initial values and it doesn\u2019t have any effects on the\u00a0<em>implicit<\/em>\u00a0grid properties such as\u00a0<code>grid-auto-columns<\/code>,\u00a0<code>grid-auto-rows<\/code>, and\u00a0<code>grid-auto-flow<\/code>, for that, there is another shorthand called\u00a0<code>grid<\/code>\u00a0which has the same syntax, but also resets the implicit grid properties.<\/p>\n<p>Here is what happens when you set\u00a0<code>grid-template<\/code>\u00a0property to\u00a0<code>none<\/code>:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">grid-template: none;\r\n\r\n\/* is equivalent to: *\/\r\ngrid-template-rows: none;\r\ngrid-template-columns: none;\r\ngrid-template-areas: none;<\/pre>\n<h2 id=\"there-are-lots-of-ways-to-define-grid-lines\">There are lots of ways to define grid lines<\/h2>\n<p>Naming grid lines\u00a0is a popular way to to make writing them easier, but there are multiple ways to go about it. One way is to give each line multiple names as a way to think of things having starting and ending lines:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.grid {\r\n  grid-template-columns: [col1-start] 1fr [col1-end col2-start] 1fr [col2-end];\r\n}<\/pre>\n<p>A cool thing about CSS Grid is that it auto-numbers things for us. That means we can ditch the numbers when placing grid items on a grid container\u2019s lines. So, instead of writing\u00a0<code>col1<\/code>\u00a0and\u00a0<code>col2<\/code>\u00a0like we did above, we can simply write\u00a0<code>col<\/code>\u00a0followed by the line number we want to align to:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.grid-item {\r\n  grid-column-start: col 2;\r\n}<\/pre>\n<p>It\u2019s even cooler when we use that technique on grids with\u00a0<em>lots<\/em>\u00a0of columns:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.grid {\r\n  grid-template-columns: repeat(4, [col] 100px);\r\n}<\/pre>\n<p>Now we have four columns that are\u00a0<code>100px<\/code>\u00a0wide and have auto-numbered grid lines named\u00a0<code>col<\/code>\u00a0we can use to place items on the grid:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.grid-item {\r\n  grid-column: col 2 \/ col 4;\r\n}<\/pre>\n<p>Of course, we have the\u00a0<code>span<\/code>\u00a0keyword which means we can simplify things a bit more:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.grid-item {\r\n  grid-column: col 2 \/ span 2;\r\n}<\/pre>\n<p>Here\u2019s an example where we\u2019re have two grid lines.\u00a0<code>line-1<\/code>\u00a0is the grid line between the first and the second row and\u00a0<code>line-2<\/code>\u00a0is the line between the second and the last row.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">grid-template:\r\n  \"header  header\"\r\n  [line-1] \"sidebar main\" 1fr [line-2]\r\n  \"footer  footer\" min-content\r\n\/ 200px   1fr;<\/pre>\n<p>We can also set the size of grid lines between columns:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">grid-template:\r\n  [row1-top]    \"header  header\" 100px [row1-bottom]\r\n  [content-top] \"sidebar main\"   1fr [row2-bottom]\r\n\/ [col1-start]  150px    1fr     [col2-end content-end];<\/pre>\n<ul>\n<li><strong>Row 1:<\/strong>\u00a0<code>100px<\/code>\u00a0tall with grid lines named\u00a0<code>row1-top<\/code>\u00a0and\u00a0<code>row1-bottom<\/code><\/li>\n<li><strong>Row 2:<\/strong>\u00a0Takes up the remaining space, thanks to\u00a0<code>1fr<\/code>, with grid lines named\u00a0<code>content-top<\/code>\u00a0and\u00a0<code>row2-bottom<\/code>.<\/li>\n<li><strong>Column 1:<\/strong>\u00a0<code>150px<\/code>\u00a0wide with a\u00a0<code>col1-start<\/code>\u00a0line name<\/li>\n<li><strong>Column 2:<\/strong>\u00a0Takes up the remaining space with\u00a0<code>1fr<\/code>\u00a0and a line given two names,\u00a0<code>col2-end<\/code>\u00a0ad\u00a0<code>content-end<\/code><\/li>\n<\/ul>\n<p>Sometimes an illustration can be helpful to see what\u2019s going on.<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-366095 jetpack-lazy-image jetpack-lazy-image--handled\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1650025440318_linename-example2.png?resize=768%2C700&amp;ssl=1\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1650025440318_linename-example2.png?w=768&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1650025440318_linename-example2.png?resize=300%2C273&amp;ssl=1 300w\" alt=\"Demonstrating grid lines and areas in a grid layout created with grid-template property.\" width=\"768\" height=\"700\" data-recalc-dims=\"1\" data-lazy-loaded=\"1\" \/><\/figure>\n<h2 id=\"be-cautious-when-using-the-repeat-function\">Be cautious when using the\u00a0<code>repeat()<\/code>\u00a0function<\/h2>\n<p><a href=\"https:\/\/drafts.csswg.org\/css-grid\/#grid-template-ascii\" rel=\"noopener\">It wasn\u2019t designed to work<\/a>\u00a0with the\u00a0<code>grid-template<\/code>\u00a0property! The idea is that\u00a0<code>repeat()<\/code>\u00a0would get in the way of being able to write things cleanly where everything can be lined up with whitespace \u2014 sort of like a simple visualization of the grid.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">.grid {\r\n  display: grid;\r\n  grid-template: \"header  header\"\r\n                  \"sidebar main\"   1fr\r\n                  \"footer  footer\" min-content\r\n                \/ 200px   1fr;\r\n}<\/pre>\n<h2 id=\"demo\">Demo<\/h2>\n<p>Let\u2019s create a responsive layout for a webpage using\u00a0<code>grid-template<\/code>\u00a0property. First, some default CSS Grid for a stack of items in a single column:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">\/* Define the grid *\/\r\n.grid {\r\n  min-height: 100vh;\r\n  display: grid;\r\n  grid-template-areas:\r\n    \"header\"\r\n    \"main\"\r\n    \"left-sidebar\"\r\n    \"right-sidebar\"\r\n    \"footer\";     \r\n  gap: 1rem;\r\n}\r\n\r\n\/* Place the items on the grid *\/\r\nheader {\r\n  grid-area: header;\r\n}\r\n\r\n.left-sidebar {\r\n  grid-area: left-sidebar;\r\n}\r\n\r\n.right-sidebar {\r\n  grid-area: right-sidebar;\r\n}\r\n\r\nmain {\r\n  grid-area: main;\r\n}\r\n\r\nfooter {\r\n  grid-area: footer;\r\n}<\/pre>\n<p>Cool cool. But what we really want is a 3\u2a093 grid on larger screens. Something like this:<\/p>\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-366097 jetpack-lazy-image jetpack-lazy-image--handled\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1653065903898_holygrail.png?resize=1342%2C872&amp;ssl=1\" sizes=\"auto, (min-width: 735px) 864px, 96vw\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1653065903898_holygrail.png?w=1342&amp;ssl=1 1342w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1653065903898_holygrail.png?resize=300%2C195&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1653065903898_holygrail.png?resize=1024%2C665&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/05\/s_944B5660AF17B1A49CC080D0F5158894BE09B182D9324930EE01976BA578E8D8_1653065903898_holygrail.png?resize=768%2C499&amp;ssl=1 768w\" alt=\"Demonstrating a layout created with grid-template shorthand property.\" width=\"1342\" height=\"872\" data-recalc-dims=\"1\" data-lazy-loaded=\"1\" \/><\/figure>\n<p>So, let\u2019s create that layout inside of a media query using\u00a0<code>grid-template<\/code>:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@media (min-width: 600px) {\r\n  .grid {\r\n    grid-template:\r\n      \"header             header             header\"         min-content\r\n      \"left-sidebar       main               right-sidebar\"  1fr\r\n      \"footer             footer             footer\"         min-content\r\n    \/ minmax(auto, 250px) minmax(250px, 1fr) minmax(auto, 250px);\r\n  }\r\n}<\/pre>\n<p><iframe style=\"width: 100%;\" title=\"Untitled\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/poLZKyx?default-tab=result&amp;theme-id=dark\" height=\"600\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/poLZKyx\"><br \/>\nUntitled<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<p>&nbsp;<\/p>\n<h2 id=\"browser-support\">Browser support<\/h2>\n<p><iframe loading=\"lazy\" src=\"https:\/\/caniuse.bitsofco.de\/embed\/index.html?feat=mdn-css__properties__grid-template&amp;periods=future_1,current,past_1,past_2&amp;accessible-colours=false&amp;image-base=none\" width=\"100%\" height=\"502px\" frameborder=\"0\"><\/iframe><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The\u00a0grid-template\u00a0CSS property is a shorthand that allows you to define grid columns, <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/css-tutorial-grid-template\/\" title=\"CSS Tutorial &#8211; grid-template\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3948,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[11],"tags":[200,199,197,201],"newstopic":[],"class_list":{"0":"post-2810","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html-css","8":"tag-css-code","9":"tag-css-grid-layout","10":"tag-css-tutorial","11":"tag-grid-template"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2810","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=2810"}],"version-history":[{"count":6,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2810\/revisions"}],"predecessor-version":[{"id":2818,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/2810\/revisions\/2818"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3948"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=2810"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=2810"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=2810"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=2810"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}