W3.CSS responzivní fluidní mřížka
Responzivní mřížka
W3.CSS podporuje 12 sloupcovou responzivní fluidní mřížku.
Změňte velikost stránky, abyste viděli efekt!
Tato část bude zabírat 12 sloupců na malé obrazovce, 4 na střední obrazovce a 3 na velké obrazovce.
Tato část bude zabírat 12 sloupců na malé obrazovce, 8 na střední obrazovce a 9 na velké obrazovce.
Příklad
<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>
Responzivní řádky
Síťový systém W3.CSS je citlivý. Sloupce se automaticky přeuspořádají v závislosti na velikosti obrazovky: Na velké obrazovce může vypadat lépe s obsahem uspořádaným do tří sloupců, ale na malé obrazovce by mohlo být lepší, kdyby byl obsah naskládán jeden na druhý.
| Třída | Popis |
|---|---|
| w3-řádek | Kontejner pro responzivní třídy bez výplně |
| w3-row-padding | Kontejner pro responzivní třídy s 8px odsazením vlevo a vpravo |
| w3-col | Definuje jeden sloupec ve 12sloupcové responzivní mřížce |
w3-col má následující podtřídy:
Sloupce pro malé obrazovky (typické chytré telefony):
| Třída | Popis |
|---|---|
| s1 | Definuje 1 ze 12 sloupců (šířka: 08,33 %) pro malé obrazovky |
| s2 | Definuje 2 ze 12 sloupců (šířka: 16,66 %) pro malé obrazovky |
| s3 | Definuje 3 ze 12 sloupců (šířka:25,00 %) pro malé obrazovky |
| s4 | Definuje 4 z 12 sloupců (šířka:33,33 %) pro malé obrazovky |
| s5-s11 | |
| s12 | Definuje 12 ze 12 sloupců (šířka:100 %). Výchozí pro malé obrazovky |
Sloupce pro střední obrazovky (typické tablety):
| Třída | Popis |
|---|---|
| m1 | Definuje 1 ze 12 sloupců (šířka:08,33 %) pro střední obrazovky |
| m2 | Definuje 2 ze 12 sloupců (šířka: 16,66 %) pro střední obrazovky |
| m3 | Definuje 3 ze 12 sloupců (šířka:25,00 %) pro střední obrazovky |
| m4 | Definuje 4 z 12 sloupců (šířka:33,33 %) pro střední obrazovky |
| m5-m11 | |
| m12 | Definuje 12 ze 12 sloupců (šířka:100 %). Výchozí pro střední obrazovky |
Sloupce pro velké obrazovky (typické notebooky a stolní počítače):
| Třída | Popis |
|---|---|
| l1 | Definuje 1 ze 12 sloupců (šířka: 08,33 %) pro velké obrazovky |
| l2 | Definuje 2 ze 12 sloupců (šířka: 16,66 %) pro velké obrazovky |
| l3 | Definuje 3 ze 12 sloupců (šířka:25,00 %) pro velké obrazovky |
| l4 | Definuje 4 z 12 sloupců (šířka:33,33 %) pro velké obrazovky |
| l5-l11 | |
| l12 | Definuje 12 ze 12 sloupců (šířka:100 %). Výchozí pro velké obrazovky) |
Výše uvedené třídy lze kombinovat a vytvářet dynamičtější a flexibilnější rozvržení.
Každá třída se zvětšuje, takže pokud chcete nastavit stejnou šířku pro malé, střední a velké obrazovky, stačí zadat pouze malou třídu. A pokud chcete stejnou šířku na střední a velké obrazovce, stačí zadat pouze střední třídu.
Pokud však používáte pouze střední a/nebo velké třídy, šířka se na malých obrazovkách vždy transformuje na 100 %.
Poznámka: Počet sloupců by měl být vždy 12 na každý řádek (6+6, 3+3+6, 9+3 atd.)!
Dva stejné sloupce
Dva sloupce o stejné šířce (50 %/50 %) na všech velikostech obrazovky:
s6
s6
Příklad
<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>
Dva nestejné sloupce
Dva sloupce nestejné šířky (25 %/75 %) na všech velikostech obrazovky:
s3
s9
Příklad
<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>
Tři stejné sloupce
Tři sloupce o stejné šířce (33,3 %/33,3 %/33,3 %) na všech velikostech obrazovky:
s4
s4
s4
Příklad
<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>
Tři nerovné sloupce
Tři sloupce různé šířky (25 %/50 %/25 %) na tabletech, noteboocích a stolních počítačích. Na mobilních telefonech se sloupce automaticky naskládají (100% šířka):
m3
m6
m3
Příklad
<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>
Poznámka: Tento příklad je stejný jako použití w3-čtvrtina (m3), w3-polovina (m6), w3-čtvrtina (m3), které jste se naučili v kapitole W3.CSS Responsive .
Šest sloupců
Šest sloupců stejné šířky (každý 16 %) na tabletech, noteboocích a stolních počítačích. Na mobilních telefonech se sloupce automaticky naskládají (100% šířka):
m2
m2
m2
m2
m2
m2
Příklad
<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>
Smíšené: Mobilní a přenosné počítače
Třídy můžete kombinovat a vytvořit tak dynamické a flexibilní rozvržení. Tento příklad vytvoří rozložení ve dvou sloupcích s rozdělením 83,34 %/16,66 % (l10, l2) na velkých obrazovkách a rozdělením 50 %/50 % (s6, s6) na malých obrazovkách:
l10 s6
l2 s6
Příklad
<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>
Smíšené: Mobily, tablety a notebooky
Tento příklad vytvoří třísloupcové rozložení s rozdělením 25 %/58,34 %/16,66 % (l3, l7, l2) na velkých obrazovkách, 50 %/25 %/25 % (m6, m3, m3) na středních obrazovkách a rozdělení 33,3 %/33,3 %/33,3 % (s4, s4, s4) na malých obrazovkách:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Příklad
<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>
Rozdíl mezi w3-row a w3-row-padding
Třída w3-row definuje kontejner bez vycpávek, zatímco třída w3-row-padding přidává do každého sloupce odsazení 8px vlevo a vpravo:
w3-řádek:
w3-row-padding:
Příklad
<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>
Pomocí w3-rest
Třída w3-rest je výkonná a flexibilní třída, která bude využívat to, co zbylo ze sloupce mřížky.
150 pixelů
odpočinek
75 pixelů
odpočinek
100 pixelů
100 pixelů
odpočinek
čtvrťák
80 pixelů
odpočinek
čtvrťák
čtvrťák
čtvrťák
35 %
odpočinek
Příklad použití odpočinku
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
Prvek používající class="w3-rest" musí být vždy posledním prvkem ve zdrojovém kódu.
Pomocí procent
K určení konkrétní šířky sloupců použijte vlastnost šířka CSS.
20 %
60 %
20 %
45 %
55 %
15 %
35 %
10 %
30 %
10 %
Příklad
<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>