Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Grid Layout
Webdesign

Tip Singkat: Menamai Garis Grid CSS, Untuk Berjaga-Jaga

by
Difficulty:IntermediateLength:ShortLanguages:
This post is part of a series called Understanding the CSS Grid Layout Module.
Understanding the CSS Grid “Auto-Placement Algorithm”
How to Use Implicit Track Sizing on Your CSS Grid

Indonesian (Bahasa Indonesia) translation by Yosef Andreas (you can also view the original English article)

Dalam CSS Grid tiap baris memiliki sebuah nomor indeks yang dapat kita jadikan acuan untuk menempatkan item grid. Bagaimana pun juga, kita juga dapat menamai tiap-tiap grid line ini, membuatnya mudah untuk dikerjakan dan menjaga layout grid. Mari kita lihat!

Grid Datang

Respon paling umum pada tutorial Grid manapun adalah "tapi kapan kita dapat menggunakan ini?" dan itu adalah pertanyaan yang wajar. Faktanya adalah: Grid datang, dan itu akan segera berada di sini.

"CSS Grid akan menjadi dukungan dasar dalam Chrome dan Firefox di bulan Maret 2017."– Eric Meyer

Jika kamu belum pernah memperhatikannya, sekarang waktunya!

Nomor Grid Line

Ketika kita menyatakan sebuah grid, tiap baris diberikan sebuah nomor indeks.

Catatan: Kecuali layout diatur dengan direction: rtl;, nomor ini dimulai dari bagian atas kiri grid, berlanjut ke kanan bawah.

Kita dapat membuat acuan nomor ini untuk menempatkan item grid:

Dalam contoh ini elemen .item diposisikan dimulai pada kolom garis 2, dan baris garis 3.

Nama Garis Grid Eksplisit

Dengan grid yang lebih kompleks, kamu dapat membayangkan bahwa memberi acuan semuanya berdasarkan nomor mungkin akan membingungkan. Untuk alasan ini, module Grid membolehkan kita untuk memberi nama secara eksplisit pada garis ketika kita menyatakan kolom dan baris grid.

Mari menggunakan sebuah contoh seperti yang kita gunakan sepanjang seri ini. Berikut pernyataan mendasar grid 3x3:

Sekarang kita dapat membungkus nilai kolom dan baris dengan nama garis (apapun yang kita inginkan), menggunakan bracket kotak:

Kita sekarang dapat memposisikan item dengan nama, bukannya dengan nomor:

Beberapa petunjuk:

  • Nama-nama ini dapat dikaitkan dengan kebutuhan deskriptifmu, jadi pikirkan secara logis tentang apa yang akan membantumu mengenali dan mengingat area grid.
  • Nomor baris original tetap dalam operasi, sehingga kamu tetap dapat menggunakannya.
  • Kamu dapat menyatakan banyak nama untuk satu garis, misalnya: [main-end footer-start row-5] dll.
  • Bahkan jika kamu menamai garis-garis grid, kamu tidak diwajibkan untuk menggunakannya, jadi itu adalah kebiasan "untuk berjaga-jaga".

Nama Garis Grid Implisit

Ketika kita secara sengaja melakukan hal-hal, seperti menamai garis-garis grid, itu dikatakan menjadi ekplisit. Ketika sesuatu tersirat, namun tidak dinyatakan secara langsung, itu yang disebut sebagai implisit. Kita telah mengcover penamaan garis grid secara eksplisit, namun ada juga keadaan dimana garis-garis dinamai secara implisit.

Kamu mungkin mengingat dari tutorial sebelumnya bahwa mungkin untuk menentukan area grid.

Kita mungkin menentukan empat area grid seperti ini:

Ini memberikan kita hasil berikut:

Menamai area grid header secara otomatir memberikan nama pada empat garis tepinya juga. Garis baris di sekitarnya menjadi header-start dan header-end, dan juga dua baris kolom menjadi header-start dan header-end. Hal yang sama berlaku pada area lainnya, yang diberikan nama garis main-start, main-end, sidebar-start dan sebagainya.

Catatan: Melihat hal-hal ini secara terbalik, garis-garis yang diberi nama secara eksplisit dalam format yang sama (header-start dan header-end) akan membuat sebuah area grid bernama header.

Kita dapat menggunakan nama garis-garis ini sama seperti yang kita miliki sebelumnya, untuk memposisikan item. Dan lagi, mereka ada dalam tambahan untuk tiap nama yang kamu jelaskan sendiri, dan nomor indeks garis original.

Akhir Kalimat

Sekian untuk tip singkat ini! Ingatlah: miliki kebiasaan menamai garis-garis dan area untuk manajemen dan pemeliharaan yang lebih mudah.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.