Grid responsif
W3.CSS mendukung 12 kolom cairan responsif jaringan.
Mengubah ukuran halaman untuk melihat efek!
Bagian ini akan menempati 12 kolom di layar kecil, 4 pada layar menengah, dan 3 pada layar besar.
Bagian ini akan menempati 12 kolom di layar kecil, 8 pada layar menengah, dan 9 pada layar besar.
Contoh
<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> Cobalah sendiri " Baris responsif
sistem grid W3.CSS adalah responsif, dan kolom akan menata kembali secara otomatis, tergantung pada ukuran layar: Pada layar besar mungkin terlihat lebih baik dengan konten terorganisir dalam tiga kolom, tetapi pada layar kecil akan lebih baik jika konten item yang ditumpuk di atas satu sama lain.
Kolom harus berada di dalam berturut-turut menjadi sepenuhnya responsif.
| Kelas | Deskripsi |
|---|---|
| w3-baris | Mendefinisikan sebuah wadah padding-kurang untuk kolom responsif. |
| w3-baris-bantalan | Mendefinisikan wadah empuk untuk kolom responsif. |
| w3-col | Mendefinisikan kolom dengan sub kelas |
w3-col memiliki sub kelas berikut:
Kolom untuk layar kecil (ponsel pintar khas):
| Kelas | Deskripsi |
|---|---|
| s1 | Mendefinisikan 1 dari 12 kolom (lebar: 08,33%) untuk layar kecil |
| s2 | Mendefinisikan 2 dari 12 kolom (lebar: 16,66%) untuk layar kecil |
| s3 | Mendefinisikan 3 dari 12 kolom (lebar: 25.00%) untuk layar kecil |
| S4 | Mendefinisikan 4 dari 12 kolom (lebar: 33,33%) untuk layar kecil |
| S5-s11 | |
| s12 | Mendefinisikan 12 dari 12 kolom (width: 100%). Default untuk layar kecil |
Kolom untuk layar menengah (tablet khas):
| Kelas | Deskripsi |
|---|---|
| m1 | Mendefinisikan 1 dari 12 kolom (lebar: 08,33%) untuk layar media |
| m2 | Mendefinisikan 2 dari 12 kolom (lebar: 16,66%) untuk layar media |
| m3 | Mendefinisikan 3 dari 12 kolom (lebar: 25.00%) untuk layar media |
| m4 | Mendefinisikan 4 dari 12 kolom (lebar: 33,33%) untuk layar media |
| m5-m11 | |
| m12 | Mendefinisikan 12 dari 12 kolom (width: 100%). Default untuk layar media |
Kolom untuk layar besar (laptop khas):
| Kelas | Deskripsi |
|---|---|
| l1 | Mendefinisikan 1 dari 12 kolom (lebar: 08,33%) untuk layar besar |
| l2 | Mendefinisikan 2 dari 12 kolom (lebar: 16,66%) untuk layar besar |
| l3 | Mendefinisikan 3 dari 12 kolom (lebar: 25.00%) untuk layar besar |
| l4 | Mendefinisikan 4 dari 12 kolom (lebar: 33,33%) untuk layar besar |
| l5-L11 | |
| L12 | Mendefinisikan 12 dari 12 kolom (width: 100%). Default untuk layar besar) |
Kelas-kelas di atas dapat dikombinasikan untuk membuat layout yang lebih dinamis dan fleksibel.
Setiap kelas skala atas, jadi jika Anda ingin mengatur lebar yang sama untuk kecil, menengah dan besar layar, Anda hanya perlu menentukan kelas kecil. Dan jika Anda ingin lebar yang sama pada menengah dan besar layar, Anda hanya perlu menentukan kelas menengah.
Namun, jika Anda hanya menggunakan media dan / atau kelas besar, lebar akan selalu mengubah 100% pada layar kecil.
Catatan: Jumlah kolom harus selalu menambahkan hingga 12 untuk setiap baris (6 + 6, 3 + 3 + 6, 9 + 3, dll)!
Dua Kolom Sama
Dua kolom yang sama-lebar (50% / 50%) dari semua ukuran layar:
s6
s6
Contoh
<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> Cobalah sendiri " Dua Kolom yang tidak merata
Dua kolom lebar yang tidak sama (25% / 75%) dari semua ukuran layar:
s3
s9
Contoh
<div class="w3-row">
<div class="w3-col s3 w3-green w3-center"><p>s6</p></div>
<div class="w3-col
s9 w3-dark-grey w3-center"><p>s6</p></div>
</div> Cobalah sendiri " Tiga Kolom Sama
Tiga kolom yang sama-lebar (33,3% / 33,3% / 33,3%) dari semua ukuran layar:
S4
S4
S4
Contoh
<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> Cobalah sendiri " Tiga Kolom yang tidak merata
Tiga kolom berbagai lebar (25% / 50% / 25%) pada tablet, laptop dan desktop. Pada ponsel, kolom secara otomatis akan menumpuk (100% lebar):
m3
m6
m3
Contoh
<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> Cobalah sendiri " Catatan: Contoh ini adalah sama dengan menggunakan w3-kuartal (m3), w3-setengah (m6), w3-kuartal (m3), yang Anda pelajari di W3.CSS Responsif bab.
enam Kolom
Enam kolom yang sama-lebar (masing-masing 16%) pada tablet, laptop dan desktop. Pada ponsel, kolom secara otomatis akan menumpuk (100% lebar):
m2
m2
m2
m2
m2
m2
Contoh
<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> Cobalah sendiri " Campuran: Mobile dan Laptop
Anda dapat menggabungkan kelas untuk membuat tata letak yang dinamis dan fleksibel. Contoh ini akan menghasilkan tata letak dua kolom dengan 83,34% / 16,66% (l8, l4) split pada layar besar dan 50% / 50% (S6, S6) perpecahan pada layar kecil:
l8 s6
l4 s6
Contoh
<div class="w3-row">
<div class="w3-col l8 s6 w3-pink
w3-center"><p>l8 s6</p></div>
<div class="w3-col l4 s6
w3-dark-grey w3-center"><p>l4 s6</p></div>
</div> Cobalah sendiri " Campuran: Mobile, Tablet dan Laptop
Contoh ini akan menghasilkan tata letak tiga kolom dengan / 58,34% / 16,66% (l3, l7, l2) perpecahan 25% pada layar besar, 50% / 25% / 25% (m6, m3, m3) split pada layar menengah dan 33,3% / 33,3% / 33,3% (S4, S4, S4) perpecahan pada layar kecil:
l3 m6 S4
l7 m3 S4
l2 m3 S4
Contoh
<div class="w3-row">
<div class="w3-col l9 m6 s4 w3-green
w3-center"><p>l8 s6</p></div>
<div class="w3-col l2 m3 s4
w3-dark-grey w3-center"><p>l4 s6</p></div>
<div class="w3-col l1
m3 s4 w3-red w3-center"><p>l4 s6</p></div>
</div> Cobalah sendiri " Perbedaan antara w3-baris dan w3-baris-bantalan
Kelas w3-baris mendefinisikan wadah empuk-kurang, sedangkan kelas w3-baris-bantalan menambahkan padding kiri dan kanan 8px untuk setiap kolom:
w3-baris:
w3-baris-padding:
Contoh
<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_fjords.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_fjords.jpg"></div>
</div> Cobalah sendiri " menggunakan Persen
20%
60%
20%
45%
55%
15%
35%
10%
30%
10%
Contoh
<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> Cobalah sendiri " Menggunakan w3-sisa
150px
beristirahat
75px
beristirahat
100px
100px
beristirahat
perempat
80px
beristirahat
perempat
perempat
perempat
35%
beristirahat
Misalnya menggunakan sisa
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div> Cobalah sendiri "