Grid Layout
Clearfix method test for not colapsing margin. (Safari)
Float Test
1-2
1-2
M-1-2
M-1-2
L-1-2
L-1-2
Grid Nested
1-2
1-2
1-2
M-1-2
M-1-2
M-1-2
L-1-2
L-1-2
L-1-2
Grid Combined
Using uk-visible-* and uk-hidden-* classes.
M-1-2 L-1-3
hidden-medium
M-1-2 L-1-3
1-2 M-1-3
hidden-small
1-2 M-1-3
1-1 visible-small
M-1-1 visible-medium
L-1-1 visible-large
1-1 hidden-large
L-1-2
L-1-2
Push/Pull
Works only with uk-width-medium-*
First
Last
More Complexity
Here is some multiline text for testing purpose.
M-1-4
M-1-4
M-1-3
M-1-3
M-1-3
M-1-3
M-1-3
M-1-4
M-1-4
M-1-4
M-1-4
1-2
1-2
1-2
1-2
Some paragraph
Another paragraph
M-1-2
M-1-2
Panel
Panel
Panel
Panel
Panel
Panel
Panel
Panel
1-4
1-4
1-4
1-4
1-4
1-4
1-4
1-4
1-2
Multi-row
This grid contains multiple boxes which floats into multiple rows.
- M-1-2
- M-1-4
- M-1-4
- M-1-5
- M-1-5
- M-3-5
Custom pixel widths
- Custom
- Custom
- Custom
- Custom
- Custom
- Custom
- Custom
- Custom
Even widths
- 1-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-6Collapse gutter
1-21-2M-1-2M-1-2L-1-2L-1-2- 1-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-6Small gutter
1-21-2M-1-2M-1-2L-1-2L-1-2- 1-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-6Medium gutter
1-21-2M-1-2M-1-2L-1-2L-1-2- 1-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-61-2
S-1-3
M-1-4
L-1-5
XL-1-6Divider
1-21-21-2
M-1-2M-1-2M-1-2
L-1-2L-1-2L-1-2
M-1-2 L-1-3hidden-mediumM-1-2 L-1-3
1-2 M-1-3hidden-small1-2 M-1-3
100 visible-smallM-1-1 visible-mediumL-1-1 visible-largeAuto-match column heights
Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.With target selector
Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.Match only within rows
Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet.- Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.Lorem ipsum dolor sit amet, consectetur adipisicing elit.Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur.