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.
Explains the key difference between `align-items: center` and `text-align: center` in Flexbox columns, especially for cross-platform React 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.
Explores the use of the CSS `gap` property in Flexbox layouts, highlighting its benefits over margins for spacing in responsive designs like breadcrumbs.
A technical analysis of the CSS and layout structure used in the Meta Threads web app, exploring UI patterns and potential bugs.