====== Columns, Rows and Grids ======
[[doku>plugin:mikioplugin|Mikio Plugin]]

https://github.com/nomadjimbob/mikioplugin/wiki/Columns,-Rows-&-Grids
<row>
<col><card primary>1 mikio-column</card></col>
</row>

<row>
<col><card primary>1 mikio-column</card></col>
<col><card secondary>2 mikio-column</card></col>
</row>

<row>
<col><card primary>1 mikio-column</card></col>
<col><card secondary>2 mikio-column</card></col>
<col><card success>3 mikio-column</card></col>
<col><card dark>4 mikio-column</card></col>
</row>

<code ->
<row>
<col><card primary>1 mikio-column</card></col>
</row>

<row>
<col><card primary>1 mikio-column</card></col>
<col><card secondary>2 mikio-column</card></col>
</row>

<row>
<col><card primary>1 mikio-column</card></col>
<col><card secondary>2 mikio-column</card></col>
<col><card success>3 mikio-column</card></col>
<col><card dark>4 mikio-column</card></col>
</row>

</code>

==== Column Widths ====
Each row supports a column with up to 12 spaces. By placing a width identifier in a column element, you can create different width columns

<row>
<col 3><card primary>1 mikio-column</card></col>
<col 6><card secondary>2 mikio-column</card></col>
<col 3><card success>3 mikio-column</card></col>
</row>
<code ->
<row>
<col 3><card primary>1 mikio-column</card></col>
<col 6><card secondary>2 mikio-column</card></col>
<col 3><card success>3 mikio-column</card></col>
</row>

</code>

==== Advanced Layouts ====
You can combine row and column elements to create complex layouts. However this is not recommended as it can break on smaller screens
<row>
<col 8><card primary>Big card</card></col>
<col 4>
<row><card secondary>Small card</card></row>
<row><card danger>Small card</card></row>
<row><col><card success>XS card</card></col><col><card warning>XS card</card></col> <col><card info>XS card</card></col> </row>
</col>
</row>
<code ->
<row>
<col 8><card primary>Big card</card></col>
<col 4>
<row><card secondary>Small card</card></row>
<row><card danger>Small card</card></row>
<row><col><card success>XS card</card></col><col><card warning>XS card</card></col> <col><card info>XS card</card></col> </row>
</col>
</row>

</code>

===== Attributes (Column) =====

**1-12**: Sets the width of the column

====== Grids ======
Grid allows creating a grid and populating with boxes. Boxes do not need to be in order as they can specify which column/row they sit on and their spans. However when in mobile mode, the grid is collapsed and boxes are displayed in written order.
<grid cols="20% 50% 20% 10%" rows="4em 5em 6em">
<box grid-row="3 span 1" grid-col="3 span 2" border-width=1px border-color=blue>Box 1</box>
<box grid-row="1 span 3" grid-col="2 span 1" border-width=1px border-color=blue>Box 2</box>
<box grid-row="1 span 2" grid-col="1 span 1" border-width=1px border-color=blue>Box 3</box>
<box grid-row="2 span 1" grid-col="4 span 1" border-width=1px border-color=blue>Box 4</box>
<box grid-row="1 span 1" grid-col="3 span 2" border-width=1px border-color=blue>Box 5</box>
<box grid-row="2 span 1" grid-col="3 span 1" border-width=1px border-color=blue>Box 6</box>
<box grid-row="3 span 1" grid-col="1 span 1" border-width=1px border-color=blue>Box 7</box>
</grid>
<code ->
<grid cols="20% 50% 20% 10%" rows="4em 5em 6em">
<box grid-row="3 span 1" grid-col="3 span 2" border-width=1px border-color=blue>Box 1</box>
<box grid-row="1 span 3" grid-col="2 span 1" border-width=1px border-color=blue>Box 2</box>
<box grid-row="1 span 2" grid-col="1 span 1" border-width=1px border-color=blue>Box 3</box>
<box grid-row="2 span 1" grid-col="4 span 1" border-width=1px border-color=blue>Box 4</box>
<box grid-row="1 span 1" grid-col="3 span 2" border-width=1px border-color=blue>Box 5</box>
<box grid-row="2 span 1" grid-col="3 span 1" border-width=1px border-color=blue>Box 6</box>
<box grid-row="3 span 1" grid-col="1 span 1" border-width=1px border-color=blue>Box 7</box>
</grid>
</code>