Tagged “layout”
-
Eliminating Scrollbar Layout Shifts with CSS scrollbar-gutter
Reserving stable space for classic scrollbars when dynamic content expands or modal overlays lock body scrolling using scrollbar-gutter stable. -
Conditional Parent Styling with the CSS has Relational Pseudo-Class
Styling parent containers and sibling elements based on child state focus or presence using the CSS :has() relational selector. -
Preparing Design Systems for CSS Container Queries
Shifting from viewport-coupled media queries to modular container-aware components using CSS container-type and @container rules. -
Pure CSS Pie Charts and Progress Rings with conic-gradient
Rendering lightweight data visualizations donut charts and angular color gradients using native CSS conic-gradient and custom properties. -
Responsive Card Grids Without Media Queries Using auto-fit and auto-fill
Understanding the exact difference between CSS Grid repeat auto-fit and auto-fill when combined with minmax for intrinsic layouts. -
Crafting Translucent Surfaces with CSS backdrop-filter
Creating accessible frosted-glass headers and overlays with CSS backdrop-filter blur and progressive @supports fallbacks. -
Controlling Scroll Chaining with CSS overscroll-behavior
Preventing modal drawers and fixed sidebars from scrolling the underlying page body using CSS overscroll-behavior contain. -
Using the CSS gap Property in Flexbox Without Margin Hacks
Replacing negative container margins and nth-child spacing overrides with native row-gap and column-gap support in CSS Flexbox. -
CSS Logical Properties for Multi-Directional Layouts
Replacing physical top right bottom and left declarations with flow-relative inline and block CSS Logical Properties for effortless RTL and LTR support. -
Responsive Component Design with ResizeObserver in JavaScript
How to build self-adapting UI components that respond to their own container dimensions rather than the global viewport using the ResizeObserver API. -
Preventing Layout Shifts with Modern CSS Aspect Ratio Boxes
For years responsive video embeds and fluid card thumbnails required the padding-top percentage wrapper hack. Now browsers compute intrinsic aspect ratios directly from HTML width and height attributes alongside the emerging CSS aspect-ratio property. -
Building Performant Sticky Headers and Table of Contents with CSS
Attaching window scroll listeners to toggle a fixed class causes main-thread layout thrashing and visual jumps when elements leave normal document flow. Native CSS position sticky keeps headers and sidebars anchored smoothly on the compositor thread. -
Responsive Sizing Without Media Queries Using CSS min max and clamp
Managing fluid typography and adaptive container widths traditionally required chains of viewport media queries or complex calc formulas. Native CSS comparison functions min, max, and clamp let elements scale smoothly between strict minimum and maximum boundaries in a single line. -
Mastering Nested Layouts and CSS Subgrid Fundamentals
CSS Grid makes two-dimensional page layouts effortless, yet nested card components still struggle to align their inner headers, bodies, and footers across sibling columns. CSS Grid Layout Level 2 introduces subgrid to let child grids inherit parent tracks directly. -
Fluid Responsive Typography with CSS Calc and Viewport Units
Jumping between three or four fixed font-size media queries often creates awkward text wrapping on tablet and ultrawide screens. Combining rem units with viewport width inside CSS calc creates smooth fluid typography that scales naturally. -
Progressive Enhancement in CSS Using supports Feature Queries
Supporting legacy browsers no longer requires holding back modern CSS features or loading JavaScript feature-detection libraries. The native CSS supports rule lets you write resilient fallback styles first and layer modern enhancements cleanly. -
Building Smooth Carousels with Native CSS Scroll Snap
Traditional JavaScript carousel plugins add tens of kilobytes of script weight and often break native touch momentum on mobile devices. Native CSS Scroll Snap lets you build responsive, touch-friendly galleries using two CSS properties. -
CSS Grid vs Flexbox Choosing the Right Layout System
With both CSS Grid and Flexbox supported across modern browsers, a common question in frontend architecture is when to use each. The rule of thumb is simple Flexbox excels at one-dimensional alignment while CSS Grid owns two-dimensional page and card layouts.
See all tags.