BerandaComputers and TechnologyMenyelam Lebih Dalam ke CSS Grid Minmax ()

Menyelam Lebih Dalam ke CSS Grid Minmax ()

Ada banyak tutorial dan panduan di luar sana yang mengajarkan CSS grid secara umum, dan saya menulisnya beberapa kali. Namun, saya melihat bahwa ada kesalahpahaman tentang fungsi minmax () karena sebagian besar artikel bersifat umum atau tidak memberikan penjelasan yang cukup dan kasus penggunaan di dunia nyata. minmax () sangat kuat dan berguna. Untuk alasan spesifik itu, saya pikir menulis panduan lengkap tentang minmax () akan membantu menutup celah itu.

Dalam artikel ini, kita akan mendalami minmax () , mempelajari bagaimana, kapan, dan mengapa menggunakannya. Di akhir artikel, saya berharap Anda memiliki pemahaman yang lengkap tentangnya. Mari selami!

Pengantar CSS Grid minmax ()

Sesuai spesifikasi CSS, definisi minmax (min, max) adalah sebagai berikut:

Mendefinisikan kisaran ukuran lebih besar dari atau sama dengan min dan kurang dari atau sama dengan maks.

Kita bisa menggunakan minmax () sebagai nilai untuk kolom atau baris kisi. Mari kita ambil contoh dasar:

  . o-grid   {    tampilan  :   kisi  ;     grid-template-kolom  :   minmax   (  200px  ,   500px  )   1   fr   1   fr  ;     celah-kisi  :   1rem  ;  }   

Mari kita analisis di atas:

  1. Kami punya tiga kolom kisi.
  2. Lebar kolom pertama adalah minmax (200px, 500px) . Nilai minimumnya adalah 200px , dan nilai maksimumnya adalah 500px .
  3. Dua kolom lainnya adalah 1fr . Artinya, mereka akan mengambil sisa ruang yang tersedia.

Lanjut dengan contoh, kita harus memikirkan ukuran viewport yang berbeda. Apa yang terjadi jika ukuran viewport terlalu kecil? Jawaban singkatnya adalah scrollbar horizontal . Saya rasa tidak ada yang suka melihat scrollbar pada halaman web, sampai itu dilakukan dengan sengaja, tentunya.

Artinya, minmax () dapat menangani desain responsif dengan sendirinya. Kita perlu menanganinya sendiri, dan saya akan membahasnya nanti di bagian kasus penggunaan.

CSS Grid minmax () Validasi

Jika nilai min di minmax (min, max) lebih besar dari max, maka max akan diabaikan. minmax (min, max) akan diperlakukan sebagai nilai min .

Juga, penting untuk diingat bahwa menggunakan 1fr untuk nilai min tidak valid. Ini hanya berfungsi untuk nilai maksimal. Ini lebih buruk daripada jumlah minimum yang lebih besar dari maks! Seluruh deklarasi akan diabaikan.

Menggunakan nol untuk nilai minimum di minmax ()

Apa yang akan terjadi jika kita menggunakan minmax (0, 500px) ? Anda menyamar! Lebar minimalnya nol, dan tidak akan melebihi 500px . Artinya, jika lebar viewport tidak mencukupi, lebar kolom akan diubah ukurannya.

Kotak Sederhana

Misalkan kita ingin membuat petak 3 kolom. Kami akan melakukan hal berikut:

  . o-grid   {    tampilan  :   kisi  ;     grid-template-kolom  :   minmax   (  200px  ,   1   fr  )   minmax   (  200px  ,   1   fr  )   minmax   (  200px  ,   1   fr  );     celah-kisi  :   1rem  ;  }   

Lebar kolom akan memiliki lebar minimum 200px . Berikut adalah tampilan item tersebut:

Perhatikan bahwa kita dapat menggunakan repeat () fungsi untuk menghindari pengulangan minmax () tiga kali.

  . o-grid   {    tampilan  :   kisi  ;     grid-template-kolom  :  ulang (  3  ,   minmax   (  200px  ,   1   fr  ));     celah-kisi  :   1rem  ;  }   

Meskipun cara di atas berfungsi, tetapi tidak disarankan. Mari kita bahas alasannya.

Mengubah jumlah kolom secara manual

Jika jumlah kolom harus berbeda, maka kita perlu secara manual mengubah jumlah kolom. Bagi saya, itu tidak masuk akal. CSS Grid mampu lebih dari itu!

Ini akan menyebabkan scrollbar horizontal

Karena kami secara eksplisit menentukan jumlah kolom, browser tidak dapat membuatnya membungkus ketika lebar viewport kecil. Akibatnya, ini akan menyebabkan scrollbar horizontal.

Bagaimana cara memperbaiki scrollbar horizontal? Nah, kita perlu memberi tahu browser bahwa jumlah kolom harus berkurang jika lebar viewport tidak cukup.

Di flexbox, kami melakukannya dengan menambahkan flex-wrap: wrap ke induk flexbox.

.induk  {    tampilan  :   fleksibel  ;     bungkus fleksibel  :   bungkus  ;  }   

Di kisi CSS, kami bisa gunakan kata kunci isi otomatis atau pas otomatis .

Menggunakan pas otomatis atau isi otomatis kata kunci

Untuk menghindari mengutak-atik masalah yang disebutkan di atas, kita dapat memanfaatkan kata kunci pas otomatis atau isi otomatis . Perbedaan antara pas otomatis dan isi otomatis itu rumit.

Singkatnya, pas otomatis akan memperluas item kisi untuk mengisi ruang yang tersedia. Sementara pengisian otomatis tidak akan memperluas item. Sebagai gantinya, pengisian otomatis akan membuat ruang yang tersedia tetap dipesan tanpa mengubah lebar item petak.

Saat menggunakan otomatis -fill / fit, Anda mungkin mendapatkan hasil yang sama tergantung pada ukuran viewport. Namun, Anda tidak akan melihat kesamaan itu sampai Anda mengubah ukuran viewport. Lihat video berikut:

Cara kerja keruntuhan untuk pas otomatis

Dalam video di bawah, persegi panjang bertitik mewakili ruang tambahan. Saat viewport lebih besar, browser runtuh persegi panjang dan sebarkan lebarnya di antara item kisi lainnya.

Untuk pengisian otomatis , browser menangani hal itu secara berbeda. Jika ukuran area pandang lebih besar, lebar item petak tidak akan meluas, dan item petak kosong akan ada di sana (Yang bertitik).

Sekarang saya sudah menjelaskan caranya minmax () berfungsi, mari jelajahi beberapa contoh dan kasus penggunaan.

Kasus Penggunaan dan Contoh

Kotak Kartu

Saya rasa ini adalah kasus penggunaan yang paling umum untuk minmax () , yang membuat pembungkus kartu responsif.

.pembungkus  {    tampilan  :   kisi  ;     grid-template-kolom  :  ulang (  pengisian otomatis  ,   minmax   (  250px  ,   1   fr  ));     celah-kisi  :   1rem  ;  }   

Ketika saya mulai mempelajari kisi CSS, membaca nilai grid-template-kolom dalam kasus penggunaan ini menakutkan. Penting untuk memperhatikan area pandang di bawah 250px , karena akan ada scrollbar horizontal.

Untuk mengatasi ini, kami memiliki dua solusi. Yang pertama adalah menggunakan kueri media CSS. Idenya adalah untuk menyetel grid-template-kolom ke 1fr , dan saat lebar viewport cukup besar, kita akan menerapkan minmax () .

.pembungkus  {    tampilan  :   kisi  ;     grid-template-kolom  :   1   fr  ;     celah-kisi  :   1rem  ;  }    @ media   (  lebar minimum   :   300px  )   {   . wrapper   {      grid-template-kolom  :  ulang (  pengisian otomatis  ,   minmax   (  250px  ,   1   fr  ));    }  }   

Solusi kedua adalah menggunakan fungsi perbandingan CSS. Solusi ini modern, dan Anda perlu memeriksa dukungan browser sebelum menggunakannya.

.pembungkus  {    tampilan  :   kisi  ;     grid-template-kolom  :  ulang (  pengisian otomatis  ,   minmax   (  min   (  100 %  ,   250px  ),   1   fr  ));     celah-kisi  :   1rem  ;  }   

Saya menggunakan fungsi perbandingan min () sebagai nilai pertama untuk minmax () . Inilah yang terjadi:

  • Jika lebar viewport kurang dari 250px , maka nilai pertama dari fungsi minmax () adalah 100% dari lebar induk.
  • Jika viewport lebih besar dari 250px , maka nilai pertama minmax () akan menjadi 250px .

Kami mencapai solusi yang lebih baik, dengan lebih sedikit CSS. Jika Anda ingin mempelajari lebih lanjut tentang fungsi perbandingan CSS, saya menulis artikel rinci tentang mereka.

Penggunaan unit ch untuk pembungkus konten

Kasus penggunaan yang menarik untuk minmax () adalah menggunakannya untuk membuat tata letak artikel . Untuk contoh ini, konten berada di tengah secara horizontal.

.pembungkus  {    tampilan  :   kisi  ;     grid-template-kolom  :   minmax   (  1rem  ,   1   fr  )   minmax   (mobil,   70ch  )   minmax   (  1rem  ,   1   fr  );     celah-kisi  :   1rem  ;  }   

Kolom pertama dan terakhir berfungsi sebagai selokan. Yang tengah adalah fokus kami. Perhatikan bahwa ia memiliki minmax (otomatis, 70ch) . Artinya, lebar maksimum kolom ini adalah 70 karakter per baris. Ini adalah panjang karakter yang ideal agar lebih mudah dibaca.

Ini dapat berfungsi dengan baik untuk seluler, karena kolom pertama dan terakhir akan diciutkan dengan lebar minimum 1rem . Lihat gambar di bawah ini:

Sisi negatif dari penggunaan pas otomatis secara tidak bertanggung jawab

Mungkin Anda tergoda untuk menggunakan pas otomatis . Sisi negatifnya adalah jika kontennya dinamis dan Anda tidak memiliki kendali, banyak hal dapat rusak.

.pembungkus  {    tampilan  :   kisi  ;     grid-template-kolom  :  ulang (  pas otomatis  ,   minmax   (  250px  ,   1   fr  ));     celah-kisi  :   1rem  ;  }   

Kotak kartu yang terlihat sempurna jika kita memiliki empat kolom. Namun, bila hanya ada satu kartu saja, maka akan berkembang untuk mengisi sisa ruang yang tersedia.

Ini tidak bagus. Alasannya adalah jika komponen kartu memiliki gambar dengan teks, misalnya, itu akan memperluas gambar untuk mengisi lebar penuh, yang membuat gambar terlihat sangat buruk. Berikut adalah contoh visual yang menggambarkan masalah tersebut.

Apakah Anda melihat masalahnya sekarang? Harap gunakan pas otomatis secara responsif. Mungkin tidak masalah untuk menggunakannya jika Anda tidak memiliki gambar. Namun, jika komponen yang Anda kerjakan memiliki gambar, saya tidak menyarankan untuk menggunakannya.

Saya menulis sebuah ebook

Dengan senang hati saya beri tahu Anda bahwa saya menulis e-book tentang Debugging CSS.

Jika Anda tertarik, kunjungi debuggingcss .com untuk pratinjau gratis.

Read More

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments