CSS Subgrid: What is it and Why do you need it

CSS Grid Layout, also known as “CSS Grid,” is a two-dimensional grid-based layout system that has completely changed the way user interfaces are designed, as compared to any web layout system of the past. It offers a grid-based layout system, which has rows and columns that do not need floats and positioning. This is why CSS Subgrid makes designing web pages easier.

CSS has always been used to design web pages. However, it always came with its own set of limitations. CSS used tables, floats, positioning, and even inline blocks however, it missed a lot of important functionalities such as vertical centering. CSS Grid has therefore been specifically created to solve these layout problems that needed a lot of hacks around all this long.

Now that you know about CSS and CSS Grids, let’s deep dive into the world of CSS Grids and Subgrids.

What are CSS Grids and CSS Subgrids?

Before discussing CSS Subgrids, let’s first understand CSS Grids and Flexbox. In order to have a grid-based structure, CSS introduced CSS Grids and Flexbox to cope with the advancements in website designs. CSS Grids and CSS Flexbox are used for laying out a grid-like structure in the UI of the website. However, there is a minute difference between both of these. While CSS Grids span over both the axes and are two-dimensional, CSS Flexbox can just move in one direction in the layout. 

As a result, CSS Grids and Flexbox made it quite easy to position the elements and even elements within the elements. However, in recent years, after website design went through tremendous changes, even CSS Grids and Flexbox failed to cope due to the underlying complexities such as nested grids, i.e., CSS Grids embedded into other CSS Grids.

Hence, to deal with Nested Grids, CSS introduced the concept of CSS Subgrids, which helped in developing nested grids that were easier to design and manage.

Why do you need CSS Subgrids?

Now that you know what CSS Subgrids are, it is essential to understand why they are needed. Also, a noteworthy point to consider is that is Nested Grids not achievable through CSS Grids by making some makeshifts?

With CSS Grids, the problem is that any changes done or any element constructed inside the grid container doesn’t give a reference to the parent container. As a result, constructing a grid within a grid create issues as the elements now start acting independently. Hence one needs to manage two individual grids in that case, which means a lot of maintenance when the grids are created at scale.

Another major issue with Nested Grids was responsiveness. With Nested Grids, the websites were not as flexible and fast enough as they were expected to be. However, in today’s era of different mobile devices, creating a responsive website is a major requirement. This problem was also solved while designing CSS Subgrids.

Why are CSS Subgrids important?

It is evident that element positioning was one of the major CSS challenges that initially seemed to be solved by using CSS Grids, which was the first true two-dimensional layout system. On the contrary, CSS Flexbox was a one-dimensional layout system, but overall both helped position the elements in a predefined grid-based layout. 

Still, one unsolved use case of nested elements was to be aligned with the outer grid, which was finally solved by CSS Subgrids. Subgrid introduced an intuitive approach to aligning all items that are nested on multiple levels to a single outer grid.

Let us understand this better with an example: see the following card image taken from Mozilla Hacks:

Can you guess the underlying issue in this layout design that is built with nested grids (using multiple grid properties)?

You can notice the third grid, which has a caption longer than the rest. As a result, the row for that particular heading is adjusted independently, and the space overall has become unequal due to the row on the above cards.

Now let us see the below image, which has been designed using the CSS Subgrid property instead.

Here, you can see that the space has been adjusted, and it also looks nice and clean. Also, the space will be automatically adjusted, taking its parent’s reference without needing extra JS code. This is how CSS Subgrids make complicated website designing flawless.

How to create a simple CSS Subgrid

Step 1 – Create the main grid container, its grid item, and subgrid items, as seen below.

<div class="main-grid-container">
<div class="grid-item">
<div class="subgrid-item"></div>
<div class="subgrid-item"></div>
</div>
</div>
.main-grid-container {
display: grid;
}

Step 2 – Make the grid item a grid container using the code below.

.grid-item {
display: grid;
}

Step 3 – Create a subgrid inside the grid item, turning it into a grid container.

.grid-item {
display: grid;
grid-template-columns: subgrid;
grid-template-rows: subgrid;
}

So this way, without explicitly defining column and row tracks, you can establish subgrids, and grid definition was inherited from the .main-grid-container. This way, instead of explicitly defining column and row tracks, a subgrid was established, and grid definition was inherited from the .main-grid-container.

Browser Compatibility with CSS Subgrids

In today’s digital world, with easy access to different browsers, desktop and mobile devices, users can access web applications on the go anywhere, anytime. Browser compatibility is essential to deliver a consistent user experience as they operate across different browsers, platforms, and devices.

Imagine you have tested your application using Chrome; however, the end user is using Firefox and encounters some major glitches while using the application in Firefox. Issues like these can be easily discovered and rectified if we adopt Browser Compatibility tests in our Test Cycle. With CSS Subgrids, it even becomes more crucial to support cross-browser compatibility tests owing to the reason it solves the problem of nested grids.

Try Cross Browser Testing on Real Devices

Whether CSS Subgrids is supported by the browser versions or not is essential to understand so that these features can be leveraged to offer a seamless experience. The browser versions’ support for various features is analyzed using Caniuse.com as shown below:

It can be clearly observed from the image below that Safari, Firefox, Firefox for Android, and Safari on iOS offer the support for CSS Subgrid; however, still most of the browser versions of Chrome, Edge, Opera, and IE don’t provide the support for CSS Subgrid. Hence it is important to tweak the CSS code in such a way that the user experience remains consistent across different browsers.

This clearly emphasizes how the Browser Compatibility tests are much pivotal in the entire test cycle for any websites based on CSS Subgrid, as this will ensure a seamless user experience across any supported browsers.

But, maintaining a lot of devices and browsers is not a cakewalk and can cost a lot of time and effort. However, with BrowserStack you can get rid of the task of maintaining those devices and can actually focus on the testing cycle.

BrowserStack’s Real Device Cloud allows access to a fleet of 3000+ desktop browsers and real mobile devices, providing wide coverage for Cross Browser & Platform Testing. One can also leverage the power of automation testing to check cross-browser compatibility over the BrowserStack’s real device cloud, saving both time and cost incurred. This allows developers and QAs to build applications to retain and delight users through its seamless user experience.

Try BrowserStack for Free