New and Updated Properties for Layout and Scroll Behavior
Learn to use the latest CSS properties for layout and scroll behavior, including the gap property for flexbox and grid, scroll-snap for smooth snapping effects, and dynamic viewport units to handle viewport sizing issues. Understand how these features improve responsive design and scrolling control.
We'll cover the following...
The gap property
The gap property is now supported for both grid and flexbox. The gap shorthand property allows setting a “gap” of space between flex and grid children. A gap is only ever applied between children, not around them, which makes it different from applying margin. While gap has been available for grid since its inception, support for flexbox gap was lagging behind until it landed in Safari in April 2021, resulting in cross-browser compatibility.
Scroll control properties
Several scroll-related features have become stable, with one of them being scroll-snap. With scroll-snap, we can control orientation and “snap points” within a scrolling area. Example use cases include providing a native swiping experience through an image gallery or creating a CSS-powered ...