/ / Wie kann ich ein Raster mit mehr als 12 Spalten erstellen? - zurb-foundation

Wie kann ich ein Raster mit mehr als 12 Spalten erstellen? - zurb-foundation

Wie kann ich ein Raster mit mehr als 12 Spalten erstellen? Ich möchte ein Raster machen, um 24 Stunden an einem Tag in Halbstundenschritten darzustellen (insgesamt 48 Spalten).

<div class="row display">
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">1</div>
</div>

Antworten:

2 für die Antwort № 1

Sie können Foundation anpassen diese Unterseite von Zurb, und Sie können 48 Spalten für sich selbst einstellen. Dann können Sie große Klassen von verwenden .large-1 zu .large-48und kleine Klassen von .small-1 zu .small-48.


3 für die Antwort № 2

Sie können einfach eine verwenden nested Grid.

Zuerst teilen Sie Ihre row in 2 columns. Dann legen Sie Ihre 12 Stunden in jeden Abschnitt:

<div class="row">
<div class="small-6 large-6 columns">
<div class="row">
<div class="small-2 large-1 columns">1</div>
<div class="small-2 large-1 columns">2</div>
<div class="small-2 large-1 columns">3</div>
<div class="small-2 large-1 columns">4</div>
<div class="small-2 large-1 columns">5</div>
<div class="small-2 large-1 columns">6</div>
<div class="small-2 large-1 columns">7</div>
<div class="small-2 large-1 columns">8</div>
<div class="small-2 large-1 columns">9</div>
<div class="small-2 large-1 columns">10</div>
<div class="small-2 large-1 columns">11</div>
<div class="small-2 large-1 columns">12</div>
</div>
</div>
<div class="small-6 large-6 columns">
<div class="row">
<div class="small-2 large-1 columns">13</div>
<div class="small-2 large-1 columns">14</div>
<div class="small-2 large-1 columns">15</div>
<div class="small-2 large-1 columns">16</div>
<div class="small-2 large-1 columns">17</div>
<div class="small-2 large-1 columns">18</div>
<div class="small-2 large-1 columns">19</div>
<div class="small-2 large-1 columns">20</div>
<div class="small-2 large-1 columns">21</div>
<div class="small-2 large-1 columns">22</div>
<div class="small-2 large-1 columns">23</div>
<div class="small-2 large-1 columns">24</div>
</div>
</div>
</div>

0 für die Antwort № 3

Nachdem ich nach etwas Ähnlichem gesucht hatte, fand ich schließlich heraus, wie man das mit den Mixins der Foundation macht.

In einer anderen scss-Datei können Sie Ihre eigenen Einstellungen erstellenKlasse wie folgt. Dies implementiert nur die Codierung für die Unterklasse "large-x" für diese Elternklasse. Ich setze die Gesamtspalten-Variable nur für den Fall auf 12 zurück.

@import "foundation/components/grid"

.customClassName {
$total-columns:24;
@include grid-row();
@include grid-html-classes($size:large);
$total-columns:12;
}

Dies gibt mir ein 24-Spalten-Raster, das ich überall platzieren kann, ohne die Standardeinstellungen für die Gründung im Projekt zu überschreiben.


0 für die Antwort № 4

Es gibt wahrscheinlich mehrere Lösungen dazu. Ich habe versucht, die Lösung von Jay, und es funktioniert nicht - nicht sicher warum? Also habe ich eine andere Lösung gefunden - es gibt eine Funktion in Foundation, die verwendet werden kann.

Nehmen wir an, Sie geben das Alphabet A-Z als Liste aus:

<ul>
<li class="grid-26">A</li>
...
<li class="grid-26">Z</li>
</ul>

Erstellen Sie in Ihrem SCSS Ihre Klasse und rufen Sie die Funktion grid-calc auf:

.grid-26 {
width: grid-calc(1, 26);
}

Dies ergibt eine Breite, die gleich 1/26 oder 3.84615% ist

Verkleiden Sie das SCSS, so dass jedes li schwebt und der Text zentriert ist:

.grid-26 {
width: grid-calc(1, 26);
float: left;
text-align: center;
}