Align
Styles to control the positioning of items.
Read more
Alignment creates order and visual appeal in a design. It helps the reader understand the elements and their relationships.
Aligning elements in web design can be challenging, but this component makes it easy and templated. Just add some class names to a wrapper element to align the items inside it. For more advanced designs, you can add class names to the individual items. There are also some shorthand class names to reduce the code for often used layouts.
Features
- CSS only, no Javascript.
- Can be applied to any Html tag.
- Implement by setting the
class="align"attribute of the Html tag. - Items can be aligned both horizontal and vertical.
- Items can be defined to wrap on overflow, or not.
- Gap (space between items) can be styled inline using custom properties;
--column-gapand--row-gap. - Items can be aligned individually (both horizontal and vertical).
- Items can be grown individually (both horizontal and vertical) to fill all remaining space.
Examples
View source for Html code.
Align horizontal
Left (default)
Item 1
Item 2
Item 3
Item 4
Item 5
Center
Item 1
Item 2
Item 3
Item 4
Item 5
Right
Item 1
Item 2
Item 3
Item 4
Item 5
Align vertical
Baseline (default)
Item 1
Item 2
Item 3
Item 4
Item 5
Top
Item 1
Item 2
Item 3
Item 4
Item 5
Center
Item 1
Item 2
Item 3
Item 4
Item 5
Bottom
Item 1
Item 2
Item 3
Item 4
Item 5
Gap
Small column and row gap (default)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
No column gap
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
No column or row gap
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Specified column gap
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Specified column and row gap
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Wrap on overflow
Wrap (default)
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
No wrap
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Wrap reverse
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Individually aligned horizontal
Right (Item 4)
Item 1
Item 2
Item 3
Item 4
Item 5
Center (Item 3)
Item 1
Item 2
Item 3
Item 4
Item 5
Left (Item 2)
Item 1
Item 2
Item 3
Item 4
Item 5
Individually aligned vertical
Top (Item 5)
Item 1
Item 2
Item 3
Item 4
Item 5
Center (Item 5)
Item 1
Item 2
Item 3
Item 4
Item 5
Bottom (Item 5)
Item 1
Item 2
Item 3
Item 4
Item 5
Individual grow
The item will grow to fill the remaining space, if there is any.
Grow horizontal (Item 5)
Item 1
Item 2
Item 3
Item 4
Item 5
Grow vertical (Item 5)
Item 1
Item 2
Item 3
Item 4
Item 5
Grow both horizontal and vertical (Item 5)
Item 1
Item 2
Item 3
Item 4
Item 5
Shorthands
A faster way to write common combinations of rules.
Header
A common and versatile alignment, often used in a header element, with a title text to the left and links in the upper right corner.
Class name: header. Same as using these settings:
- Align horizontal: Right →︎
- Align vertical: Top ↑︎
- Column gap: Small ↦︎
- Row gap: Small ↧︎
- Wrap: Wrap ↲︎
- First item: Grow horizontal ⇠︎
Item 1
Item 2
Item 3
Item 4
Item 5
Pagination
Used for pagination. All elements are right aligned, with a summary text separated from following icon links.
Class name: pagination. Same as using these settings:
- Align horizontal: Right →︎
- Align vertical: Center ↕︎
- Column gap: Medium ↦︎
- Row gap: Small ↧︎
- Wrap: Wrap ↲︎
- First item, if not empty: Large margin right ↦︎
Item 1
Item 2
Item 3
Item 4
Item 5