() translation by (you can also view the original English article)
Dalam video hari ini kita akan berbicara tentang tiga sistem grid yang saat ini ditemukan dalam ZURB's Foundation Framework. Lebih khusus lagi, kita akan mempelajari mana yang harus kita gunakan dalam berbagai situasi. Mari Kita Mulai!
Kami telah membuat panduan komprehensif untuk membantu Anda mempelajari Foundation, apakah Anda baru saja memulai atau ingin menjelajahi lebih banyak topik lanjutan, lihat dan Pelajari tentang Foundation.
Memilih Grid pada Foundation
1. Float Grid
Yang pertama, dan yang paling lama melayani Grid pada Foundation adalah Grid dengan tipe Float. Seperti namanya, ia menggunakan kolom dengan css Float untuk membuat Layout.
Markup ini mungkin akrab bagi Anda; menggunakan baris (row) dan struktur kolom (column) yang sama yang dapat ditemukan pada sistem lain:
1 |
<div class="row"> |
2 |
<div class="columns small-2">2</div> |
3 |
<div class="columns small-10">10</div> |
4 |
</div>
|
5 |
|
6 |
<div class="row"> |
7 |
<div class="columns small-3">3</div> |
8 |
<div class="columns small-9">9</div> |
9 |
</div>
|
2. Flex Grid
Contoh kedua diperkenalkan pada Foundation 6 dan berjalan dengan nama "the flex grid". Dilengkapi oleh CSS flexbox, dan meskipun berperilaku sangat mirip dengan grid pada umumnya, ia memiliki beberapa fitur unik seperti vertikal dan horizontal alignment, dan automatic-sizing.
Markupnya persis sama dengan Grid bertipe Float; Anda menentukan baris dan kolom, dan menggunakan kelas khusus untuk dapat menentukan ukuran kolom tersebut. Namun, karena grid ini didasarkan pada flexbox, kita memiliki akses ke beberapa kemampuan yang lebih tinggi. Autosizing adalah salah satu fitur tersebut; jika kita meninggalkan ukuran class pada kolom itu akan memperluas untuk mengisi ruang yang tersedia:
1 |
<div class="row"> |
2 |
<div class="columns small-2">2</div> |
3 |
<div class="columns">no sizing</div> |
4 |
</div>
|
5 |
|
6 |
<div class="row"> |
7 |
<div class="columns small-3">3</div> |
8 |
<div class="columns">no sizing</div> |
9 |
</div>
|
Atau, menggunakan class shrink akan mengecilkan kolom ke ukuran minimum yang dibutuhkan kontennya:
1 |
<div class="row"> |
2 |
<div class="columns small-2">2</div> |
3 |
<div class="columns shrink">shrink</div> |
4 |
</div>
|
5 |
|
6 |
<div class="row"> |
7 |
<div class="columns small-3">3</div> |
8 |
<div class="columns shrink">shrink</div> |
9 |
</div>
|
Sebagai contoh, Lihatlah video screencast di atas.
3. XY Grid
Contoh ketiga kami adalah grid terbaru (dan menurut saya yang paling dahsyat); Grid XY, diperkenalkan di Foundation 6.4. Juga didukung oleh Flexbox Grid, Sementara memang memiliki beberapa kesamaan dengan Flex grid, tetapi ada juga beberapa perbedaan besar.
Perbedaan signifikan yang pertama adalah grid XY dapat membuat item secara horizontal dan vertikal.
Perbedaan kedua adalah markup. Di sini kita mendefinisikan sebuah elemen container (baik dengan kelas grid-x atau grid-y) dan kemudian mengisinya dengan elemen cell:
1 |
<div class="grid-x"> |
2 |
<div class="cell small-4">4</div> |
3 |
<div class="cell small-2">2</div> |
4 |
<div class="cell small-6">6</div> |
5 |
</div>
|
Secara default tidak ada gutter sama sekali, sehingga semua cell akan berada rata dengan cell di sekitarnya. Sebagai gantinya, kami mendefinisikan gutter pada elemen grid-x: grid-margin-x atau grid-padding-x (mengganti x untuk y jika kita berurusan dengan grid vertikal). Nilai yang dibawa ini dapat diatur menggunakan masing-masing variabel Sass $grid-margin-gutters dan $grid-padding-gutters
Grid Foundation yang manakah yang harus Anda pilih?
Ketika memilih grid mana yang akan digunakan, keputusan harus dibuat berdasarkan beberapa faktor.
- Browser support adalah yang paling penting, karena flexbox tidak memiliki dukungan secara universal (IE menjadi browser dipertanyakan dalam hal ini). Float Grid tidak terpengaruh oleh dukungan flexbox pada browser.
- Kedua, Apakah Anda memerlukan layout dengan grid vertikal? Jika demikian, Anda harus memilih XY Grid.
- Terakhir, seberapa penting kecepatan penulisan kode dan pemeliharaan untuk Anda? XY Grid menggunakan sintaks yang jauh lebih sederhana daripada pendahulunya, jadi akan lebih mudah untuk digunakan.
Untuk lebih jelasnya, lihatlah screencast di atas, atau lihat kursus terbaru saya!
- Mengenal Dasar XY Grid Tuts+ Course
- Advanced Foundation: Menggunakan ZURB Stack Tuts+ Course
- Memulai dengan Foundation Building Blocks Tuts+ Course
