Switcher
An implementation of The Switcher.
Switches a Flexbox context between a horizontal and a vertical layout at a given, container-based breakpoint. That is, if the breakpoint is 30rem, the layout will switch to a vertical configuration when the parent element is less than 30rem wide.
This is like a grid, however grids keep all elements the same size, even when the last element sits on its own. A swticher on the other hand will make each element expand to fill the space of the container.
-
Card 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, quae eos laboriosam vero aliquid quam soluta ad officiis quia omnis molestiae optio dolore nesciunt tempora? Dolor doloremque illum quasi exercitationem?
-
Card 2
Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo qui delectus eos sapiente. Necessitatibus quis ratione praesentium esse culpa accusantium est, tempore qui deleniti molestias fugit doloremque debitis tempora illum.
-
Card 3
Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse laboriosam recusandae illo non accusamus vero cupiditate aspernatur incidunt nostrum, commodi quos dicta ducimus quidem debitis et reiciendis dolores minima velit.
-
Card 4
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quae eum, id perspiciatis explicabo soluta enim debitis dicta? Quia molestiae at odio perspiciatis veniam illo nisi quis, necessitatibus, nam et accusamus!
-
Card 5
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium temporibus commodi, voluptatum nisi accusantium voluptate quaerat. Sapiente, placeat cumque. Quod dolor deserunt dolorem reprehenderit cumque quos quas molestiae voluptate nemo.
Configuration
Wherever CSS Grid is supported, so are custom properties. Hence, you can configure your Grid by adjusting the --gridCellMin and --gridGap values within a style attribute.
| Property | Purpose | Default value |
|---|---|---|
--gridCellMin
|
The minimum width of a grid cell. This is entered into the min() function so that the smaller of this value versus 100% is applied. This prevents overflow on small screens.
|
30ch (30 characters) |
--gridGap
|
The gap between Grid cells (property: grid-gap)
|
1.25rem |
Example
In the following example --gridCellMin is set to 30ch and --gridGap to 3rem.
<div class="ds-switcher" style="--gridCellMin: 40ch; --gridGap: 3rem;">
<!-- grid cells/items here -->
</div>