Columns, Rows & Grids - nomadjimbob/mikioplugin GitHub Wiki

ℹī¸ Some DokuWiki elements such as headers are not supported inside Columns, Rows and Grids

Example Syntax

<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>

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>

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>

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>
⚠ī¸ **GitHub.com Fallback** ⚠ī¸