Shrikant Portfolio

Tag: responsive design 2025

  • Responsive Design 2.0: Subgrid, Container Queries, and View Transitions

    Responsive design has evolved big time. Gone are the days of clunky breakpoints and fixed column systems. In 2025, we’re building layouts that don’t just respond to screen size but also to the context — the surrounding elements, parent containers, and how users interact.

    Let’s talk about the three major game changers: CSS Subgrid, Container Queries, and the View Transitions API.

    Why Old-School Responsive Design Falls Short

    If you’ve built anything with media queries based on viewport widths (@media(min-width: 768px) and so on), you already know the pain:

    • Components inside components break layouts
    • Design systems get bloated and messy
    • Smooth transitions between pages? Not happening

    This approach works until you need reusability and modularity — which, let’s be honest, is always.

    CSS Subgrid: Cleaner Nesting, Less Duplication

    Subgrid is one of those features that finally fixes a long-standing frustration. It allows a nested grid (child) to inherit column or row definitions from its parent.

    So instead of redefining layout rules in every component, you can just tap into the parent’s grid. That means:

    • Perfect alignment across your UI
    • Less CSS duplication
    • Better maintainability

    Here’s a quick example:

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

.child {
  display: subgrid;
  grid-column: span 2;
}

    🔗 Check out Subgrid on MDN

    Container Queries: Components That Adapt in Context

    Media queries work based on the whole screen size. But what if your card sits in a sidebar? Or inside a widget on a dashboard? You can’t rely on the screen size anymore.

    That’s where container queries come in. Now your styles can respond to the size of the container instead of the viewport.

    @container (min-width: 400px) {
  .card {
    flex-direction: row;
  }
}

    Why this matters:

    • Components adapt naturally wherever they’re placed
    • You write less override CSS
    • It makes your entire design system more flexible

    🔗 More on container queries

    View Transitions API: Smooth Page Transitions Without the Hacky JS

    Ever felt that jarring jump when navigating between pages or routes in SPAs? The View Transitions API makes that go away.

    It allows for clean visual transitions between DOM states. That means you can add fades, slides, or other animations during route changes, even on static sites.

    document.startViewTransition(() => {
  // Do your DOM updates here
});

    Real use cases:

    • Seamless navigation in React or Vue apps
    • Enhanced UX in PWAs
    • More polished page switches on static sites

    🔗 MDN View Transitions API Docs

    Where and How You Can Use These

    • WordPress devs: Play around with container queries inside block themes or FSE templates
    • React/Vue devs: Use container queries with CSS Modules or styled-components
    • Design system folks: Subgrid + container queries = modular UI heaven

    Wrap-Up

    Responsive design in 2025 isn’t about screen size alone. It’s about building smart, reusable components that know where they live and behave accordingly.

    Whether you’re designing a portfolio or coding enterprise-level dashboards, mastering Subgrid, Container Queries, and the View Transitions API is the way forward.

  • The Power of Flexbox: Simplifying Responsive Web Design

    Introduction

    Flexbox, short for “Flexible Box Layout,” is a one-dimensional layout model that offers more control over the alignment, spacing, and distribution of items within a container. It’s a go-to tool for responsive design, enabling easy alignment and flexible layouts. In this post, we’ll explore how Flexbox simplifies responsive design and when to use it instead of other layout techniques.

    1. The Basics of Flexbox

    To create a flexbox layout, you need to define a flex container using display: flex; . Flexbox arranges items along a single axis, either horizontally or vertically.

    CSS:

    .container {
    display: flex;
    justify-content: space-around;
    align-items: center;
    }

    .item {
    background-color: lightcoral;
    padding: 20px;
    }

    HTML:

    <div class=”container”>
    <div class=”item”>Item 1</div>
    <div class=”item”>Item 2</div>
    <div class=”item”>Item 3</div>
    </div>

    2. Aligning Items Flexibly

    With Flexbox, you can easily control the alignment of items using properties like justify-content and align-items. These properties define how items are spaced and aligned within the container.

    .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    }

    This layout ensures that items are evenly distributed across the container and aligned to the top.

    3. Responsive Flexbox

    Flexbox is inherently responsive. By default, flex items shrink to fit smaller screens, but you can use media queries to create breakpoints for more specific control.

    CSS:

    @media (max-width: 600px) {
    .container {
    flex-direction: column;
    align-items: center;
    }}

    HTML:

    <div class=”container”>
    <div class=”item”>Item 1</div>
    <div class=”item”>Item 2</div>
    <div class=”item”>Item 3</div>
    </div>

    Conclusion

    Flexbox is a powerful tool for creating responsive, dynamic layouts with minimal code. Its simplicity and flexibility make it an ideal choice for many modern web design challenges, especially for one-dimensional layouts.