Assalammualaikum warahmatullahi wabarakkhatu
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 terminologi atau
istilah 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.
Kali ini saya akan membuat artikel atau catatan mengenai
Terminologi atau istilah yang terdapat pada CSS Grid, Diantaranya yaitu Grid
container, Grid item, Grid line, Grid cell, Grid area, Grid track dan terakhir
Grid gap.
Baca juga: CSS Grid #perkenalan
Sebelum kita membahas mengenai Terminologi atau istilah CSS
Grid ini sebaiknya kalian harus punya web browser firefox karena firefox
ini memiliki Grid Inspektor yang belum
dimiliki oleh google chrome untuk melihat visualisasi grid dengan lebih mudah.
Grid Inspektor ini adalah tools atau alat yang digunakan
untuk melihat garis kotak. Dalam menggunakan grid inspector ini kita dapat
mengetahui elemen tersebut terbuat dari css grid atau flexbox.
Langsung saja kita ke pembahasan Terminlologi atau istilah
pada CSS grid ini.
Grid
Container
Menurut definisinya Grid container ini adalah elemen yang
membungkus grid, container ini terdiri dari item grid yang ditempatkan pada baris
dan kolom.
Contoh:
Jika kita tambahkan ini:
Maka <div class=”container”> sampai </div>
adalah pembungkusnya.
Grid Item
Grid item ini adalah isinya atau elemen elemen yang terbungkus
pada grid container.
Grid Line
Selanjutnya ada Grid Line, Grid Line ini adalah garis
horizontal atau vertical dengan kata lain kolom ataupun baris yang memisahkan
grid jadi beberapa bagian dan biasanya ditandai dengan angka.
Grid Cell
Lanjut ada Grid Cell, Grid Cell ini adalah pertemuan atau
perpotongan diantara kolom dan baris pada grid.
Grid Area
Selanjutnya ada Grid Area, Grid Area ini adalah perkumpulan
dari beberapa grid cell yang akhirnya membentuk kotak.
Grid
Track
Selanjutnya ada Grid Track, Grid Track ini adalah jarak atau
ukuran yang terdapat diantara 2 grid line baik horizontal maupun vertical.
Grid Gap
Dan terakhir ada Grid Gap, Grid Gap ini merupakan kebalikan
dari Grid Track, Grip Gap ini adalah spasi atau jarak yang terdapat diantara
grid track/cell.
Nah itulah beberapa istilah yang terdapat pada CSS grid. Untuk
sealnjutnya adalah bowser support, untuk saat ini CSS grid ini sudah disupport
oleh semua browser browser yang popular mulai dari firefox, safari, opera dan
lainnya.
Sekian artikel yang saya buat mengenai terminologi/istilah yang terdapat pada CSS Grid ini semoga bermanfaat, dan maafkan apabila kurang dapat dipahami karna saya juga disini masih belajar. Untuk lebih jelasnya silahkan simak video di atas. Terima kasih.