Imbottitura contenuto all'interno la layout colonna di griglia
-
27-10-2019 - |
Domanda
Sto usando il quadro ZURB Fondazione per costruire il front-end (http://foundation.zurb.com/docs/grid.php) e ho creato il mio bel layout di base, nessun problema.
Quello che mi chiedo è su come riempire il contenuto all'interno delle colonne? Tutto il contenuto è allineato a sinistra come ci si aspetterebbe, ma non riesco a vedere un modo per creare un'imbottitura senza né personalizzazione del layout di marcatura della griglia, o la creazione di un sacco di involucri in tutto il mondo.
Per esempio, il markup
<div class="container">
<div class="row">
<div class="eight columns customise-the-grid">
<p>My main content</p>
<ul><li>My item</li></ul>
<!-- other various content -->
</div>
<div class="four columns">
<div class="or-create-a-wrapper">
<p>My main content</p>
<ul><li>My item</li></ul>
<!-- other various content -->
</div>
</div>
</div>
</div>
Alcuni css per illustrare
.customise-the-grid{
padding: 10px;
}
.or-create-a-wrapper{
padding: 10px;
}
Soluzione
Yes this has always been the problem with Grid systems and non-fluid designs. Not to mock them though, they definetly have their advantages against fluid designs, but they are awkward to work with.
What i'd do is to set a margin on the element inside the element you wish padding on. If that makes sense.
<div class="four columns">
<div class="or-create-a-wrapper"><!-- margin here -->
<p>My main content</p>
<ul><li>My item</li></ul>
<!-- other various content -->
</div>
</div>
OR
<div class="four columns">
<div class="or-create-a-wrapper">
<div class="another-div-yay"><!-- margin here -->
<p>My main content</p>
<ul><li>My item</li></ul>
</div>
<!-- other various content -->
</div>
</div>
Altri suggerimenti
why not add padding or margin to the child elements? something like
.columns * {margin:0px 10px}
You can create a wrapper with padding on the parent column
.
<div class="container">
<div class="row">
<div class="eight columns customise-the-grid">
<div class="small-12 content-wrapper column">
<p>My main content</p>
<ul><li>My item</li></ul>
<!-- other various content -->
</div>
</div>
<div class="four columns or-create-a-wrapper">
<div class="small-12 content-wrapper column">
<p>My main content</p>
<ul><li>My item</li></ul>
<!-- other various content -->
</div>
</div>
</div>
</div>
<style>
.customise-the-grid{
padding: 10px;
}
.or-create-a-wrapper{
padding: 10px;
}
.content-wrapper{
background-color:lightgray;
border-radius: 10px;
}
</style>
Here is a fiddle : https://jsfiddle.net/mantisse_fr/40cgg84u/