Skip to content

italy-theme
italy-theme
Commit 4406a8c7 authored by Pietro Albini's avatar Pietro Albini
Browse files
Options

page: improve grid

parent 972abd11
Hide whitespace changes
Inline Side-by-side
Showing with 90 additions and 0 deletions
demo.html
View file @ 4406a8c7
...@@ -172,6 +172,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. ...@@ -172,6 +172,14 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
</pre> </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> </div>
<div class="row"> <div class="row">
...@@ -238,6 +246,76 @@ along with this program. If not, see <http://www.gnu.org/licenses/>. ...@@ -238,6 +246,76 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</p> </p>
</div> </div>
</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>
<div class="page"> <div class="page">
......
scss/_page.scss
View file @ 4406a8c7
...@@ -40,6 +40,18 @@ div.page { ...@@ -40,6 +40,18 @@ div.page {
& > *:last-child { & > *:last-child {
margin-bottom: 0 !important; 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