page: improve grid

demo.html

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

scss/_page.scss

@@ -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%;
+            }
         }
     }