Basic
If you don't specify a size, the interior elements
automatically divide the width.
<div class="columns text-center">
<div class="column box">
<p>First</p>
</div>
<div class="column box">
<p>Second</p>
</div>
<div class="column box">
<p>Third</p>
</div>
<div class="column box">
<p>Fourth</p>
</div>
</div>
<style>
.box {
background: rgba(198, 215, 255, 0.897);
border: thin solid rgb(190, 190, 190);
}
</style>
Size
Users can divide up to 12 columns of space for
one row.
Options for assigning sizes for each column are
size-1, size-2, ... Used with size-12.
<div class="layout">
<div class="columns text-center">
<div class="column size-1 box">
<p>size1</p>
</div>
<div class="column size-2 box">
<p>size2</p>
</div>
<div class="column size-3 box">
<p>size3</p>
</div>
<div class="column size-4 box">
<p>size4</p>
</div>
</div>
<div class="columns text-center">
<div class="column size-5 box">
<p>size5</p>
</div>
<div class="column size-6 box">
<p>size6</p>
</div>
</div>
<div class="columns text-center">
<div class="column size-7 box">
<p>size7</p>
</div>
</div>
<div class="columns text-center">
<div class="column size-8 box">
<p>size8</p>
</div>
</div>
<div class="columns text-center">
<div class="column size-9 box">
<p>size9</p>
</div>
</div>
<div class="columns text-center">
<div class="column size-10 box">
<p>size10</p>
</div>
</div>
<div class="columns text-center">
<div class="column size-11 box">
<p>size11</p>
</div>
</div>
<div class="columns text-center">
<div class="column size-12 box">
<p>size12</p>
</div>
</div>
</div>
<style>
.layout {
background: rgba(225, 234, 255, 0.897);
}
.box {
background: rgba(198, 215, 255, 0.897);
border: thin solid rgb(190, 190, 190);
}
</style>
Order
Users can specify order options based on the left
side of the display order for each column,
regardless of the order in which the
code is written.
Order options are used as
order-1, order-2, ...order-12. <div class="columns text-center">
<div class="column size-1 order-12 box">
<p>ord12</p>
</div>
<div class="column size-1 order-11 box">
<p>ord11</p>
</div>
<div class="column size-1 order-10 box">
<p>ord10</p>
</div>
<div class="column size-1 order-9 box">
<p>ord9</p>
</div>
<div class="column size-1 order-8 box">
<p>ord8</p>
</div>
<div class="column size-1 order-7 box">
<p>ord7</p>
</div>
<div class="column size-1 order-1 box">
<p>ord1</p>
</div>
<div class="column size-1 order-2 box">
<p>ord2</p>
</div>
<div class="column size-1 order-3 box">
<p>ord3</p>
</div>
<div class="column size-1 order-4 box">
<p>ord4</p>
</div>
<div class="column size-1 order-5 box">
<p>ord5</p>
</div>
<div class="column size-1 order-6 box">
<p>ord6</p>
</div>
</div>
<style>
.box {
background: rgba(198, 215, 255, 0.897);
border: thin solid rgb(190, 190, 190);
}
</style>
Interval
You can use
interval-1, interval-2, interval-3 classes
to adjust the spacing of elements in each column of
columns.
<div class="columns text-center interval-1">
<div class="column size-4 box2">
<div class="outset-neomo p-1 m-1">interval1</div>
</div>
<div class="column size-4 box2">
<div class="outset-neomo p-1 m-1">interval1</div>
</div>
<div class="column size-4 box2">
<div class="outset-neomo p-1 m-1">interval1</div>
</div>
</div>
<div class="columns text-center interval-2">
<div class="column size-4 box2">
<div class="outset-neomo p-1 m-1">interval2</div>
</div>
<div class="column size-4 box2">
<div class="outset-neomo p-1 m-1">interval2</div>
</div>
<div class="column size-4 box2">
<div class="outset-neomo p-1 m-1">interval2</div>
</div>
</div>
<div class="columns text-center interval-3">
<div class="column size-4 box2">
<div class="outset-neomo p-1 m-1">interval3</div>
</div>
<div class="column size-4 box2">
<div class="outset-neomo p-1 m-1">interval3</div>
</div>
<div class="column size-4 box2">
<div class="outset-neomo p-1 m-1">interval3</div>
</div>
</div>
<style>
.box2 {
border: thin solid rgb(190, 190, 190);
}
</style>
Justify
The just-left, just-center, and
just-right options allow you
to adjust the left/right alignment in one row.
<div class="layout text-center">
<div class="columns just-left">
<div class="column size-3 box">
<p>Left1</p>
</div>
<div class="column size-3 box">
<p>Left2</p>
</div>
<div class="column size-3 box">
<p>Left3</p>
</div>
</div>
<div class="columns just-center">
<div class="column size-3 box">
<p>Center1</p>
</div>
<div class="column size-3 box">
<p>Center2</p>
</div>
<div class="column size-3 box">
<p>Center3</p>
</div>
</div>
<div class="columns just-right">
<div class="column size-3 box">
<p>Right1</p>
</div>
<div class="column size-3 box">
<p>Right2</p>
</div>
<div class="column size-3 box">
<p>Right3</p>
</div>
</div>
</div>
<style>
.layout {
background: rgba(225, 234, 255, 0.897);
}
.box {
background: rgba(198, 215, 255, 0.897);
border: thin solid rgb(190, 190, 190);
}
</style>
Alignment
Use the align-top, align-mid, and
align-bottom options to adjust the
top/middle/bottom alignment in one row.
<div class="layout text-center">
<div
class="columns align-top"
style="border: gray 1px solid; min-height: 10rem"
>
<div class="column size-4 box">
<p>Top1</p>
</div>
<div class="column size-4 box">
<p>Top2</p>
</div>
<div class="column size-4 box">
<p>Top3</p>
</div>
</div>
<div
class="columns align-mid"
style="border: gray 1px solid; min-height: 10rem"
>
<div class="column size-4 box">
<p>Mid1</p>
</div>
<div class="column size-4 box">
<p>Mid2</p>
</div>
<div class="column size-4 box">
<p>Mid3</p>
</div>
</div>
<div
class="columns align-bottom"
style="border: gray 1px solid; min-height: 10rem"
>
<div class="column size-4 box">
<p>Bottom1</p>
</div>
<div class="column size-4 box">
<p>Bottom2</p>
</div>
<div class="column size-4 box">
<p>Bottom3</p>
</div>
</div>
</div>
<style>
.layout {
background: rgba(225, 234, 255, 0.897);
}
.box {
background: rgba(198, 215, 255, 0.897);
border: thin solid rgb(190, 190, 190);
}
</style>
Responsive
By default, all rows appear reactive around
992 based on the width
of the window.
The
static option allows the user
to disable this responsiveness.
<div class="columns text-center">
<div class="column size-4">
<p class="outset-neomo m-1 p-2">responsive</p>
</div>
<div class="column size-4">
<p class="outset-neomo m-1 p-2">responsive</p>
</div>
<div class="column size-4">
<p class="outset-neomo m-1 p-2">responsive</p>
</div>
</div>
<div class="columns text-center static">
<div class="column size-4 order-12">
<p class="outset-neomo m-1 p-2">non responsive</p>
</div>
<div class="column size-4 order-11">
<p class="outset-neomo m-1 p-2">non responsive</p>
</div>
<div class="column size-4 order-10">
<p class="outset-neomo m-1 p-2">non responsive</p>
</div>
</div>