Body:Nesting grids
(For demonstration purposes, the grid cells have been given padding. Padding is not included as part of the grid system though)
When nesting a grid inside another grid, you would most likely want the nested grid to take up the full height of the parent grid. To do this, you can nest the grid like in the example shown below however it doesn't regress nicely in legacy browsers that don't support flexbox (IE 8 and 9).
This method is ok if you don't need to support browsers that don't support flexbox (IE 8 and 9).
lots and lots of text in this cell forces the other grid to grow.
This method doesn't regress nicely in legacy browsers though.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas. Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.
not much text in this cell
<div class="grid grid--cols-2">
<div class="grid__cell grid grid--cols-2 -color-1 add-padding">
<div class="grid__cell -color-2 add-padding"><p>lots and lots of text in this cell forces the other grid to grow.</p>
<p>This method doesn't regress nicely in legacy browsers though.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas.
Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.</p>
</div>
<div class="grid__cell -color-3"></div>
</div>
<div class="grid__cell grid grid--cols-2 -color-4 add-padding">
<div class="grid__cell -color-5 add-padding">
<p>not much text in this cell</p>
</div>
<div class="grid__cell -color-6"></div>
</div>
</div>lots and lots of text in this cell forces the other grid to grow.
This method doesn't regress nicely in legacy browsers though.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas. Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.
not much text in this cell
<div class="mixin-2">
<div class="mixin-2 mixin__cell -color-1 add-padding">
<div class="mixin__cell -color-2 add-padding"><p>lots and lots of text in this cell forces the other grid to grow.</p>
<p>This method doesn't regress nicely in legacy browsers though.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas.
Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.</p>
</div>
<div class="mixin__cell -color-3"></div>
</div>
<div class="mixin-2 mixin__cell -color-4 add-padding">
<div class="mixin__cell -color-5 add-padding">
<p>not much text in this cell</p>
</div>
<div class="mixin__cell -color-6"></div>
</div>
</div>
.mixin-2 {
@include grid(2);
}
If you do need to support legacy browsers though, the following method is not quite as clean but it has much better legacy browser support built in.
The prefered method when legacy browser support is required
Same as before but this time with much better legacy browser support.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas. Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.
not much text in this cell
<div class="grid grid--cols-2 grid--hasInners">
<div class="grid__cell -color-1 add-padding">
<div class="grid__inner grid grid--cols-2">
<div class="grid__cell -color-2 add-padding"><p>Same as before but this time with much better legacy browser support.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas.
Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.</p>
</div>
<div class="grid__cell -color-3"></div>
</div>
</div>
<div class="grid__cell -color-4 add-padding">
<div class="grid__inner grid grid--cols-2">
<div class="grid__cell -color-5 add-padding">
<p>not much text in this cell</p>
</div>
<div class="grid__cell -color-6"></div>
</div>
</div>
</div>Same as before but this time with much better legacy browser support.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas. Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.
not much text in this cell
<div class="mixin-24">
<div class="mixin__cell -color-1 add-padding">
<div class="mixin-2 mixin__inner">
<div class="mixin__cell -color-2 add-padding"><p>Same as before but this time with much better legacy browser support.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Bonum incolumis acies: misera caecitas.
Cur, nisi quod turpis oratio est? Atque haec coniunctio confusioque virtutum tamen a philosophis ratione quadam distinguitur.</p>
</div>
<div class="mixin__cell -color-3"></div>
</div>
</div>
<div class="mixin__cell -color-4 add-padding">
<div class="mixin-2 mixin__inner">
<div class="mixin__cell -color-5 add-padding">
<p>not much text in this cell</p>
</div>
<div class="mixin__cell -color-6"></div>
</div>
</div>
</div>
.mixin-2 {
@include grid(2);
}
.mixin-24 {
@include grid(2, $inners: true);
}
The important things to note here are the grid--hasInners and the grid__inner classes in the class based system.
The grid--hasInners class tells the grid that the grid__inner inside each grid__cell should take up the full height and width of it's parent.
Each grid__cell can only contain one grid__inner and grid__inner must be a direct decendent of it's grid__cell parent.
In the mixin based system, the role of the grid--hasInners class is taken up by the $inners:true setting.
In legacy browsers, nested grids will not take up the full height of their parent grid. That is something that only flexbox or JavaScript can do.