The %%columns style allows to put content side by side, in columns, just like in a newspaper. You can use it to generate simple side-by-side grids. Or more complex grids by nesting columns inside other columns.
%%columns Content for the first column ... ---- Content for the 2nd column ... ---- Content for the 3rd column ... /%
- Columns determine automatically widths and heights.
- Horizontal rulers ---- separate the content of each column.
If you would need a horizontal ruler inside a column, use %%hr /%.
Layout#
By default, all columns have the same width, with the content aligned to the top. But you can change that.
- Default columns
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
Incredibly versatile! Auto-fill and equal height.
- Vertical aligned columns : %%columns.vertical-align ... /%
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
Incredibly versatile! Auto-fill and equal height.
- Sidebar + Main: %%columns.sm ... /%
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
- Main + Sidebar: %%columns.ms ... /%
Incredibly versatile! Auto-fill and equal height.
- Sidebar + Main + Sidebar: %%columns.sms ... /%
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
Incredibly versatile! Auto-fill and equal height.
Multiple styles#
Combine multiple styles with the . separator.
- Default
2nd column
3rd column
- Adding a border: %%columns.border ... /%
2nd column
3rd column
2nd column
3rd column
- Adding hover effect: %%columns.hover ... /*
2nd column
3rd column
- Adding 3D raised effect: %%columns.raised ... /*
2nd column
3rd column
- Adding a background color: %%columns.bg-success ... /%
2nd column
3rd column
- Adding background color to a specific column:
- Adding a background image:
Incredibly versatile! Auto-fill and equal height. Just focus on your content. Have less. Do more.
Incredibly versatile! Auto-fill and equal height.
Nested columns#
This is is just some %%columns sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
This is is just some sample. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you?
OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.
Columns with borders#
Use %%columns.borderLorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.