LegnoGridCol

INFO

See LegnoGridRow for examples of how to define grid rows.

Examples

Auto Width

Add any number of columns to a row. Let the grid figure it out.

<legno-grid-row>
  <legno-grid-col></legno-grid-col>
  <legno-grid-col></legno-grid-col>
  <legno-grid-col></legno-grid-col>
</legno-grid-row>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs"></div>
  <div class="legno-grid-col-xs"></div>
  <div class="legno-grid-col-xs"></div>
</div>

Responsive

Responsive modifiers enable specifying different column sizes, offsets, alignment and distribution at xs, sm, md & lg viewport widths.

<legno-grid-row>
  <legno-grid-col :xs="12" :sm="3" :md="2" :lg="1"></legno-grid-col>
  <legno-grid-col :xs="6" :sm="6" :md="8" :lg="10"></legno-grid-col>
  <legno-grid-col :xs="6" :sm="3" :md="2" :lg="1"></legno-grid-col>
</legno-grid-row>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs-12 legno-grid-col-sm-3 legno-grid-col-md-2 legno-grid-col-lg-1"></div>
  <div class="legno-grid-col-xs-6 legno-grid-col-sm-6 legno-grid-col-md-8 legno-grid-col-lg-10"></div>
  <div class="legno-grid-col-xs-6 legno-grid-col-sm-3 legno-grid-col-md-2 legno-grid-col-lg-1"></div>
</div>

Fluid

Percent based widths allow fluid resizing of columns and rows.

<legno-grid-row>
  <legno-grid-col :xs="12"></legno-grid-col>
</legno-grid-row>

<legno-grid-row>
  <legno-grid-col :xs="1"></legno-grid-col>
  <legno-grid-col :xs="11"></legno-grid-col>
</legno-grid-row>

<legno-grid-row>
  <legno-grid-col :xs="2"></legno-grid-col>
  <legno-grid-col :xs="10"></legno-grid-col>
</legno-grid-row>

<legno-grid-row>
  <legno-grid-col :xs="3"></legno-grid-col>
  <legno-grid-col :xs="9"></legno-grid-col>
</legno-grid-row>

<legno-grid-row>
  <legno-grid-col :xs="4"></legno-grid-col>
  <legno-grid-col :xs="8"></legno-grid-col>
</legno-grid-row>

<legno-grid-row>
  <legno-grid-col :xs="5"></legno-grid-col>
  <legno-grid-col :xs="7"></legno-grid-col>
</legno-grid-row>

<legno-grid-row>
  <legno-grid-col :xs="6"></legno-grid-col>
  <legno-grid-col :xs="6"></legno-grid-col>
</legno-grid-row>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs-12"></div>
</div>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs-1"></div>
  <div class="legno-grid-col-xs-11"></div>
</div>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs-2"></div>
  <div class="legno-grid-col-xs-10"></div>
</div>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs-3"></div>
  <div class="legno-grid-col-xs-9"></div>
</div>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs-4"></div>
  <div class="legno-grid-col-xs-8"></div>
</div>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs-5"></div>
  <div class="legno-grid-col-xs-7"></div>
</div>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs-6"></div>
  <div class="legno-grid-col-xs-6"></div>
</div>

Offset

Offset a column.

<legno-grid-row>
  <legno-grid-col :xs-offset="10" :xs="2"></legno-grid-col>
</legno-grid-row>

<legno-grid-row>
  <legno-grid-col :xs-offset="8" :xs="4"></legno-grid-col>
</legno-grid-row>

<legno-grid-row>
  <legno-grid-col :xs-offset="6" :xs="6"></legno-grid-col>
</legno-grid-row>

<legno-grid-row>
  <legno-grid-col :xs-offset="4" :xs="8"></legno-grid-col>
</legno-grid-row>

<legno-grid-row>
  <legno-grid-col :xs-offset="2" :xs="10"></legno-grid-col>
</legno-grid-row>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs-offset-10 legno-grid-col-xs-2"></div>
</div>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs-offset-8 legno-grid-col-xs-4"></div>
</div>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs-offset-6 legno-grid-col-xs-6"></div>
</div>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs-offset-4 legno-grid-col-xs-8"></div>
</div>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs-offset-2 legno-grid-col-xs-10"></div>
</div>

Reordering

Reorder columns.

1

2

3

4

<legno-grid-row>
  <legno-grid-col :xs-last="true">1</legno-grid-col>
  <legno-grid-col>2</legno-grid-col>
  <legno-grid-col>3</legno-grid-col>
  <legno-grid-col :xs-first="true">4</legno-grid-col>
</legno-grid-row>

<div class="legno-grid-row">
  <div class="legno-grid-col-xs legno-grid-last-xs">1</div>
  <div class="legno-grid-col-xs">2</div>
  <div class="legno-grid-col-xs">3</div>
  <div class="legno-grid-col-xs legno-grid-first-xs">4</div>
</div>

Slots

...

Props

...