Example 1: CSS Grid
Using CSS Grid properties, content items populate side-by-side on wide displays. As screen real estate shrinks, the column count reduces to maintain optimal readability without horizontal overflow.
Desktop View
Wide viewports present multiple card items across a horizontal multi-column structure.
Tablet View
Medium-width viewports adjust columns automatically so cards remain spacious.
Mobile View
Narrow screens collapse grid items into a single stacked column layout.
Example 2: Flexible Images
By setting the image maximum width relative to its container, the graphic scales down proportionally on smaller screens to prevent page clipping.
Example 3: Flexbox
Flexbox handles flexible component distribution within a single axis, allowing web modules to expand to fill available line space or wrap smoothly when constrained.