This component helps with layout construction allowing the children to be rearranged at a given threshold.
The component is named after the technique described by Rémi Parmentier which achieves the same results with a few options.
In order to prepare the component, you'll want to specify a few attributes:
threshold: the width where the layout shift should occur.
column-max: defines the maximum number of columns that should appear with the given children.
column-min: defines the number of columns which should appear after the threshold is crossed.
gap: allows for a gap between the children.
The example below provides the defaults.
<fab-four column-max="2" column-min="1" threshold="60ch" gap="0">
In the above configuration, the component would be displayed as a 2×2 grid until the component is confined into a container which is less than
60ch, where the children would then stack into one column.