Smart Layouts (CSS Day - 06.06.2025) - Video & Slides
A speaker shares insights from his CSS Day talk on 'Smart Layouts', advocating for fluid, self-adapting CSS using modern features like clamp and container queries.
A speaker shares insights from his CSS Day talk on 'Smart Layouts', advocating for fluid, self-adapting CSS using modern features like clamp and container queries.
Argues for using CSS Flex/Grid gaps over margins for spacing elements, promoting a parent-controlled layout strategy for cleaner, more maintainable code.
A beginner-friendly explanation of why CSS height properties sometimes don't work as expected, exploring the fundamental differences between width and height.
CSS multicol layout spec update introduces block direction wrapping for overflow columns, preventing unwanted horizontal scrollbars.
An update on the new CSS reading-flow property, which solves layout and source order disconnect issues in grid and flexbox.
Explores the proposed CSS syntax for creating masonry layouts, a grid-like design popularized by Pinterest, and the debate around its implementation.
A CSS expert argues for implementing masonry layout as a separate 'display: masonry' property, citing better defaults and easier teaching compared to using CSS Grid.
A CSS expert argues for implementing masonry layout as a separate 'display: masonry' property with good defaults, rather than as part of CSS Grid.
An interactive guide explaining the CSS Grid template areas feature, highlighting its simplicity and power for layout positioning compared to line numbers.
A CSS expert discusses modern layout features like Grid, anchor positioning, and masonry, and why adoption of new CSS is slower than expected.
A technical demo and explanation of CSS anchor positioning using multiple named anchors for precise inline and block axis placement of elements.
Introduces the CSS Anchor Positioning API, a native browser feature for positioning elements relative to anchors, simplifying complex UI layouts.
Explains the key difference between `align-items: center` and `text-align: center` in Flexbox columns, especially for cross-platform React development.
A developer shares their evolving approach to CSS, moving towards building a personal UI system called Splendid UI to simplify web development.
Explains new and existing CSS techniques for vertically centering elements, including upcoming browser support for simpler methods.
A quick CSS tip on using the :empty pseudo-class to hide and debug empty elements in layouts, especially useful for user-generated content.
A technical deep dive into the CSS overflow property, covering its behavior, practical uses, and common layout pitfalls.
A CSS tip for preventing the scroll bounce effect on webpages using the overscroll-behavior property.
An interactive tutorial explaining the fundamentals of CSS Grid, including mental models, grid construction, and alignment techniques.