DEV Community: Elise Gibbons

Modern CSS Layouts with Subgrid

Elise Gibbons — Wed, 02 Jul 2025 17:06:27 +0000

CSS Subgrid has modernised the way designers prepare mockups. Before they came into action, designers struggled to align different elements in their layouts perfectly. For example, on a business website, one testimonial might be a sentence long, another could be a full paragraph. This inconsistency resists complex, responsive designs, often breaking the visual alignment of components in a grid.

CSS Subgrid easily handles these inconsistencies and helps child elements align with their parent elements.

CSS Subgrid acts like a nested grid. It sets the track sizing of subgrid onto the parent grid, thus allowing nested elements to inherit grid tracks and grow to fit the content and maintain consistent alignment.

Limitations of CSS Grid

CSS Grid offers a two-dimensional control over elements in a layout design. However, there is one major limitation: grid tracks apply only to direct children. Which means that any child elements that exist beyond the first level will operate independently without a direct link to their siblings or the parent grid. This is problematic because not being part of the main grid can lead to a disjointed layout, especially in responsive or content-rich designs.

How Does Subgrid Work?

When a designer builds a classic layout, such as a grid with columns for a sidebar, main content, and metadata, subgrids help the inner sections, like author bios or comment threads, to match their alignment without requiring duplicate definitions or CSS codes. The subgrid value enables child elements to inherit row and column tracks with the grid lines of their parent. With subgrid enabled, nested grid containers do not define their own independent layout context, but rather, they reuse the parent’s. This results in greater cohesion and cleaner code.

Here’s a basic example:

.article {
  display: grid;
  grid-template-columns: 2fr 5fr 1fr;
}

.meta {
  display: grid;
  grid-column: 2;
  grid-template-columns: subgrid;
}

In this example, .subgrid inherits the column structure of .grid, enabling its children to align seamlessly with the parent layout. The .meta content slots directly into the parent column structure.

The result is a clean markup, fewer lines, and more scalable CSS for complex layouts.

Subgrid is especially useful in editorial layouts, card grids, or reusable UI components where vertical and horizontal alignment needs to remain consistent across varying content types.

Building a Flexible Layout with Subgrid

Responsiveness is one of the most important factors of a good user experience. As illustrated in the following UX vs. UI infographic, easy navigation and usability define UX, and Subgrid enables developers to achieve this.

It builds scalable, maintainable website architectures without compromising on responsiveness, and it is pretty much evident how adaptable layouts contribute to smoother interactions across different devices and screen sizes.

Let’s say you're designing a three-card product section. Each card contains a heading, description, and a call-to-action button. Some descriptions are short, and some are longer than others.

Every designer has the know-how of basic HTML and CSS code, so we won't dive into that, our focus is on how to add a Subgrid.

Using Subgrid allows all buttons and headings in the product sections to align in their respective rows - even if the content has variable lengths.

Project Objectives

A grid container has three cards.
Each card is a subgrid that inherits row and column tracks.
The layout must remain visually consistent even if there are differences in content.

Here’s the core idea:

Use display: grid and grid-template-rows: subgrid inside each card
Ensure the parent grid defines consistent row heights
This method ensures that every paragraph and button sits in the same row position across cards, creating a cleaner and more professional layout.

CSS Subgrid DevTools

In any modern browser, Subgrid support is built into its DevTools. To inspect it:

Open your layout in the browser.
Right-click and choose Inspect (or use Cmd + Option + I / Ctrl + Shift + I).
Navigate to the Elements panel.
Toggle the subgrid badge next to the element.

This overlay lets you see inherited tracks, named lines, and how the layout adapts to different content lengths.

Browser Support

Subgrid is fully supported in Chrome, Edge and Firefox. Firefox has had these specific-tools for years; Chrome and Edge introduced it in version 115 and above

Subgrid also has experimental support in Safari and Chromium browsers under feature flags. This innovative feature has eliminated the need to hand-tailor layouts to avoid ragged lines and sections. Design systems and component libraries demand perfect consistency, which is why more browsers are adopting this feature.

CSS Subgrid is supported across the following minimum versions of major browsers;

The Future of Subgrid

Subgrid makes complex, modular design systems simple to manage. It was introduced as a part of the CSS Grid Level 2 specification and has now graduated to the Baseline 2023 standard. This means it is officially considered safe and stable for general use.

Subgrid can easily create editorial sections, luxury product showcases, or sophisticated dashboards that stay flexible and look great as well, which is a win for both designers and developers.

Conclusion

CSS Subgrid is an evolution of an old practice where designers had to manually align layouts. Now, the abilities of Subgrid allow developers to maintain perfect alignment and spacing, and make their code cleaner and manageable. It is easy to implement, widely supported across different browsers, and solve nested components inconsistencies with a cleaner approach.

Responsive Design Insights 2025 – Segment 1

Elise Gibbons — Mon, 02 Jun 2025 13:17:47 +0000

If you still think a responsive website is the least of your concerns in 2025, pay attention to this!

Because I am going to tell you exactly why responsive websites have been coming out on top in recent years.

There are more than 7.41 billion mobile users in the world.
And it is expected that this number will rise to 7.49 billion, or more than that, by 2025.

How do you think some websites are so successful in reaching all these potential users?

Through a responsive web design.

As a web designer myself, here is some advice: It's not too late to jump on the bandwagon.

In 2025, you will see almost every web designer and developer experimenting with the latest techniques and practices of responsive web design. After all, it is a necessity in today’s mobile-dominated world.

Let’s Discuss Everything About Responsive Web Designs in 2025

In this blog, I will be diving into 3 major points of discussion;

The best responsive web design techniques and practices in 2025.
Real-world examples and proven strategies to ensure that a website stays responsive and competitive.
Future trends for a responsive web design that every web designer and brand owner must know.

But first, let’s explore in detail what a responsive web design is and why it matters so much in 2025.

Why Responsive Web Design Matters in 2025

No matter if a business is small or operating on a large scale, it can NOT do without a responsive web design.

Responsive web design is an approach that web designers and developers adopt to cater to different users browsing a website from different screen sizes.

And by screen sizes - no, I am not only referring to laptops and PCs, mobiles and tablets. Smartwatches, smart TVs, and other such electronics have also joined the list of devices that have browsers and allow you to access the internet.

So, amidst the growing variety of devices, you, as a designer or developer, must approach website creation with a responsive design.

Responsive web design is all about using CSS and HTML to automatically hide, shrink, resize, and enlarge contents and layout on a website, so that the website looks good on every device.

Key Techniques and Best Practices for Responsive Web Design in 2025

Mobile-Friendly Designs, First

Many web designers are adopting a mobile-first approach, which means designing for mobile devices first before planning layouts for larger screens.

The common mobile screen sizes that designers are targeting in 2025 and upcoming years are;

360x800 (e.g. Samsung Galaxy S21)
390x844 (e.g. iPhone 12 and iPhone 12 Pro)
375x812 (e.g. iPhone X)
393x873 (e.g. Google Pixel 6a)
412x915 (e.g. Samsung Galaxy Note 20)

The key strategy to creating a responsive and modern website design in 2025 involves prioritising content and functionalities for mobile users.

For example, a responsive website...

Identifies the features, functionalities and content required by mobile users.
And, employs fluid layouts and CSS styles that smoothly enhance or reduce them as per mobile and desktop screen sizes.

It is one of the latest practices and techniques used by web designers to create mobile-friendly web design first. Once it is dealt with, they progress to larger screen sizes, such as laptops and tablets.

CSS Grids and Flexible Layouts

The Flexbox techniques and advanced CSS grid allow content to resize across different screen sizes. It involves using different functions, such as;

Auto-fit
Minmax
Auto-fill
Align-content
Justify-items, etc.

The use of relative units like percentages instead of fixed measurements offers greater control to web designers over layout, and ensures that layouts remain consistent and functional on different devices, such as mobiles and tablets.

For instance, here’s an example of how CSS grids and flexible layouts create responsive web designs:

.container { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 15px; }

Want me to demonstrate how CSS grids and flexible layouts create responsive web designs?

Create a flexible grid layout in which each column has a minimum width of 150px and can expand to fill the remaining available space (due to minmax and 1fr).

This approach also auto-fills and ensures that the grid automatically adjusts the number of columns to fit as many items as possible based on the container's width.

In this case, CSS grids and flexible layouts work perfectly for responsive image galleries, product cards, or any content grid which is required to resize to fit different screen sizes.

Fluid Images and Layouts

One of the most effective responsive web design techniques is to make the images and layouts fluid, so as to prevent visual distortions on different devices.

For this, web designers can apply CSS properties like max-width: 100%; and height: auto, which makes sure that the images will scale dynamically, no matter what the screen size.

In short, we are maintaining the aspect ratios of images and layouts on a website on different devices.

This technique ensures that the images will adjust smoothly to different screen sizes without compromising on quality of images, or integrity of layouts.

Breakpoints and Media Queries

Breakpoints, the pixel values that web designers define in CSS, are an integral part of responsive web designs.

When a website is responsive, and reaches a pixel value, it will transform in a way that will enhance user experience on various screen widths.

Media queries in CSS are a common breaking point for developers, whereas for designers, characteristics such as width, height, and orientation of website content based on different devices is a common breaking point.

For instance, on the Chanel website, the layout changes dramatically when switching from a desktop to a mobile device. On desktop, the navigation menu is displayed as a horizontal bar above the image, and on mobile the navigation menu changes into a hamburger menu.

Design Scalable Navigation

Scalable navigation is essential for businesses to provide seamless user experience to all of their users, no matter which devices they are accessing the website from.

Scalable navigation is based on two major elements;

Adaptability – This ensures that menus and navigation elements are user-friendly and accessible across all devices. (For example, visual drop-down menus, breadcrumb navigation, intuitive heirarchy, etc)

Touch-friendly targets – Such as clear visual indicators offer a consistent and intuitive navigation as your business grows.

Scalable navigation and web designs bring numerous benefits for businesses, as they increase traffic, improve the SEO of a website, and are cost-effective.

Choosing the Right Fonts

In 2025, responsive web designs will be all about selecting appropriate typography to ensure that the content remains readable, as well as aesthetically appealing, no matter what the screen size is.

Airbnb, for example, uses larger font sizes and full descriptions on its website on desktop versions, whereas on mobile devices, small fonts and truncated descriptions make the website easily navigable on small screens.

Voice and Gesture Controls

With the rise of responsive websites in 2025, voice-activated assistants, touchless interfaces, voice and gesture controls and other features are extremely useful while designing websites. This technology has also become a trend among mobile users, who like to use these features in their everyday lives.

A website is responsive when it is designed for voice interactions. Web designers can ensure that websites are highly responsive by optimising content for voice search, and implementing voice navigation so that users can interact with websites through voice command. Voice navigation and interactions are the future of responsive web designs and aim to offer a more hands-free user experience.

Common Mistakes To Avoid

Future Trends in Responsive Web Design: 2025 And Beyond

The key to being on top of your responsive website design game is to be…

Strategic!

And keeping up with the emerging trends and innovations in responsive web design practices is one of the ways to do that.
Here is everything you and I must keep an eye on in 2025.

Voice UI integration
Dark mode optimisation
AI-powered chatbots
Google's accelerated mobile pages
Progressive web apps.

Remember, only the web designers and developers who are using these techniques and practices to create responsive web designs in 2025 are reaping tremendous benefits. Brand owners should also focus on investing in navigable and highly usable websites to offer excellent user experience to all mobile, tablet, desktop, and other users, even the ones with disabilities.