December UI

Layout

Quickly and easily create layouts with the basic 24-column

Basic Layout

Create basic grid layout using columns

With rol and col, we can easily manipulate the layout using the span attribute.


<dc-row>
    <dc-col :span="24"><div class="grid-content bg-purple-dark"></div></dc-col> 
</dc-row>
<dc-row>
    <dc-col :span="12"><div class="grid-content bg-purple-dark"></div></dc-col> 
    <dc-col :span="12"><div class="grid-content bg-purple-dark"></div></dc-col> 
</dc-row>
<dc-row>
    <dc-col :span="8"><div class="grid-content bg-purple-dark"></div></dc-col> 
    <dc-col :span="8"><div class="grid-content bg-purple-dark"></div></dc-col> 
    <dc-col :span="8"><div class="grid-content bg-purple-dark"></div></dc-col> 
</dc-row>
<dc-row>
    <dc-col :span="6"><div class="grid-content bg-purple-dark"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple-dark"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple-dark"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple-dark"></div></dc-col> 
</dc-row>
<dc-row>
    <dc-col :span="4"><div class="grid-content bg-purple-dark"></div></dc-col> 
    <dc-col :span="4"><div class="grid-content bg-purple-dark"></div></dc-col> 
    <dc-col :span="4"><div class="grid-content bg-purple-dark"></div></dc-col> 
    <dc-col :span="4"><div class="grid-content bg-purple-dark"></div></dc-col> 
    <dc-col :span="4"><div class="grid-content bg-purple-dark"></div></dc-col> 
    <dc-col :span="4"><div class="grid-content bg-purple-dark"></div></dc-col> 
</dc-row>

Expand

Column Spacing

Column spacing is supported


<dc-row :gutter="20">
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
</dc-row>

Expand

Hybrid layout

Form a more complex hybrid layout by combining the basic 1/24 columns


<dc-row :gutter="20">
    <dc-col :span="16"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="8"><div class="grid-content bg-purple"></div></dc-col> 
</dc-row>
<dc-row :gutter="20">
    <dc-col :span="8"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="8"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="4"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="4"><div class="grid-content bg-purple"></div></dc-col> 
</dc-row>
<dc-row :gutter="20">
    <dc-col :span="4"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="16"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="4"><div class="grid-content bg-purple"></div></dc-col> 
</dc-row>

Expand

Custom offset

You can specify column offsets


<dc-row :gutter="20">
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></dc-col> 
</dc-row>
<dc-row :gutter="20">
    <dc-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6" :offset="6"><div class="grid-content bg-purple"></div></dc-col> 
</dc-row>
<dc-row :gutter="20">
    <dc-col :span="12" :offset="6"><div class="grid-content bg-purple"></div></dc-col> 
</dc-row>

Expand

Alignment

Use the flex layout to make flexible alignment of columns


<dc-row type="flex" class="row-bg">
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
</dc-row>
<dc-row type="flex" class="row-bg" justify="center">
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
</dc-row>
<dc-row type="flex" class="row-bg" justify="end">
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
</dc-row>
<dc-row type="flex" class="row-bg" justify="space-between">
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
</dc-row>
<dc-row type="flex" class="row-bg" justify="space-around">
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
    <dc-col :span="6"><div class="grid-content bg-purple"></div></dc-col> 
</dc-row>

<style>
.row-bg {
    padding: 8px 0;
    background-color: #f9fafc;
}
<style>

Expand

Row Attribute

Attribute	Description	Type	Accepted Values	Default
gutter	grid spacing	number	—	0
type	layout mode, you can use flex, works in modern browsers	string	—	—
justify	horizontal alignment of flex layout	string	start/end/center/space-around/space-between	start
align	vertical alignment of flex layout	string	top/middle/bottom	top
tag	custom element tag	string	*	div

Col Attribute

Attribute	Description	Type	Accepted Values	Default
span	number of column the grid spans	number	—	24
offset	number of spacing on the left side of the grid	number	—	0
push	number of columns that grid moves to the right	number	—	0
pull	number of columns that grid moves to the left	number	—	0
...	...	...	...	...