Contoh Yayasan Grid
Di bawah ini kami telah mengumpulkan beberapa contoh jaringan umum.
Tiga kolom yang sama
Contoh ini menunjukkan cara membuat tiga kolom yang sama (33,3% / 33,3% / 33,3%), menunjukkan tiga kolom pada media dan skala besar peralatan, susun otomatis pada perangkat kecil:
contoh
<Class Div = "menengah-4 kolom" style = "background-color: yellow;">
<P> .medium-4 </ p>
</ Div>
<Class Div = "menengah-4 kolom" style = "background-color: pink;">
<P> .medium-4 </ p>
</ Div>
<Class Div = "menengah-4 kolom" style = "background-color: yellow;">
<P> .medium-4 </ p>
</ Div>
</ Div>
Coba »
Tiga kolom yang tidak sama
Contoh ini menunjukkan bagaimana untuk membuat tiga kolom yang tidak sama (25% / 50% / 25%), menunjukkan tiga kolom pada media dan skala besar peralatan, susun otomatis pada perangkat kecil:
contoh
<Class Div = "menengah-3 kolom" style = "background-color: yellow;">
<P> .medium-3 </ p>
</ Div>
<Class Div = "menengah-6 kolom" style = "background-color: pink;">
<P> .medium-6 </ p>
</ Div>
<Class Div = "menengah-3 kolom" style = "background-color: yellow;">
<P> .medium-3 </ p>
</ Div>
</ Div>
Coba »
Dua kolom yang sama
Contoh ini menunjukkan cara membuat dua kolom yang sama (50% / 50%), proporsi kecil, menengah dan peralatan besar selalu di atas 50% / 50%:
contoh
<Class Div = "kecil-6 kolom" style = "background-color: yellow;">
<P> .small-6 </ p>
</ Div>
<Div class = "kecil-6 kolom" style = "background-color: pink;">
<P> .small-6 </ p>
</ Div>
</ Div>
Coba »
Dua kolom yang tidak sama
Contoh ini menunjukkan cara membuat dua kolom yang tidak sama (33,3% / 66,6%), proporsi kecil, menengah dan peralatan besar selalu di atas 33,3% / 66,6%:
contoh
<Class Div = "kecil-8 kolom" style = "background-color: yellow;">
<P> .small-8 </ p>
</ Div>
<Div class = "kecil-4 kolom" style = "background-color: pink;">
<P> .small-4 </ p>
</ Div>
</ Div>
Coba »
Memodifikasi urutan kolom
Dengan menggunakan .small|medium|large-push-* dan .small|medium|large-pull-* kelas untuk memodifikasi urutan kolom:
contoh
<Class Div = "kecil-4 yang -8-dorongan yang kecil kolom" style = "background-color: yellow;">
<P> .small-4 .small- 8-dorong </ p>
</ Div>
<Class Div = "kecil-8 kolom-4-tarik kecil" style = "background-color: pink;">
<P> .small-8 .small- 4-tarik </ p>
</ Div>
</ Div>
Coba »
Kolom bersarang
Anda dapat menggunakan grid bersarang (kolom insert kolom):
contoh
<Div class = "kecil-8 kolom"> .small-8
<Class Div = "row">
<Div class = "kecil-8 kolom"> .small-8 Bersarang
<Class Div = "row">
<Div class = "kecil-8 kolom"> .small-8 Bersarang lagi </ div>
<Div class = "kecil-4 kolom"> .small-4 </ div>
</ Div>
</ Div>
<Div class = "kecil-4 kolom"> .small-4 </ div>
</ Div>
</ Div>
<Div class = "kecil-4 kolom"> .small-4 </ div>
</ Div>
Coba »
Campuran: ponsel, desktop,
sistem grid Foundation memiliki tiga kolom: .small-* (ponsel), .medium-* (flat), dan .large-* (desktop). Kelas-kelas ini dapat secara dinamis digunakan dalam kombinasi, membuat tata letak lebih fleksibel:
Tip: Setiap kelas dapat diperbesar, jika Anda ingin lebar perangkat layar kecil dan besar dapat diatur sebagaimana ditentukan .small-* .
contoh
<Div class = "kecil-6 besar-8 kolom"> .small-6 .large-8 </ div>
<Div class = "kecil-6 besar 4 kolom"> .small-6 .large-4 </ div>
</ Div>
<Class Div = "row">
<Div class = "kecil-2 besar 4 kolom"> .small-2 .large-2 </ div>
<Div class = "kecil-4 besar 4 kolom"> .small-4 .large-2 </ div>
<Div class = "kecil-6 besar 4 kolom"> .small-6 .large-2 </ div>
</ Div>
<Class Div = "row">
<Div class = "kecil-3 besar-5 kolom"> .small-3 .large-5 </ div>
<Div class = "kecil-9 besar-7 kolom"> .small-9 .large-7 </ div>
</ Div>
Coba »
Campuran: ponsel, tablet dan perangkat desktop
contoh
<Div class = "menengah-6 besar-8 kolom"> .medium-6 .large-8 </ div>
<Div class = "menengah-6 besar 4 kolom"> .medium-6 .large-4 </ div>
</ Div>
<Class Div = "row">
<Class Div = "kecil-4 menengah-3 besar-7 kolom"> .small-4 .medium-3 .large-7 </ div>
<Class Div = "kecil-4 menengah-6 besar-3 kolom"> .small-4 .medium-6 .large-3 </ div>
<Class Div = "kecil-4 menengah-3 besar-2 kolom"> .small-4 .medium-3 .large-2 </ div>
</ Div>
Coba »
Kolom tengah
Anda dapat menggunakan kolom tengah .small-centered kelas. Menengah dan peralatan besar dapat diwariskan berpusat perangkat kecil, tetapi Anda perlu mengatur kelas berpusat pada peralatan besar .large-centered .
contoh
<Class Div = "kecil-4 kolom kecil-berpusat"> kecil-4 kecil berpusat </ div>
</ Div>
<Class Div = "row">
<Class Div = "kecil-6 kolom kecil-berpusat"> kecil-6 kecil berpusat </ div>
</ Div>
<Class Div = "row">
<Class Div = "kecil-6 besar berpusat kolom"> kecil-6 besar berpusat </ div>
</ Div>
<Class Div = "row">
<Div class = "kecil-8 kecil berpusat kolom besar uncentered"> kecil-8 kecil yang berpusat besar uncentered </ div>
</ Div>
<Class Div = "row">
<Class Div = "kecil-10 kolom kecil-berpusat"> kecil-10 kecil yang berpusat </ div>
</ Div>
Coba »
kolom Offset
Anda dapat menggunakan .large-offset-* (atau .small-offset-* ) kelas, mengatur kolom di sebelah kanan. Jumlah kolom pada margin kiri kontrol menggunakan tanda bintang:
contoh
<Div class = "besar-1 kolom"> 1 </ div>
<Class Div = "besar-11 kolom"> 11 </ div>
</ Div>
<Class Div = "row">
<Div class = "besar-1 kolom"> 1 </ div>
<Div class = "besar-10 besar offset-1 kolom"> 10, offset 1 </ div>
</ Div>
<Class Div = "row">
<Div class = "besar-1 kolom"> 1 </ div>
<Div class = "besar-9 besar-offset-2 kolom"> 9, offset 2 </ div>
</ Div>
<Class Div = "row">
<Div class = "besar-1 kolom"> 1 </ div>
<Div class = "besar-8 besar-offset-3 kolom"> 8, offset 3 </ div>
</ Div>
Coba »
kolom lengkap
Jika jumlah kolom baris dan tidak 12, Yayasan otomatis akan menjadi yang terakhir untuk float yang tepat, dan kosong untuk mengisi kolom yang tersisa.
Pilihan .end kategori elemen untuk terakhir satu set untuk float kiri:
contoh
<Div class = "menengah-3 kolom"> .medium-3 </ div>
<Div class = "menengah-3 kolom"> .medium-3 </ div>
<Div class = "menengah-3 kolom"> .medium-3 </ div>
</ Div>
<Class Div = "row">
<Div class = "menengah-3 kolom"> .medium-3 </ div>
<Div class = "menengah-3 kolom"> .medium-3 </ div>
<Class Div = "menengah-3 kolom mengakhiri"> .medium-3 END </ div>
</ Div>
layar lebar
Grid ( .row ) Ukuran Maksimum (max-width) adalah 62.5rem. Pada Widescreen ukuran mungkin lebih besar dari 62.5rem, kolom ini tidak akan mengisi lengkap halaman, bahkan jika lebar diatur ke 100%. Tapi kita bisa menetapkan max-width baru melalui CSS:
Jika Anda ingin menggunakan default max-width, tapi warna latar belakang dari seluruh halaman lain, maka Anda gunakan pada wadah elemen .row kelas, dan Anda perlu untuk menentukan warna latar belakang:
contoh
<Class Div = "row">
<Class Div = "kecil-6 kolom" style = "background-color: yellow;"> .small-6 </ div>
<Div class = "kecil-6 kolom" style = "background-color: pink;"> .small-6 </ div>
</ Div>
</ Div>
Coba »