Flex grid Optional
An intrinsically responsive grid layout. This component is usually used for layout of content in the body of a page.
Features
- CSS only, no Javascript.
- Columns are automatically created, no class names needed.
- Each column will resize at the same rate, and will begin to break to a new row if the width reaches the minimum width value.
- No "orphan" columns (by default). If the last column will break to a new row, it will fill any available space. This behaviour can be changed.
- Minimum width and gap can be styled inline using custom properties;
--min-column-width,--column-gapand--row-gap. - Influenced by Stephanie Eckles SmolCSS.
Configuration
- Sass file: components/_flex-grid.scss
- Include the Sass file in theme.scss:
@use "components/flex-grid";
Examples
View source for Html code.
Default
Item 1
Item 2
Item 3
Item 4
Item 5
No column gap
Item 1
Item 2
Item 3
Item 4
Item 5
No column or row gap
Item 1
Item 2
Item 3
Item 4
Item 5
Custom minimum column width (200px)
Item 1
Item 2
Item 3
Item 4
Item 5
Resize the browser window to see the responsive effect.
Orphan columns
No "orphan" columns
Item 1
Item 2
Item 3
Item 4
Item 5
Vertical alignment
Elements aligned to baseline (default)
Item 1
Item 2
Item 3
Item 4
Item 5
Elements aligned top
Item 1
Item 2
Item 3
Item 4
Item 5
Elements aligned center
Item 1
Item 2
Item 3
Item 4
Item 5
Elements aligned bottom
Item 1
Item 2
Item 3
Item 4
Item 5
Elements stretched to equal heights
All auto-sized items will be enlarged vertically to fill the container.
Item 1
Item 2
Item 3
Item 4
Item 5