Pertama tama marilah kita panjatkan puji serta syukur kita atas kehadirat Allah SWT yang mana telah memberikan nikmat serta karunianya sehingga saya dapat menulis artikel tentang CSS Grid bagian column dan rows kali ini.
Sholawat beserta salam tak lupa kita curahkan kepada junjungan kita habibana wanabiana Muhammad SAW kepada para keluarganya, sahabatnya, dan tak lupa kepada kita semua yang selaku umatnya yang semoga patut dan taat atas ajarannya sampai yaumul akhir aamiin ya rabbal alamin.
Sebelumnya saya telah membahas tentang perkenalan dan terminologi atau istilah pada CSS grid, Dan selanjutnya saya akan membahas tentang properti apa saja yang bisa kita gunakan untuk CSS Grid ini, Diantaranya yaitu:
#Properti yang dapat diberikan kepada Container (pembungkus CSS Grid)
grid-template-colums
grid-template-rows
grid-auto-colums
grid-auto-rows
grid-auto-flow
grid-template-areas
grid-template
grid-column-gap
grid-row-gap
grid-gap
grid
justify-items
align-items
place-items
justify-content
align-content
place-content
#properti yang dapat diberikan kepada Item (komponen CSS Grid)
grid-column-start
grid-column-end
grid-row-start
grid-row-end
grid-column
grid-row
grid-area
justify-self
align-self
place-self
Namun pada artikel kali ini saya akan membahas dulu tentang properti yang digunakan untuk mengatur kolom dan baris.
Grid-template-columns & Grid-template-rows
Kedua properti tersebut digunakan untuk mengatur kolom atau baris sekaligus, cara menuliskannya adalah kita menuliskan nilai atau ukurannya lalu dipisahkan dengan spasi, jadi misalkan ingin membuat 3 kolom maka tulis kolom pertama mau ukuran berapa (spasi) kolom kedua ukurannya berapa (spasi) dan kolom ketiga ukurannya berapa begitu pula untuk baris.
nilai yang kita kasih itu mempresentasikan ukuran dari tracknya mau horizontal ataupun vertikal dan spasi itu artinya untuk menentukan grid linenya. cara menulisnya:
<track-size>: Bisa berupa (px, %, auto, fr (fraction)).
<line-name>: nama yang bisa diberikan pada track.
Explicit & Implicit Grid
Explisit adalah ketika secara jelas menuliskan ukuran dari gridnya, sedangkan implisit adalah ketika gridnya menentukan secara otomatis sisanya dari kolom dan baris yang tidak ditentukan secara explicit.
Kenapa ada explicit dan implicit grid?
karena konten itu nantinya akan dinamis, kita sebagai desainer belum tentu tau hasil dari webnya nanti akan ada berapa item, bisa saja itemnya nanti munculkan secara dinamis, misalkan lewat database, nantinya bakal ada yang diluar perkiraan nah itu bisa diatur oleh expicit dan implicit gridnya.
Grid-auto-columns dan Grid-auto-rows
Adalah grid untuk mengatur ukuran grid track yang tidak dituliskan di grid-template (implicit track). Grid-auto-rows dan grid-auto-column ini secara otomatis menentukan ukuran track grid yang dihasilkan.
Properti ini sangat berguna karena dapat menambahkan item yang akan dimasukkan kedalam kolom atau baris baru dan dapat mempertahankan ukuran kolom atau baris yang dibuat secara implicit.
Grid-auto-flow
Adalah grid untuk mengatur penempatan cell/item pada grid track, termasuk juga ditulis secara implicit. Dengan grid-auto-flow ini kita bis memilih apakah menjadi row, column, row dense, atau column dense.
Nilai-nilainya:
#row
Item ini secara bergantian menempatkan dengan mengisi setiap baris, menambahkan baris baru sesuai yang diperlukan atau dibutuhkan.
#column
Menempatkannya item dengan mengisi kolom secara bergantian, dapat menambah kolom baru sesuai yang diperlukan atau dibutuhkan.
#dense
Item ini berfungsi untuk mengisi ruang kosong dengan ukuran yang tepat.
Sekian pembahasan megenai CSS grid bagian kolom dan baris, saya ucapkan terima kasih karena telah mengunjungi blog saya, dan saya meminta maaf apabila pembahasan kali ini kurang dapat dimengerti karena saya juga masih belajar. Untuk lebih jelasnya silahkan tonton video dibawah ini:
