W3.CSS Responsive Fluid Grid
Responsives Raster
W3.CSS unterstützt ein 12-Spalten-Responsive-Fluid-Grid.
Ändern Sie die Größe der Seite, um den Effekt zu sehen!
Dieser Teil belegt auf einem kleinen Bildschirm 12 Spalten, auf einem mittleren Bildschirm 4 und auf einem großen Bildschirm 3 Spalten.
Dieser Teil belegt 12 Spalten auf einem kleinen Bildschirm, 8 auf einem mittleren Bildschirm und 9 auf einem großen Bildschirm.
Beispiel
<div class="w3-row">
<div class="w3-col m4 l3">
<p>12 columns on a small screen, 4
on a medium screen, and 3 on a large screen.</p>
</div>
<div class="w3-col m8 l9">
<p>12 columns on a small screen, 8
on a medium screen, and 9 on a large screen.</p>
</div>
</div>
Responsive Zeilen
Das Grid-System von W3.CSS reagiert. Die Spalten werden je nach Bildschirmgröße automatisch neu angeordnet: Auf einem großen Bildschirm sieht es vielleicht besser aus, wenn der Inhalt in drei Spalten organisiert ist, aber auf einem kleinen Bildschirm ist es vielleicht besser, wenn die Inhalte übereinander gestapelt sind.
| Klasse | Beschreibung |
|---|---|
| w3-Reihe | Container für reaktionsschnelle Klassen ohne Polsterung |
| w3-Zeilen-Padding | Container für reaktionsschnelle Klassen mit 8 Pixel linker und rechter Auffüllung |
| w3-Spalte | Definiert eine Spalte in einem responsiven Raster mit 12 Spalten |
w3-col hat die folgenden Unterklassen:
Spalten für kleine Bildschirme (typische Smartphones):
| Klasse | Beschreibung |
|---|---|
| s1 | Definiert 1 von 12 Spalten (Breite: 08,33 %) für kleine Bildschirme |
| s2 | Definiert 2 von 12 Spalten (Breite: 16,66 %) für kleine Bildschirme |
| s3 | Definiert 3 von 12 Spalten (Breite: 25,00 %) für kleine Bildschirme |
| s4 | Definiert 4 von 12 Spalten (Breite: 33,33 %) für kleine Bildschirme |
| s5-s11 | |
| s12 | Definiert 12 von 12 Spalten (Breite: 100 %). Standard für kleine Bildschirme |
Spalten für mittlere Bildschirme (typische Tablets):
| Klasse | Beschreibung |
|---|---|
| m1 | Definiert 1 von 12 Spalten (Breite: 08,33 %) für mittlere Bildschirme |
| m2 | Definiert 2 von 12 Spalten (Breite: 16,66 %) für mittlere Bildschirme |
| m3 | Definiert 3 von 12 Spalten (Breite: 25,00 %) für mittlere Bildschirme |
| m4 | Definiert 4 von 12 Spalten (Breite: 33,33 %) für mittlere Bildschirme |
| m5-m11 | |
| m12 | Definiert 12 von 12 Spalten (Breite: 100 %). Standard für mittlere Bildschirme |
Spalten für große Bildschirme (typische Laptops und Desktops):
| Klasse | Beschreibung |
|---|---|
| l1 | Definiert 1 von 12 Spalten (Breite: 08,33 %) für große Bildschirme |
| l2 | Definiert 2 von 12 Spalten (Breite: 16,66 %) für große Bildschirme |
| l3 | Definiert 3 von 12 Spalten (Breite: 25,00 %) für große Bildschirme |
| l4 | Definiert 4 von 12 Spalten (Breite: 33,33 %) für große Bildschirme |
| l5-l11 | |
| l12 | Definiert 12 von 12 Spalten (Breite: 100 %). Standard für große Bildschirme) |
Die oben genannten Klassen können kombiniert werden, um dynamischere und flexiblere Layouts zu erstellen.
Jede Klasse wird hochskaliert. Wenn Sie also für kleine, mittlere und große Bildschirme dieselbe Breite festlegen möchten, müssen Sie nur die kleine Klasse angeben. Und wenn Sie auf mittleren und großen Bildschirmen die gleiche Breite wünschen, müssen Sie nur die mittlere Klasse angeben.
Wenn Sie jedoch nur mittlere und/oder große Klassen verwenden, wird die Breite auf kleinen Bildschirmen immer auf 100 % umgestellt.
Hinweis: Die Anzahl der Spalten sollte immer 12 für jede Zeile ergeben (6+6, 3+3+6, 9+3 usw.)!
Zwei gleiche Spalten
Zwei Spalten gleicher Breite (50 %/50 %) auf allen Bildschirmgrößen:
s6
s6
Beispiel
<div class="w3-row">
<div class="w3-col s6 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s6 w3-dark-grey w3-center"><p>s6</p></div>
</div>
Zwei ungleiche Spalten
Zwei Spalten mit ungleicher Breite (25 %/75 %) bei allen Bildschirmgrößen:
s3
s9
Beispiel
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s3</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s9</p></div>
</div>
Drei gleiche Spalten
Drei Spalten gleicher Breite (33,3 %/33,3 %/33,3 %) bei allen Bildschirmgrößen:
s4
s4
s4
Beispiel
<div class="w3-row">
<div class="w3-col s4 w3-green w3-center"><p>s4</p></div>
<div class="w3-col s4 w3-dark-grey w3-center"><p>s4</p></div>
<div class="w3-col s4
w3-red w3-center"><p>s4</p></div>
</div>
Drei ungleiche Spalten
Drei unterschiedlich breite Spalten (25 %/50 %/25 %) auf Tablets, Laptops und Desktops. Auf Mobiltelefonen werden die Spalten automatisch gestapelt (100 % Breite):
m3
m6
m3
Beispiel
<div class="w3-row">
<div class="w3-col m3 w3-green w3-center"><p>m3</p></div>
<div class="w3-col
m6 w3-dark-grey w3-center"><p>m6</p></div>
<div class="w3-col
m3
w3-red w3-center"><p>m3</p></div>
</div>
Hinweis: Dieses Beispiel entspricht der Verwendung von w3-quarter (m3), w3-half (m6), w3-quarter (m3), die Sie im Kapitel W3.CSS Responsive gelernt haben .
Sechs Spalten
Sechs Spalten gleicher Breite (jeweils 16 %) auf Tablets, Laptops und Desktops. Auf Mobiltelefonen werden die Spalten automatisch gestapelt (100 % Breite):
m2
m2
m2
m2
m2
m2
Beispiel
<div class="w3-row">
<div class="w3-col m2 w3-green
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-red
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-blue
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-dark-grey
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-black
w3-center"><p>m2</p></div>
<div class="w3-col m2 w3-purple
w3-center"><p>m2</p></div>
</div>
Gemischt: Mobiltelefone und Laptops
Sie können Klassen kombinieren, um ein dynamisches und flexibles Layout zu erstellen. Dieses Beispiel erzeugt ein zweispaltiges Layout mit einer Aufteilung von 83,34 %/16,66 % (l10, l2) auf großen Bildschirmen und einer Aufteilung von 50 %/50 % (s6, s6) auf kleinen Bildschirmen:
l10 s6
l2 s6
Beispiel
<div class="w3-row">
<div class="w3-col l10 s6 w3-pink
w3-center"><p>l10 s6</p></div>
<div class="w3-col l2 s6
w3-dark-grey w3-center"><p>l2 s6</p></div>
</div>
Gemischt: Handy, Tablets und Laptops
Dieses Beispiel erzeugt ein dreispaltiges Layout mit einer Aufteilung von 25 %/58,34 %/16,66 % (l3, l7, l2) auf großen Bildschirmen, 50 %/25 %/25 % (m6, m3, m3) Aufteilung auf mittleren Bildschirmen und a 33,3 %/33,3 %/33,3 % (s4, s4, s4) Aufteilung auf kleinen Bildschirmen:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Beispiel
<div class="w3-row">
<div class="w3-col l3 m6 s4 w3-green w3-center"><p>l3 m6 s4</p></div>
<div class="w3-col l7 m3 s4
w3-dark-grey w3-center"><p>l7 m3 s4</p></div>
<div class="w3-col l2
m3 s4 w3-red w3-center"><p>l2 m3 s4</p></div>
</div>
Unterschied zwischen w3-row und w3-row-padding
Die Klasse w3-row definiert einen Container ohne Polsterung, während die Klasse w3-row-padding jeder Spalte eine linke und rechte Auffüllung von 8 Pixeln hinzufügt:
w3-Reihe:
w3-Zeilen-Padding:
Beispiel
<div class="w3-row">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
<div class="w3-row-padding">
<div class="w3-col s4"><img src="img_lights.jpg"></div>
<div class="w3-col s4"><img src="img_nature.jpg"></div>
<div class="w3-col s4"><img src="img_snowtops.jpg"></div>
</div>
Mit w3-rest
Die w3-rest- Klasse ist eine leistungsstarke und flexible Klasse, die den Rest der Grid-Spalte verwendet.
150px
Rest
75px
Rest
100px
100px
Rest
Quartal
80px
Rest
Quartal
Quartal
Quartal
35%
Rest
Beispiel mit rest
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
Das Element mit class="w3-rest" muss immer das letzte Element im Quellcode sein.
Prozent verwenden
Verwenden Sie die CSS-Breite-Eigenschaft, um eine bestimmte Breite der Spalten festzulegen.
20%
60%
20%
45%
55%
fünfzehn%
35%
10%
30%
10%
Beispiel
<div class="w3-row">
<div class="w3-col
w3-container w3-green"
style="width:20%"><p>20%</p></div>
<div
class="w3-col w3-container w3-blue" style="width:60%"><p>60%</p></div>
<div
class="w3-col w3-container w3-red" style="width:20%"><p>20%</p></div>
</div>