Why CSS Subgrid is a big deal and why we need it?
With the advancements in website designs and the need to have a grid-based structure, CSS introduced Flexbox and CSS Grids into its library. CSS Grids and CSS Flexbox both have been immensely popular website design techniques, and since I have started to develop the websites, I have almost always made use of both of them in my work.
CSS Grids and CSS Flexbox are used for laying out a grid-like structure in the UI of the website. With CSS Grids, it becomes quite easy to position your elements and eventually elements under elements, if that is what your design demands. There is a minute difference between the flexbox and grids, though. CSS Grids is a two-dimensional layout spanning over both the axes (or one depends on the developer). Still, CSS Flexbox lacks this ability and is just flexible enough to move in any one direction in the layout. In short, both have their advantages and disadvantages.
This is how a typical CSS Grid looks like:
To understand what CSS Grids are and how to implement Grids and Flexbox, you can read our Guide to Better Web Design with CSS Grids and Flexbox.
As discussed above, the development of a little complex web design led to the introduction of CSS Grids. But in the coming years after its launch, CSS Grids shared the same fate as well. In the last ten years and so, tremendous growth and changes have been seen in website designs, redesigns, and development. With the increasing complexities around the user interface layout, a new problem pops up: CSS Grids embedded into other CSS Grids, also called nested grids.
Although the demonstration of this concept is shown throughout this post, the basic idea is that applying Grids inside another Grid has become a popular concept and was not possible without turnarounds. Due to the popularity of nested grids, CSS has enrolled a new feature called subgrids, which helps developers develop nested grids that are predictable and easier to manage. The subgrid is applied with the keyword “subgrid” in the cascading style sheet.
Why Do We Need Subgrids?
A good question to ponder is that if we could do some makeshifts and create our subgrids through “grid” property, why do we need to have a separate property for subgrids?
Well, with grid property, the problem is that any changes we do or any element we construct inside the grid container do not reference the parent container for itself. Constructing a grid within a grid creates issues as the element starts acting independently, and therefore we have to manage two separate grids now unnecessarily.
Another issue with the nested grid used conventionally before Level 2 Grid was that it was not as flexible to the responsive web design as it should be. Since the market is flooded with different screens on mobile devices today, responsiveness is crucial. Creating a nested grid would sometimes overflow the inside element outside the boundaries of the grid container element. Hence, a new property was needed to cater to all these web developers’ needs, giving birth to the subgrids.
Thanks for the detailed answer.
How about its acceptance on browsers. Is Subgrid accepted across all browsers?
Good that you have put this questions.
Subgrid is used very poorly in web development to this date. Browsers are still in progress in adding subgrids to their long list of features except for Mozilla Firefox, which is no surprise as they are usually the ones to roll out a new property before anyone else.
The below stats show that the Global Usage for subgrid is just over 3%:
It is weird, though, that I could not even find this property in the Google Chrome Experimental Flags section. They usually put these properties there for the developers to experiment with. Therefore, it is highly doubtful that the subgrid will be seen in the next two or three updates (I am using Chrome 86 stable).
Related Read: Detailed Guide To CSS Supports In Browsers