Responsive Design

CSS 01 Sep 2026 3 min read

Use CSS Subgrid to Align Nested Components

CSS Grid normally creates an independent track system for every grid container. That isolation is useful until nested components need to align with columns or rows defined by an ancestor. subgrid lets a nested grid reuse those tracks instead of guessing their sizes. Modern evergreen browsers support subgrid, making it practical for production layouts where cross-component alignment matters. The problem with independent nested grids Consider a product list where every card contains a title, description, price, and action. If each card uses its own rows, the buttons move vertically when descriptions have different lengths.

CSS CSS Grid

CSS 01 Sep 2026 3 min read

CSS Logical Properties for International and Flexible Layouts

CSS traditionally describes spacing and borders with physical directions such as left, right, top, and bottom. That works until a component must support right-to-left text or a writing mode where the inline direction is not horizontal. Logical properties describe layout relative to the flow of text. They make components more adaptable without maintaining a second set of directional overrides. Physical versus logical directions In a typical English document, the inline axis runs from left to right and the block axis runs from top to bottom. Logical properties name those axes instead of assuming screen directions.

CSS Responsive Design

CSS 01 Sep 2026 5 min read

Container Queries for Component-Level Responsive CSS

Media queries answer a viewport-level question: how wide is the browser? Reusable components often need a different answer: how much space does this component have where it was placed? CSS container queries solve that problem. A card can render compactly in a sidebar and switch to a horizontal layout in a wide content area without knowing either page layout in advance. Why viewport breakpoints leak layout assumptions Consider a reusable article card. A media query might switch it to two columns when the viewport exceeds 900 pixels:

CSS Responsive Design