Tata Letak Grid CSS: Membuat Fluid Column dan Gutter yang Lebih Baik

Dalam tutorial ini, kita akan menggunakan grid dari tutorial kita sebelumnya dan menggunakannya sebagai taman bermain untuk mempelajari lebih jauh tentang Grid. Kita akan meng-improve bagaimana kita mendefinisikan gutter kita, meng-explore layouts (tata letak) yang fleksibel, unit fr, dan memperkenalkan fungsi repeat().

Unit-unit yang Fleksibel

Inti dari Grid adalah untuk memungkinkan kita mengontrol layout web dengan baik, jadi mari kita membuat grid fluid static sebelum melangkah lebih jauh. Jika Anda ingat, kita mendefinisikan grid kita dengan pengukuran static pixel:

1

grid-template-columns: 150px 20px 150px 20px 150px;

2

grid-template-rows: auto 20px auto 20px auto;

Sangat mungkin juga untuk menggunakan unit lain di sini, seperti ems, atau rem misalnya. Atau bahkan unit yang lebih tidak biasa seperti vh dan vmin.

Dalam hal ini, kita akan mengubah unit pixel kita untuk persentase. Karena kita mendefinisikan lebar (width) column dan lebar gutter secara manual, kita harus memastikan nilai totalnya 100% sama:

1

grid-template-columns: 30% 5% 30% 5% 30%;

Pikirkan Gap-nya

Ada cara yang lebih baru dan lebih efisien untuk menyatakan pengukuran gutter, dan itu dengan property yang dibuat khusus. Kita dapat menggunakan grid-column-gap dan grid-row-gap, atau property grid-gap sebagai gantinya.

Dengan menggunakan ini berarti kita tidak lagi perlu memasukkan trek grid untuk mengakomodasi gutter-gutter kita, kita hanya perlu menyatakan column  dan row, jadi dalam kasus kita yang dimaksud berarti tiga dari masing-masing:

1

  grid-template-columns: 33.33% 33.33% 33.33%;

2

  grid-template-rows: auto auto auto;

Hmm, nampaknya agak berantakan, tapi itu cukup berjalan baik. Anda akan melihat bahwa lebar column-nya sekarang bertambah hingga 100%; gutter kita akan mengurangi mereka secara otomatis.

Repeat

Mari menulisnya adalah cara yang lebih rapi, menggunakan fungsi repeat():

1

grid-template-columns: repeat(3, 33.33%);

Cara ini menyatakan "mengulangi 33.33% sebanyak tiga kali" memberi kita tiga column. Dan kita bahkan tidak perlu menyatakan grid-template-rows nya karena nilain auto ditetapkan sebagai default. Sekarang kita hanya perlu menyatakan seberapa besar kita menginginkan gutter kita:

1

  grid-template-columns: repeat(3, 33.33%);

2

  grid-gap: 20px;

grid-gap akan menerima unit fixed atau flexible, yang berarti kita dapat menggabungkan fluid column dan fixed gutter dengan sempurna tanpa perhitungan yang rumit di part kita ini.

Menyeting Ulang Value dari grid-column dan grid-row Kita

Ada yang salah: kita masih memiliki banyak deklarasi grid-column dan grid-row pada item-item grid kita, tetapi semuanya salah karena kita tidak lagi memiliki banyak track grid. Syukurlah, karena kita menggunakan grid-gap untuk menentukan guter kita, kita dapat meninggalkan positioning dari item-item tersebut ke penempatan item otomatis yang tidak akan lagi salah gutter-nya. Untuk saat ini, hilangkan semua positioning-nya:

Unit fr

Satu final improvement yang dapat dilakukan ke grid sederhana kita, dan itu akan menyelesaikan masalah width (lebar) yang baru saja kita bahas; kami akan memperkenalkan fr, atau unit fraction. Satu unit fr tunggal menggambarkan "satu bagian dari banyak potongan yang akan kita splitting (bagi)". Misalnya, kita dapat mendeklarasikan column kita menggunakan:

1

  grid-template-columns: 1fr 1fr 1fr;

Di sini ada total tiga unit fr, jadi setiap column akan menjadi tiga lebar. Berikut contoh lainnya:

1

  grid-template-columns: 2fr 1fr 1fr

Sekarang ada total empat unit fr, jadi column pertama akan mengambil setengah dari lebar yang tersedia, dengan dua kolom lainnya masing-masing mengambil seperempat.

Unit-unit ini sangat berguna, terutama dalam kombinasi dengan unit pengukuran lainnya:

1

grid-template-columns: 300px 1fr 3fr 20%;

Di sini kami mendeklarasikan empat column:

• yang pertama ditetapkan fixed pada lebar 300px
• yang terakhir adalah flexible 20% dari container element wide
• kemudian unit fr nya dihitung, juga memperhitungkan gutter, meninggalkan column kedua dengan satu bagian dari space yang tersisa
• dan yang ketiga dengan tiga bagian.

Terlihat seperti ini, penempatan otomatis yang sempurna saat sembilan item kita bergeser untuk mengisi gap-gap yang ada:

Tetapi kembali ke grid asli kita. Mari ganti value 33,33% yang kaku dan tidak akurat dengan 1fr:

1

  grid-template-columns: repeat(3, 1fr);

Hasil akhir:

Kesimpulan

Jadi, untuk rekap:

1. Grid akan menerima pengukuran unit-unit flexible dalam kombinasi dengan unit fixed.
2. Kita tidak perlu mendeklarasikan gutter dalam grid-template kita, kita dapat menggunakan properties grid-gap sebagai gantinya.
3. grid-gap maksudnya kita kurang terikat untuk positioning  item grid kita – kita bisa menyerahkan tanggung jawab yang lebih untuk penempatan otomatis (auto-placement).
4. Fungsi repeat() akan menghemat waktu dan menjaga stylesheet kita dapat dipertahankan.
5. Fr, atau unit fraction (pecahan) adalah cara yang sangat membantu untuk mendeskripsikan template grid.

Kita telah melakukan banyak hal hanya dalam dua tutorial, tetapi sekarang Anda adalah pemilik dari grid yang sangat rapi dan ringkas! Dalam tutorial berikutnya, kita akan menjelajahi area grid, melihat keyword span dan beberapa layout praktis lainnya.

Resource yang Berguna

• Tipe <fraction> dan unit fr di W3C
• Sekali lagi, follow @rachelandrew