page: improve grid

parent 972abd11
......@@ -172,6 +172,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
&lt;/div&gt;
&lt;/div&gt;
</pre>
<p>
Sono anche disponibili le classi
<code>.col-half</code>, <code>.col-third</code> e
<code>.col-quarter</code> per specificare le
dimensioni di una colonna. Se le classi non sono
specificate le colonne avranno dimensione
automatica.
</p>
</div>
</div>
<div class="row">
......@@ -238,6 +246,76 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</p>
</div>
</div>
<div class="row">
<div class="col">
<p>
Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe.
</p>
</div>
<div class="col">
<p>
Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe.
</p>
</div>
<div class="col col-half">
<p>
Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe. Recusandae quis deleniti
debitis non. Nihil molestiae autem ratione doloremque
sit quaerat consequuntur. Velit minus aut et
voluptatem.
</p>
</div>
</div>
<div class="row">
<div class="col">
<p>
Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe. Recusandae quis deleniti
debitis non. Nihil molestiae autem ratione doloremque
sit quaerat consequuntur. Velit minus aut et
voluptatem. Dolorem explicabo commodi ullam in iusto
at reiciendis. Eaque quibusdam ad et dolores. Qui
numquam nemo est fuga quia animi impedit enim.
</p>
</div>
<div class="col col-third">
<p>
Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe. Recusandae quis deleniti
debitis non. Nihil molestiae autem ratione doloremque
sit quaerat consequuntur.
</p>
</div>
</div>
<div class="row">
<div class="col">
<p>
Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe. Recusandae quis deleniti
debitis non. Nihil molestiae autem ratione doloremque
sit quaerat consequuntur. Velit minus aut et
voluptatem. Dolorem explicabo commodi ullam in iusto
at reiciendis. Eaque quibusdam ad et dolores. Qui
numquam nemo est fuga quia animi impedit enim.
</p>
</div>
<div class="col col-quarter">
<p>
Sunt vitae recusandae laborum. Qui consequatur
laudantium illo corporis. Quia quidem occaecati
corporis libero a saepe.
</p>
</div>
</div>
</div>
<div class="page">
......
......@@ -40,6 +40,18 @@ div.page {
& > *:last-child {
margin-bottom: 0 !important;
}
&.col-half {
flex: 0 0 50%;
}
&.col-third {
flex: 0 0 33.333333%;
}
&.col-quarter {
flex: 0 0 25%;
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment