{"id":27838,"date":"2023-11-18T00:25:09","date_gmt":"2023-11-17T18:55:09","guid":{"rendered":"https:\/\/deepubalan.com\/blog\/?p=27838"},"modified":"2023-11-18T21:42:52","modified_gmt":"2023-11-18T16:12:52","slug":"css-subgrid-decoded-the-latest-in-css-technology","status":"publish","type":"post","link":"https:\/\/deepubalan.com\/blog\/2023\/11\/18\/css-subgrid-decoded-the-latest-in-css-technology\/","title":{"rendered":"CSS Subgrid decoded: The latest in CSS technology"},"content":{"rendered":"\n<p>CSS Grid layout revolutionized web development by allowing content to be organized into a grid with rows and columns. In one of my previous articles about <a href=\"https:\/\/deepubalan.com\/blog\/2019\/02\/02\/css-grid-the-most-exciting-thing-to-happen-since-css3\/\">CSS Grid<\/a>, we explored the foundational concepts and capabilities it brought to the table. However, challenges arose when nesting grids inside grids, paving the way for CSS Subgrid\u2014a powerful extension to the CSS Grid.<\/p>\n\n\n\n<p>In this tutorial, we&#8217;ll delve into the intricacies of subgrid, exploring its syntax, properties, and practical applications. But first, if you haven&#8217;t explored the wonders of CSS Grid, I recommend checking out my earlier article on it <a href=\"https:\/\/deepubalan.com\/blog\/2019\/02\/02\/css-grid-the-most-exciting-thing-to-happen-since-css3\/\">here<\/a>, as it lays the groundwork for understanding the evolution to CSS Subgrid.<\/p>\n\n\n\n<p>Let&#8217;s embark on this journey to enhance your web layout skills with the seamless power of CSS Subgrid.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">What is subgrid and how is it different from a regular grid?<\/h2>\n\n\n\n<p>Subgrid allows a grid item to become a grid container, inheriting the parent grid&#8217;s tracks. This means you can now nest grids more flexibly. Without subgrid, nested grids are independent and cannot align with the parent grid lines.<\/p>\n\n\n\n<p>For example, consider a 12-column grid. With subgrid, you can easily divide a section into three columns that span four tracks each. The subgrid columns will seamlessly align with the parent columns.<\/p>\n\n\n\n<p>Subgrid requires less CSS code, making your layouts more consistent. Aligning nested grids becomes effortless!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Basic syntax and properties<\/h2>\n\n\n\n<p>Let&#8217;s dive into the basic syntax and properties of subgrid: To create a subgrid, add &#8220;display: subgrid&#8221; to the grid item:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.grid-item {\n  display: subgrid;\n}<\/code><\/pre>\n\n\n\n<p>This causes the grid item to inherit the parent grid&#8217;s column and row configuration. You can then style subgrid items as usual with grid-column, grid-row, etc.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Simple subgrid layout example<\/h2>\n\n\n\n<p>Here is a simple subgrid layout:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.parent-grid {\n  display: grid;\n  grid-template-columns: repeat(12, 1fr);\n}\n\n.subgrid-item {\n  grid-column: span 6;\n  display: subgrid; \n  grid-template-columns: subgrid; \/* inherit parent columns *\/\n}\n\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Spanning subgrid tracks<\/h2>\n\n\n\n<p>Use the span keyword to span across subgrid tracks. This makes aligning items easy:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>.subgrid-item div {\n   grid-column: span 2; \n}<\/code><\/pre>\n\n\n\n<p>This tracks the 12 column parent grid, not the subgrid. Subgrid handles the inherited tracks for you!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Use cases and examples<\/h2>\n\n\n\n<p>Let&#8217;s explore some practical use cases and examples of subgrid in action:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Example 1: Simplifying complex layouts<\/h4>\n\n\n\n<h6 class=\"wp-block-heading\">html<\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"container\">\n\u00a0 &lt;div class=\"item\">1&lt;\/div>\n\u00a0 &lt;div class=\"item\">2&lt;\/div>\n\u00a0 &lt;div class=\"item\">3&lt;\/div>\n\u00a0 &lt;div class=\"item\">4&lt;\/div>\n \u00a0&lt;div class=\"item\">5&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<h6 class=\"wp-block-heading\">CSS<\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>container {\n\u00a0 display: grid;\n\u00a0 grid-template-columns: 1fr 1fr 1fr;\n\u00a0 gap: 10px;\n}\n.item {\n\u00a0 display: grid;\n\u00a0 grid-template-columns: subgrid;\n\u00a0 border: 1px solid #333;\n\u00a0 padding: 10px;\n}<\/code><\/pre>\n\n\n\n<h4 class=\"wp-block-heading\">Example 2: Aligning nested grids<\/h4>\n\n\n\n<h6 class=\"wp-block-heading\">html<\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"parent-grid\">\n\u00a0 &lt;div class=\"item\">A&lt;\/div>\n\u00a0 &lt;div class=\"item\">B&lt;\/div>\n\u00a0 &lt;div class=\"nested-grid\">\n\u00a0   &lt;div class=\"nested-item\">1&lt;\/div>\n\u00a0   &lt;div class=\"nested-item\">2&lt;\/div>\n\u00a0 &lt;\/div>\n\u00a0 &lt;div class=\"item\">C&lt;\/div>\n&lt;\/div><\/code><\/pre>\n\n\n\n<h6 class=\"wp-block-heading\">CSS<\/h6>\n\n\n\n<pre class=\"wp-block-code\"><code>.parent-grid {\n\u00a0 display: grid;\n\u00a0 grid-template-columns: 1fr 1fr 1fr;\n}\n.item {\n\u00a0 border: 1px solid #333;\n\u00a0 padding: 10px;\n}\n.nested-grid {\n\u00a0 display: grid;\n\u00a0 grid-template-columns: subgrid;\n\u00a0 grid-column: span 2; \/* Spans two columns in the parent grid *\/\n}\n.nested-item {\n\u00a0 border: 1px solid #666;\n\u00a0 padding: 5px;\n}\n\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Hands-On with Subgrid<\/h2>\n\n\n\n<p>To help illustrate subgrid in action, here&#8217;s an interactive demo you can tinker with. This jsFiddle lets you modify the CSS and HTML to see how subgrid behaves in a real layout. Play around with the grid and subgrid settings to get a hands-on feel for how they work together.<\/p>\n\n\n\n<script async src=\"\/\/jsfiddle.net\/bdeepu\/fsurh8qj\/3\/embed\/result,html,css\/\"><\/script>\n\n\n\n<h2 class=\"wp-block-heading\">Browser support for subgrid<\/h2>\n\n\n\n<p>Subgrid enjoys decent browser support, working seamlessly in the latest versions of Firefox, Chrome, and Edge. Safari offers partial support. The only major holdout is IE11 and older browsers.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"359\" src=\"https:\/\/deepubalan.com\/blog\/wp-content\/uploads\/2023\/11\/css-subgrid-browser-support-1024x359.png\" alt=\"\" class=\"wp-image-27839\" srcset=\"https:\/\/deepubalan.com\/blog\/wp-content\/uploads\/2023\/11\/css-subgrid-browser-support-1024x359.png 1024w, https:\/\/deepubalan.com\/blog\/wp-content\/uploads\/2023\/11\/css-subgrid-browser-support-300x105.png 300w, https:\/\/deepubalan.com\/blog\/wp-content\/uploads\/2023\/11\/css-subgrid-browser-support-768x269.png 768w, https:\/\/deepubalan.com\/blog\/wp-content\/uploads\/2023\/11\/css-subgrid-browser-support.png 1522w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>For optimal browser support, consider combining subgrid with fallback code using regular CSS Grid styles.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>CSS Subgrid opens up a new era for web page layouts, allowing for more flexible and consistent grid structures. By understanding its syntax, properties, and browser support, you can enhance your design capabilities and simplify complex layouts. Experiment with subgrid in your projects to experience the power of nested grids aligned seamlessly with their parent counterparts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>CSS Grid layout has revolutionized web design, enabling content organization into a grid with rows and columns. However, it faced limitations when nesting grids inside grids. This is where subgrid comes to the rescue, expanding the capabilities of CSS Grid layouts.<\/p>\n","protected":false},"author":1,"featured_media":27845,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[5],"tags":[402,451,453,452],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/posts\/27838"}],"collection":[{"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/comments?post=27838"}],"version-history":[{"count":7,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/posts\/27838\/revisions"}],"predecessor-version":[{"id":27851,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/posts\/27838\/revisions\/27851"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/media\/27845"}],"wp:attachment":[{"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/media?parent=27838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/categories?post=27838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/deepubalan.com\/blog\/wp-json\/wp\/v2\/tags?post=27838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}