Memahami Grid CSS: Membuat Wadah Kotak

Ini adalah awal dari seri baru di Smashing Magazine yang berkonsentrasi pada CSS Grid Layout. Meskipun Grid telah tersedia di browser sejak tahun 2017, banyak pengembang yang belum memiliki kesempatan untuk menggunakannya pada sebuah proyek. Tampaknya ada banyak properti dan nilai baru yang terkait dengan Tata Letak Kotak CSS. Ini bisa membuatnya tampak luar biasa. Namun, cukup banyak detail spesifikasi cara alternatif untuk melakukan sesuatu, artinya Anda tidak perlu mempelajari seluruh spesifikasi untuk memulai. Seri ini bertujuan untuk membawa Anda dari pemula menjadi ahli — dengan banyak tip penggunaan praktis di sepanjang jalan.

Artikel awal ini akan membahas apa yang terjadi saat Anda membuat wadah kisi dan berbagai properti yang bisa Anda gunakan pada elemen induk untuk mengontrol kisi tersebut. Anda akan menemukan bahwa ada beberapa kasus penggunaan yang dipenuhi hanya dengan properti yang Anda terapkan ke wadah kisi.

Dalam artikel ini, kami akan membahas:

• Membuat wadah kotak dengan display: grid atau display: inline-grid ,
• Menyiapkan kolom dan baris dengan grid-template-columns dan grid-template-rows ,

• Mengontrol ukuran trek implisit dengan grid-auto-columns dan grid-auto-rows .

• Bagian 1: Membuat Wadah Kotak

• Bagian 2: Garis Grid

• Bagian 3: Area Template Grid

Membuat Wadah Kotak

Grid, seperti Flexbox, adalah nilai properti display CSS. Karenanya untuk memberi tahu browser bahwa Anda ingin menggunakan tata letak kisi, Anda menggunakan display: grid . Setelah melakukan ini, browser akan memberi Anda kotak tingkat blok pada elemen dengan display: grid dan semua turunan langsung akan mulai berpartisipasi dalam konteks format grid . Ini berarti mereka berperilaku seperti item kisi, bukan blok normal dan elemen sebaris.

Namun, Anda mungkin tidak langsung melihat perbedaan di halaman Anda. Karena Anda belum membuat baris atau kolom apa pun, Anda memiliki kisi satu kolom. Baris yang cukup sedang dibuat untuk menampung semua turunan langsung Anda, dan mereka ditampilkan satu demi satu dalam satu kolom itu. Secara visual mereka terlihat seperti elemen blok.

Anda akan melihat perbedaan jika Anda memiliki string teks apa pun, tidak dibungkus dalam elemen, dan anak langsung dari wadah kisi, karena string akan dibungkus dalam elemen anonim dan menjadi item kisi. Setiap elemen yang biasanya merupakan elemen sebaris, seperti rentang, juga akan menjadi item kisi setelah induknya adalah wadah kisi.

Contoh di bawah ini memiliki dua elemen level blok, ditambah string teks dengan rentang di tengah string. Kami berakhir dengan lima item grid:

• Dua elemen div ,
• String teks sebelum rentang,
• rentang,
• String teks setelah span.

Jika Anda memeriksa kisi menggunakan Firefox Grid Inspector, Anda dapat melihat trek lima baris yang telah dibuat untuk item tersebut.

Anda juga dapat membuat kisi sebaris dengan menggunakan display: inline-grid ; dalam hal ini, wadah kisi Anda menjadi kotak tingkat sebaris. Namun, turunan langsung masih merupakan item kisi dan berperilaku dengan cara yang sama seperti item kisi di dalam kotak tingkat blok (hanya tipe tampilan luar). Itulah sebabnya wadah kisi berperilaku seperti di atas saat berada di samping kotak lain di halaman.

Contoh berikut ini memiliki kisi yang diikuti oleh string teks, karena ini adalah kisi tingkat sebaris, teks dapat ditampilkan di sampingnya. Hal-hal tingkat inline tidak meregang untuk mengambil semua ruang dalam dimensi inline dengan cara yang dilakukan hal-hal tingkat blok.

Catatan : Di masa mendatang, kita akan dapat mendeskripsikan tata letak kita dengan lebih baik menggunakan display: block grid untuk membuat container level blok, dan display: inline grid untuk membuat container level inline. Anda dapat membaca tentang perubahan spesifikasi tampilan ini di artikel saya, “Menggali Properti Tampilan: Dua Nilai Tampilan”.

Kolom Dan Baris

Untuk mendapatkan sesuatu yang tampak seperti kisi, kita perlu menambahkan kolom dan baris. Ini dibuat menggunakan properti grid-template-columns dan grid-template-rows . Properti ini didefinisikan dalam spesifikasi sebagai menerima nilai yang disebut track-list .

Properti ini menentukan, sebagai daftar trek yang dipisahkan spasi, nama baris dan fungsi ukuran trek dari kisi. Properti grid-template-columns menentukan daftar lagu untuk kolom grid, sedangkan grid-template-rows menentukan daftar lagu untuk baris grid.

Beberapa nilai track-list yang valid adalah sebagai berikut:

Seperti yang Anda lihat, ada banyak cara untuk membuat daftar lagu! Mari kita lihat bagaimana tepatnya semua ini bekerja, dengan beberapa tip tentang mengapa Anda mungkin menggunakan masing-masing.

Menggunakan Satuan Panjang

Anda dapat menggunakan satuan panjang apa pun, atau persentase untuk membuat trek Anda. Jika ukuran trek bertambah hingga kurang dari yang tersedia di wadah grid, maka secara default trek akan berbaris di awal wadah dan ruang kosong akan pergi ke akhir. Ini karena nilai default align-content dan justify-content adalah start . Anda dapat memberi spasi pada trek kisi, atau memindahkannya ke ujung wadah menggunakan properti penyelarasan, yang saya jelaskan secara rinci dalam artikel saya "Cara Menyelaraskan Hal-Hal Dalam CSS".

Anda juga dapat menggunakan kata kunci min-content , max-content dan fit-content() . Menggunakan min-content akan memberi Anda trek sekecil mungkin tanpa menyebabkan luapan. Oleh karena itu, ketika digunakan sebagai ukuran kolom, konten akan terbungkus dengan lembut sedapat mungkin. Track menjadi ukuran kata terpanjang dalam kolom atau elemen ukuran tetap terbesar.

Menggunakan max-content akan menyebabkan konten tidak melakukan soft-wrapping sama sekali. Dalam kolom, string teks apa pun akan terbuka yang dapat menyebabkan overflow.

Kata kunci fit-content hanya dapat digunakan dengan memberikan nilai. Nilai itu menjadi nilai maksimum yang akan dikembangkan oleh trek ini. Oleh karena itu, trek akan bertindak seperti max-content dengan konten yang dibuka dan diregangkan hingga mencapai nilai yang Anda masukkan. Pada saat itu, trek akan mulai membungkus seperti biasa. Jadi lintasan Anda mungkin lebih kecil dari nilai yang Anda berikan, tetapi tidak pernah lebih besar.

Anda dapat mengetahui lebih lanjut tentang ukuran di Grid dan metode tata letak lainnya di artikel saya “Seberapa Besar Kotak Itu? Memahami Ukuran Dalam Tata Letak CSS”.

Jika Anda berakhir dengan trek yang mengambil lebih banyak ruang daripada yang Anda miliki di wadah Anda, mereka akan meluap. Jika Anda menggunakan persentase, seperti halnya tata letak mengambang atau fleksibel berbasis persentase, Anda harus berhati-hati agar persentase total tidak lebih dari 100% jika Anda ingin menghindari luapan.

Satuan fr

Tata Letak Kotak menyertakan metode yang dapat menghemat penghitungan persentase untuk Anda sendiri — melacak ukuran dengan unit fr . Unit ini bukan panjang, dan karena itu tidak dapat digabungkan dengan calc() ; itu adalah unit fleksibel dan mewakili ruang yang tersedia di wadah kisi.

Ini berarti bahwa dengan daftar lagu 1fr 1fr 1fr ; ruang yang tersedia dibagi menjadi tiga dan dibagi rata di antara trek. Dengan daftar lagu 2fr 1fr 1fr , ruang yang tersedia dibagi menjadi empat dan dua bagian diberikan untuk melacak satu — masing-masing satu bagian untuk trek dua dan tiga.

Sesuatu yang harus diperhatikan adalah bahwa apa yang dibagikan secara default adalah ruang yang tersedia yang bukan total ruang dalam wadah. Jika salah satu trek Anda berisi elemen ukuran tetap atau kata panjang yang tidak dapat dibungkus, ini akan ditata sebelum ruang dibagikan.

Pada contoh berikutnya, saya menghapus spasi di antara kata-kata ItemThree . Ini membuat string panjang yang tidak dapat dipecahkan sehingga distribusi ruang terjadi setelah tata letak item itu diperhitungkan.

Anda dapat mencampur unit fr dengan trek panjang tetap, dan di sinilah ia menjadi sangat berguna. Misalnya, Anda dapat memiliki komponen dengan dua kolom berukuran tetap dan area tengah yang membentang:

Anda dapat memiliki komponen dengan satu trek diatur ke fit-content(300px) dan yang lainnya ke 1fr. Hal ini membuat komponen yang dapat memiliki sesuatu yang lebih kecil dari 300px di trek pertama, dalam hal ini hanya membutuhkan ruang yang dibutuhkan dan unit fr diperluas untuk mengambil sisa ruang.

Jika Anda menambahkan sesuatu yang lebih besar (seperti gambar dengan max-width: 100% ), trek pertama akan berhenti tumbuh pada 300 piksel dan unit fr mengambil sisa ruang. Menggabungkan unit fr dengan konten yang sesuai adalah cara untuk membuat beberapa komponen yang sangat fleksibel untuk situs Anda.

Fungsi pengulangan ()

Menggunakan repeat() di daftar lagu Anda dapat menghemat pengetikan nilai atau nilai yang sama berulang kali. Misalnya dua baris berikut adalah sama:

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

Saat menggunakan repeat() nilai sebelum koma adalah berapa kali mengulang daftar lagu yang muncul setelah koma. Daftar lagu itu bisa berupa banyak nilai. Ini berarti Anda dapat mengulangi pola trek.

Anda dapat menggunakan fungsi repeat() untuk bagian dari daftar lagu. Misalnya, baris berikut akan memberi Anda trek 1fr, 3 trek 200px, dan trek 1fr terakhir.

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

Selain angka sebelum koma untuk menunjukkan berapa kali tetap untuk mengulang pola, Anda juga dapat menggunakan kata kunci auto-fill atau auto-fit . Menggunakan salah satu kata kunci ini berarti bahwa alih-alih jumlah trek yang tetap, wadah kisi Anda akan diisi dengan trek sebanyak yang sesuai.

Menggunakan satuan panjang tetap berarti bahwa, kecuali wadah dapat dibagi secara tepat dengan ukuran itu, Anda akan mendapatkan sisa ruang kosong. Dalam contoh di atas wadah saya memiliki lebar 500px, jadi saya mendapatkan dua trek 200px plus ruang di bagian akhir.

Kita dapat menggunakan fungsi grid lain untuk membuat nilai minimum, dengan ruang kosong yang didistribusikan di semua trek. Fungsi minmax() membutuhkan ukuran minimum dan maksimum. Dengan minimum 200px dan maksimal 1fr, kita mendapatkan trek 200px sebanyak yang sesuai dan karena maks adalah 1fr, yang sudah kita ketahui akan membagi ruang secara merata, ekstra didistribusikan di seluruh trek.

Saya sebutkan ada dua kemungkinan kata kunci: auto-fill dan auto-fit . Jika Anda memiliki cukup konten untuk mengisi baris pertama sel, maka ini akan berperilaku dengan cara yang persis sama. Namun, jika Anda tidak melakukannya (misalnya jika kami menghapus semua kecuali satu item di dalam wadah di atas), maka mereka akan berperilaku berbeda.

Menggunakan auto-fill akan mempertahankan ukuran trek yang tersedia meskipun tidak ada konten untuk dimasukkan ke dalamnya.

Jika, sebaliknya, Anda menggunakan auto-fit , trek kosong akan diciutkan:

Dengan menggunakan Firefox Grid Inspector, Anda dapat melihat bahwa trek masih ada, tetapi telah diciutkan menjadi nol. Garis akhir grid kami masih baris 3 karena kami dapat memuat dua trek.

Garis Bernama

Contoh terakhir saya di atas menggunakan pendekatan garis bernama. Saat menggunakan Grid. Anda selalu memiliki nomor baris, namun, Anda juga dapat memberi nama baris. Garis diberi nama di dalam tanda kurung siku. Anda dapat memiliki beberapa nama untuk satu baris; dalam hal ini, ruang memisahkan mereka. Misalnya, dalam daftar lagu berikut, semua baris saya memiliki dua nama.

 grid-template-columns: [main-start sidebar-start] 1fr [sidebar-end content-start] 4fr [content-end main-end]

Anda dapat memberi nama baris Anda apa pun yang Anda suka, kecuali span kata karena itu adalah kata yang dicadangkan karena digunakan saat menempatkan item di kisi.

Catatan : Pada artikel berikutnya dalam seri ini, saya akan berbicara lebih banyak tentang penempatan berbasis garis dan bagaimana garis bernama digunakan. Sementara itu, baca artikel saya tentang "Menamai Benda di Tata Letak Kotak CSS" untuk membantu Anda mempelajari lebih lanjut tentang topik tersebut.

Kotak Eksplisit vs Kotak Tersirat

Saat membuat kisi menggunakan grid-template-columns grid-template-rows dengan daftar trek, Anda membuat apa yang disebut sebagai kisi eksplisit . Ini adalah kisi yang telah Anda tentukan yang memiliki ukuran yang telah Anda pilih untuk setiap trek.

Jika Anda memiliki lebih banyak item daripada yang akan muat, atau menempatkan item sehingga berada di luar batas kisi yang telah Anda buat, Kotak akan membuat trek di kisi implisit . Trek implisit ini akan berukuran otomatis secara default. Kami melihat kisi implisit ini beraksi ketika saya mendeklarasikan display: grid pada elemen induk dan baris yang dibuat kisi, satu untuk setiap item. Saya tidak mendefinisikan baris ini, tetapi karena ada item kisi, trek baris dibuat untuk memberi mereka tempat untuk dituju.

Anda dapat mengatur ukuran untuk baris atau kolom implisit dengan menggunakan properti grid-auto-rows -otomatis atau grid-auto-columns . Properti ini mengambil daftar lagu, jadi jika Anda ingin semua kolom implisit memiliki tinggi setidaknya 200 piksel tetapi bertambah jika ada lebih banyak konten, Anda dapat menggunakan yang berikut ini:

 grid-auto-rows: minmax(200px, auto)

Jika Anda ingin baris implisit pertama berukuran otomatis, dan baris kedua berukuran min-content , dan seterusnya (sampai semua item kisi telah diakomodasi), Anda dapat meneruskan beberapa nilai:

grid-auto-rows: auto 100px

Menggunakan Kotak Dengan Penempatan Otomatis

Membuat kisi (dan mengizinkan browser untuk menempatkan item secara otomatis) membuat Anda jauh dalam hal pola berguna yang dapat Anda capai. Kami belum melihat penempatan item di kisi, tetapi banyak tata letak yang menggunakan Grid tidak melakukan penempatan apa pun. Mereka hanya mengandalkan penempatan item dalam urutan sumber — satu di setiap sel kisi.

Jika Anda baru mengenal CSS Grid, maka bermain dengan ukuran trek yang berbeda dan melihat bagaimana item menempatkan diri ke dalam sel yang Anda buat adalah cara yang bagus untuk memulai.

• Bagian 1: Membuat Wadah Kotak
• Bagian 2: Garis Grid
• Bagian 3: Area Template Grid