W3.CSS Responsief vloeistofraster
Responsief raster
W3.CSS ondersteunt een responsief vloeistofraster met 12 kolommen.
Verklein de pagina om het effect te zien!
Dit deel beslaat 12 kolommen op een klein scherm, 4 op een medium scherm en 3 op een groot scherm.
Dit deel beslaat 12 kolommen op een klein scherm, 8 op een gemiddeld scherm en 9 op een groot scherm.
Voorbeeld
<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>
Responsieve rijen
Het rastersysteem van W3.CSS reageert. De kolommen worden automatisch opnieuw gerangschikt, afhankelijk van de schermgrootte: op een groot scherm ziet het er misschien beter uit als de inhoud in drie kolommen is georganiseerd, maar op een klein scherm is het misschien beter als de inhoud op elkaar wordt gestapeld.
| Klas | Beschrijving |
|---|---|
| w3-rij | Container voor responsieve klassen, zonder opvulling |
| w3-rij-opvulling | Container voor responsieve klassen, met 8px linker- en rechteropvulling |
| w3-col | Definieert één kolom in een responsief raster met 12 kolommen |
w3-col heeft de volgende subklassen:
Kolommen voor kleine schermen (typische smartphones):
| Klas | Beschrijving |
|---|---|
| s1 | Definieert 1 van 12 kolommen (breedte: 08,33%) voor kleine schermen |
| s2 | Definieert 2 van 12 kolommen (breedte: 16,66%) voor kleine schermen |
| s3 | Definieert 3 van 12 kolommen (breedte: 25,0%) voor kleine schermen |
| s4 | Definieert 4 van 12 kolommen (breedte: 33,33%) voor kleine schermen |
| s5-s11 | |
| s12 | Definieert 12 van 12 kolommen (breedte: 100%). Standaard voor kleine schermen |
Kolommen voor middelgrote schermen (typische tablets):
| Klas | Beschrijving |
|---|---|
| m1 | Definieert 1 van 12 kolommen (breedte: 08,33%) voor middelgrote schermen |
| m2 | Definieert 2 van 12 kolommen (breedte: 16,66%) voor middelgrote schermen |
| m3 | Definieert 3 van 12 kolommen (breedte: 25,0%) voor middelgrote schermen |
| m4 | Definieert 4 van 12 kolommen (breedte: 33,33%) voor middelgrote schermen |
| m5-m11 | |
| m12 | Definieert 12 van 12 kolommen (breedte: 100%). Standaard voor middelgrote schermen |
Kolommen voor grote schermen (typische laptops en desktops):
| Klas | Beschrijving |
|---|---|
| l1 | Definieert 1 van 12 kolommen (breedte: 08,33%) voor grote schermen |
| l2 | Definieert 2 van 12 kolommen (breedte: 16,66%) voor grote schermen |
| l3 | Definieert 3 van 12 kolommen (breedte: 25,0%) voor grote schermen |
| l4 | Definieert 4 van 12 kolommen (breedte: 33,33%) voor grote schermen |
| l5-l11 | |
| l12 | Definieert 12 van 12 kolommen (breedte: 100%). Standaard voor grote schermen) |
De bovenstaande klassen kunnen worden gecombineerd om meer dynamische en flexibele lay-outs te creëren.
Elke klasse wordt opgeschaald, dus als u dezelfde breedte wilt instellen voor kleine, middelgrote en grote schermen, hoeft u alleen de kleine klasse op te geven. En als u dezelfde breedte wilt op middelgrote en grote schermen, hoeft u alleen de middenklasse op te geven.
Als u echter alleen middelgrote en/of grote klassen gebruikt, zal de breedte op kleine schermen altijd naar 100% transformeren.
Opmerking: het aantal kolommen moet altijd 12 zijn voor elke rij (6+6, 3+3+6, 9+3, enz.)!
Twee gelijke kolommen
Twee kolommen van gelijke breedte (50%/50%) op alle schermformaten:
s6
s6
Voorbeeld
<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>
Twee ongelijke kolommen
Twee kolommen van ongelijke breedte (25%/75%) op alle schermformaten:
s3
s9
Voorbeeld
<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>
Drie gelijke kolommen
Drie kolommen van gelijke breedte (33,3%/33,3%/33,3%) op alle schermformaten:
s4
s4
s4
Voorbeeld
<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>
Drie ongelijke kolommen
Drie kolommen met verschillende breedtes (25%/50%/25%) op tablets, laptops en desktops. Op mobiele telefoons worden de kolommen automatisch gestapeld (100% breedte):
m3
m6
m3
Voorbeeld
<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>
Opmerking: dit voorbeeld is hetzelfde als het gebruik van w3-quarter (m3), w3-half (m6), w3-quarter (m3), die u hebt geleerd in het hoofdstuk W3.CSS Responsive .
Zes kolommen
Zes kolommen van gelijke breedte (elk 16%) op tablets, laptops en desktops. Op mobiele telefoons worden de kolommen automatisch gestapeld (100% breedte):
m2
m2
m2
m2
m2
m2
Voorbeeld
<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>
Gemengd: mobiel en laptops
U kunt klassen combineren om een dynamische en flexibele lay-out te creëren. Dit voorbeeld levert een lay-out met twee kolommen op met een verdeling van 83,34%/16,66% (l10, l2) op grote schermen en een verdeling van 50%/50% (s6, s6) op kleine schermen:
l10 s6
l2 s6
Voorbeeld
<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>
Gemengd: mobiel, tablets en laptops
Dit voorbeeld levert een lay-out met drie kolommen op met een splitsing van 25%/58,34%/16,66% (l3, l7, l2) op grote schermen, 50%/25%/25% (m6, m3, m3) gesplitst op middelgrote schermen en een 33,3%/33,3%/33,3% (s4, s4, s4) split op kleine schermen:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Voorbeeld
<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>
Verschil tussen w3-rij en w3-rij-opvulling
De klasse w3-row definieert een container zonder opvulling, terwijl de klasse w3-row-padding een 8px linker- en rechteropvulling aan elke kolom toevoegt:
w3-rij:
w3-rij-opvulling:
Voorbeeld
<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>
w3-rest gebruiken
De klasse w3-rest is een krachtige en flexibele klasse die de rest van de rasterkolom zal gebruiken.
150px
rest
75px
rest
100px
100px
rest
kwartaal
80px
rest
kwartaal
kwartaal
kwartaal
35%
rest
Voorbeeld met rust
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
Het element dat class="w3-rest" gebruikt, moet altijd het laatste element in de broncode zijn.
Percentage gebruiken
Gebruik de CSS width eigenschap om een specifieke breedte van de kolommen te bepalen.
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Voorbeeld
<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>