Grid Cairan Responsif W3.CSS
Kotak Responsif
W3.CSS mendukung grid cairan responsif 12 kolom.
Ubah ukuran halaman untuk melihat efeknya!
Bagian ini akan menempati 12 kolom di layar kecil, 4 di layar sedang, dan 3 di layar besar.
Bagian ini akan menempati 12 kolom di layar kecil, 8 di layar sedang, dan 9 di 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>
Baris Responsif
Sistem grid W3.CSS responsif. Kolom akan diatur ulang secara otomatis tergantung pada ukuran layar: Pada layar besar mungkin terlihat lebih baik dengan konten yang diatur dalam tiga kolom, tetapi pada layar kecil mungkin lebih baik jika konten ditumpuk di atas satu sama lain.
| Kelas | Keterangan |
|---|---|
| w3-baris | Wadah untuk kelas responsif, tanpa bantalan |
| w3-baris-padding | Wadah untuk kelas responsif, dengan bantalan kiri dan kanan 8 piksel |
| w3-kol | Mendefinisikan satu kolom dalam grid responsif 12 kolom |
w3-col memiliki sub kelas berikut:
Kolom untuk layar kecil (ponsel pintar biasa):
| Kelas | Keterangan |
|---|---|
| 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 (lebar:100%). Default untuk layar kecil |
Kolom untuk layar sedang (tablet biasa):
| Kelas | Keterangan |
|---|---|
| m1 | Mendefinisikan 1 dari 12 kolom (lebar: 08,33%) untuk layar sedang |
| m2 | Mendefinisikan 2 dari 12 kolom (lebar:16,66%) untuk layar sedang |
| m3 | Mendefinisikan 3 dari 12 kolom (lebar:25.00%) untuk layar sedang |
| m4 | Mendefinisikan 4 dari 12 kolom (lebar: 33,33%) untuk layar sedang |
| m5-m11 | |
| m12 | Mendefinisikan 12 dari 12 kolom (lebar:100%). Default untuk layar sedang |
Kolom untuk layar besar (laptop dan desktop biasa):
| Kelas | Keterangan |
|---|---|
| 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 (lebar:100%). Default untuk layar besar) |
Kelas-kelas di atas dapat digabungkan untuk membuat tata letak yang lebih dinamis dan fleksibel.
Setiap kelas ditingkatkan, jadi jika Anda ingin mengatur lebar yang sama untuk layar kecil, sedang dan besar, Anda hanya perlu menentukan kelas kecil . Dan jika Anda ingin lebar yang sama pada layar sedang dan besar, Anda hanya perlu menentukan kelas menengah.
Namun, jika Anda hanya menggunakan kelas menengah dan/atau besar, lebarnya akan selalu berubah menjadi 100% pada layar kecil.
Catatan: Jumlah kolom harus selalu berjumlah 12 untuk setiap baris (6+6, 3+3+6, 9+3, dll)!
Dua Kolom Sama
Dua kolom dengan lebar yang sama (50%/50%) pada 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>
Dua Kolom Tidak Sama
Dua kolom dengan lebar yang tidak sama (25%/75%) pada semua ukuran layar:
s3
s9
Contoh
<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>
Tiga Kolom Sama
Tiga kolom dengan lebar yang sama (33,3%/33,3%/33,3%) pada 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>
Tiga Kolom Tidak Sama
Tiga kolom dengan lebar berbeda (25%/50%/25%) di tablet, laptop, dan desktop. Di ponsel, kolom akan ditumpuk secara otomatis (lebar 100%):
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>
Catatan: Contoh ini sama dengan menggunakan w3-quarter (m3), w3-half (m6), w3-quarter (m3), yang Anda pelajari di bab Responsif W3.CSS .
Enam Kolom
Enam kolom dengan lebar yang sama (masing-masing 16%) di tablet, laptop, dan desktop. Di ponsel, kolom akan ditumpuk secara otomatis (lebar 100%):
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>
Campuran: Ponsel dan Laptop
Anda dapat menggabungkan kelas untuk membuat tata letak yang dinamis dan fleksibel. Contoh ini akan menghasilkan tata letak dua kolom dengan pemisahan 83,34%/16,66% (l10, l2) pada layar besar dan pemisahan 50%/50% (s6, s6) pada layar kecil:
l10 s6
l2 s6
Contoh
<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>
Campuran: Ponsel, Tablet, dan Laptop
Contoh ini akan menghasilkan tata letak tiga kolom dengan pemisahan 25%/58,34%/16,66% (l3, l7, l2) pada layar besar, 50%/25%/25% (m6, m3, m3) pada layar sedang dan a 33,3%/33,3%/33,3% (s4, s4, s4) di layar kecil:
l3 m6 s4
l7 m3 s4
l2 m3 s4
Contoh
<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>
Perbedaan antara baris-w3 dan baris-w3
Kelas w3-baris mendefinisikan wadah tanpa bantalan, sedangkan kelas bantalan baris-w3 menambahkan bantalan kiri dan kanan 8px ke 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_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>
Menggunakan w3-rest
Kelas w3-rest adalah kelas yang kuat dan fleksibel yang akan menggunakan apa yang tersisa dari kolom kisi.
150px
istirahat
75px
istirahat
100px
100px
istirahat
perempat
80px
istirahat
perempat
perempat
perempat
35%
istirahat
Contoh menggunakan istirahat
<div class="w3-row">
<div class="w3-col" style="width:150px"><p>150px</p></div>
<div class="w3-rest"><p>rest</p></div>
</div>
Elemen yang menggunakan class="w3-rest" harus selalu menjadi elemen terakhir dalam kode sumber.
Menggunakan Persen
Gunakan properti lebar CSS untuk menentukan lebar kolom tertentu.
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>