Element positioning is one of the critical challenges that web developers and web designers face all the time as it plays crucial role in enhancing user. This challenge you can solve with Grids on CSS, the first two-dimensional layout system. For one dimensional layout system, CSS Flexbox is the ideal solution. Both CSS Grids and CSS Flexbox are good at positioning the elements in a predefined grid-based layout.
But when it comes to aligning nested elements with outer grid, you must opt for Subgrid CSS. It has a built-in approach to align all the items to a single outer grid nesting on multiple levels.
What is Subgrid in CSS?
Subgrid was added to CSS grid in level 2 of the standard, allowing nested grids to take part in the sizing of their parent grids. It provides a grid-based layout solution with columns and rows without the requirement for floats or positioning.
In this blog, I will talk in detail about the subgrid with some quick reviews of few use cases that will help in a better understanding of it.
Difference Between the Flexbox and Subgrid
Flexbox was built for layout in one dimension as mentioned above also. You can use it for either a row or a column, whereas CSS grid layout is for two dimensional layouts. The subgrid is an extension of the CSS grid pattern that arms the developers with more flexibility in terms grid handling and layouts with continuous rows and columns.
Layout with Flexbox-One-Dimensional Layout
We can take a simple example to understand the difference between one and two-dimensional layouts.
Let’s use flexbox to create a group of boxes. Five child items in the container have their flex properties set to values that allow them to resize themselves from a flex-basis of 150 pixels.
Codepen link: https://codepen.io/palak-tal/pen/ZEjJMNq
Consider each new row (or column when working by column) in the flex container as a separate flex line while wrapping flex items. Space is divided along the flex line for wrapping the items. Use the flex-wrap property to wrap the boxes.
Then, a common question is how to align the elements? Now, this is where a two-dimensional layout approach is relevant. If you wish to manage alignment by row and column, grid is your option.
On the other hand, subgrid can be used for rows, columns, and for both.
Subgrid- A Two-Dimensional Layout
Use the value subgrid on a grid item of the parent as the value of grid-template-columns. And, grid-template-rows to create a subgrid in both dimensions, columns and rows. The parent grid’s size and number of grid tracks are now shared by the nested grid.
For a better understanding, I have created the code pen. https://codepen.io/palak-tal/pen/mdjMGoE
Need of the CSS Subgrid
The issue with CSS grids is that any changes implemented, or any elements created inside the grid container don’t provide a reference to the parent container. As a result, creating a grid within a grid pose challenges because the components behave independently. Scaled-up grid creation requires extensive upkeep to handle two separate grids in the said scenario.
Responsiveness was a significant problem with nested grids as well. The websites were not quite as flexible and fast with nested grids as they should be. However, building a responsive website is a necessary feature in many mobile devices. While creating CSS subgrids, this issue must be handled.
What Makes CSS Subgrid so Important?
The use of CSS grid, the first real two-dimensional layout system, initially appeared to address one of the fundamental CSS challenges i.e. element positioning. However, both methods Flexbox and subgrid helped in positioning the elements in a defined grid-based layout. CSS Flexbox, on the other hand, was a one-dimensional layout approach.
Even so, CSS subgrids provided a solution to the use case of aligning nested components with the outer grid. A simple method for aligning all elements that are nested on different levels to a single outer grid was introduced by subgrid.
You may be also interested in: When and How to Use CSS Animation.
Use Cases of Subgrid
It can be used for cards that has a three-layered vertical layout. For example, if one section’s content is larger than the others, the heights of the other cards in the row will be off. So, with its properties, you can make the content’s height equal. If you compare the subgrid with the bootstrap card deck property, it also achieves this.
Codepen: https://codepen.io/palak-tal/pen/ZEjJXBZ
Let’s check how the browser compatibility of subgrid will look like.
Browser Compatibility
It is crucial in delivering a consistent user experience as they operate across various browsers, platforms, and devices.
Fallbacks
It is an alternative plan that may be used in an emergency.
- Feature Queries in CSS
You can verify if the browser supports grid by using @supports. If so, you can use grid to improve your layout.
@supports (display: grid) {
//… code here
} - Using CSS Feature Queries Programmatically
On the JavaScript side, the CSS features can be called programmatically. The CSS object model interface CSSSupportsRule provides access to the @supports.
Interface definition: function supports(property: string, value: string): boolean; - Overriding Properties
You don’t always require complex things like CSS feature queries, using CSS attributes will help you with it. The most recent valid property definition in a CSS class should always be used.
#container {
display: flex;
display: grid;
// if grid is not available this will be invalid, and it will apply the previous property value: flex
}
Conclusion
While subgrid CSS is still in development, you may anticipate that pre-release versions of browsers will soon implement it. Children of grid items will be able to inherit the grid layout from their grandparents in either two (rows and columns) or one (rows or columns) dimensions because of this much requested new feature. I hope this blog helped you understand CSS subgrid in detail, please share your feedback in the comments section.
Reference links
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid#named_grid_lines
