Layout Grid CSS Cara Penggunaan minmax ()

The Modul Layout Grid CSS mengambil reka bentuk responsif ke peringkat seterusnya dengan memperkenalkan a jenis fleksibiliti yang baru yang tidak pernah dilihat sebelum ini. Sekarang, kita tidak boleh sahaja mentakrifkan grid khusus blazingly cepat semata-mata dengan CSS tulen, tetapi CSS Grid juga ada banyak permata tersembunyi yang membolehkan kami untuk menambah taraf grid dan mencapai susun atur yang rumit.

The minmax () fungsi adalah salah satu ciri yang kurang dikenali ini. Ia menjadikannya mungkin untuk menentukan saiz trek grid sebagai minimum kepada julat maksimum supaya grid boleh menyesuaikan diri dengan viewport setiap pengguna cara terbaik.

Sintaks

Sintaks bagi minmax () fungsi adalah agak mudah, ia mengambil masa dua hujah: minimum dan nilai maksimum:

 minmax (min, maksimum) 

The min nilai perlu lebih kecil daripada maks, sebaliknya maks tidak diabaikan oleh penyemak imbas.

Kita boleh menggunakannya minmax () berfungsi sebagai nilai grid-template-columns atau grid-template-baris harta (atau kedua-duanya). Dalam contoh kami, kami akan menggunakan bekas, kerana ia adalah kes penggunaan yang lebih kerap.

 .bekas paparan: grid; grid-template-columns: minmax (100px, 200px) 1fr 1fr; grid-template-lines: 100px 100px 100px; grid-jurang: 10px;  

Dalam demo Codepen di bawah, anda boleh mencari Kod HTML dan CSS kami akan menggunakan seluruh artikel.

Kita boleh guna jenis nilai yang berbeza di dalam minmax () fungsi, semuanya bergantung pada jenis grid khusus yang kita mahu buat.

Nilai panjang statik

Terdapat dua cara asas bagaimana kita boleh menggunakannya minmax () fungsi dengan nilai panjang statik.

Pertama, kita boleh gunakan minmax () hanya untuk satu lajur grid dan menentukan lebar lajur yang lain sebagai nilai statik yang mudah (piksel di sini).

 grid-template-columns: minmax (100px, 200px) 200px 200px; 

Pada demo gif di bawah, anda dapat melihat bahawa susun atur ini tidak responsif, Walau bagaimanapun lajur pertama mempunyai beberapa fleksibiliti. Lajur kedua dan ketiga mengekalkan lebar tetap mereka (200px) manakala lajur pertama berkisar antara 100px hingga 200px, berdasarkan ruang yang ada.

Kedua, kita dapat menentukan lebarnya lebih daripada satu lajur grid menggunakan minmax (). Nilai min dan max adalah statik, jadi secara lalai, grid itu tidak responsif. Walau bagaimanapun, lajur itu sendiri fleksibel, tetapi hanya antara 100px dan 200px. Mereka tumbuh dan mengecut secara serentak seperti yang kita ubah saiz paparan.

 grid-template-column: minmax (100px, 200px) minmax (100px, 200px) minmax (100px, 200px); 

Perhatikan bahawa kita juga boleh menggunakan ulang () fungsi togehter dengan minmax (). Oleh itu, coretan kod sebelumnya juga boleh ditulis seperti ini:

 grid-template-columns: repeat (3, minmax (100px, 200px)); 

Nilai panjang dinamik

Selain daripada nilai statik, minmax () fungsi juga diterima peratusan unit dan juga unit pecahan (fr) baru sebagai hujah. Dengan menggunakannya, kita boleh mencapai grid khusus yang kedua-duanya responsif dan menukar dimensi mereka mengikut ruang yang ada.

Kod di bawah menghasilkan grid di mana lebar lajur pertama berkisar antara 50% hingga 80% manakala yang kedua dan ketiga sama rata berkongsi ruang yang tinggal.

 grid-template-columns: minmax (50%, 80%) 1fr 1fr; 

Apabila kita menggunakan nilai dinamik dengan minmax () fungsi, penting untuk menubuhkan a peraturan yang masuk akal. Izinkan saya tunjukkan contoh di mana grid jatuh selain:

 grid-template-columns: minmax (1fr, 2fr) 1fr 1fr; 

Peraturan ini tidak masuk akal, seperti penyemak imbas tidak dapat membuat keputusan yang bernilai untuk diberikan kepada minmax () fungsi. Nilai minimum akan membawa kepada a 1fr 1fr 1fr lebar lajur, manakala maksimum kepada 2fr 1fr 1fr. Tetapi, kedua-duanya adalah mungkin walaupun pada skrin yang sangat kecil. Ada tiada pelayar boleh dikaitkan.

Inilah hasilnya:

Menggabungkan nilai statik dan dinamik

Ia juga mungkin untuk menggabungkan nilai statik dan dinamik. Contohnya, dalam demo Codepen di atas, saya menggunakannya minmax (100px, 200px) 1fr 1fr; peraturan yang menghasilkan grid di mana lajur pertama berkisar antara 100px dan 200px dan ruang yang tinggal adalah sama rata antara dua yang lain.

 grid-template-columns: minmax (100px, 200px) 1fr 1fr; 

Ia menarik untuk melihat bahawa apabila viewport berkembang, pertama, lajur pertama tumbuh dari 100px ke 200px. Dua yang lain, yang diperintah oleh unit fr, mula berkembang hanya selepas yang pertama mencapai lebar maksima. Ini adalah logik, kerana matlamat unit fraksinya adalah membahagikan ruang yang ada (baki).

The min-kandungan, kandungan maksimum, dan auto kata kunci

Ada jenis nilai ketiga kita boleh menyerahkan kepada minmax () fungsi. The min-kandungan, kandungan maksimum, dan auto kata kunci berkaitan dimensi trek grid ke kandungannya.

kandungan maksimum

The kandungan maksimum kata kunci mengarahkan pelayar bahawa lajur grid perlu selagi unsur paling luas ia mengandungi.

Pada demo di bawah, saya meletakkan a Imej 400px lebar di dalam trek grid pertama, dan menggunakan peraturan CSS berikut (anda boleh menemui demo Codepen dengan kod diubahsuai penuh pada akhir artikel):

 .bekas grid-template-columns: max-content 1fr 1fr; / ** * Sama dengan notasi minmax (): * grid-template-columns: minmax (max-content, max-content) 1fr 1fr; * / 

Saya tidak pernah menggunakannya minmax () notasi lagi, tetapi dalam komen kod di atas, anda dapat melihat bagaimana kod yang sama akan kelihatan seperti itu (walaupun terdapat keperluan di sini).

Seperti yang dapat anda lihat, lajur grid pertama adalah seluas unsurnya yang paling luas (di sini imej). Dengan cara ini, pengguna sentiasa dapat melihat imej itu dalam saiz penuh. Walau bagaimanapun, di bawah saiz paparan tertentu, susun atur ini adalah tidak responsif.

min-kandungan

The min-kandungan kata kunci mengarahkan penyemak imbas bahawa lajur grid perlu selebar unsur sempit yang terkandung, dengan cara itu tidak membawa kepada limpahan.

Mari lihat bagaimana demo sebelumnya dengan imej kelihatan seperti jika kita menukar nilai lajur pertama kepada min-kandungan:

 .bekas grid-template-columns: min-content 1fr 1fr; / ** * Sama dengan notasi minmax (): * grid-template-columns: minmax (min-content, min-content) 1fr 1fr; * / 

Saya meninggalkan latar belakang hijau di bawah imej supaya anda dapat melihat saiz penuh sel grid pertama.

Seperti yang dapat anda lihat, lajur pertama mengekalkan lebar terkecil itu boleh dicapai tanpa limpahan. Dalam contoh ini, ini akan ditakrifkan oleh lebar minimum sel grid ke-4 dan ke-7, yang berpunca dari padding dan Saiz huruf sifat, sebagai imej dalam sel pertama boleh dikecilkan kepada sifar tanpa limpahan.

Jika sel grid mengandungi rentetan teks, min-kandungan akan menjadi sama dengan lebar perkataan terpanjang, kerana itu unsur terkecil yang tidak dapat dikurangkan lagi tanpa melimpah. Berikut adalah artikel hebat oleh BitsOfCode di mana anda dapat melihat bagaimana min-kandungan dan kandungan maksimum berkelakuan apabila sel grid mengandungi rentetan teks.

Menggunakan min-kandungan dan kandungan maksimum bersama-sama

Jika kita gunakan min-kandungan dan kandungan maksimum bersama-sama di dalam minmax () fungsi kita mendapat ruang grid yang:

1. adalah responsif
2. tidak mempunyai limpahan
3. tidak berkembang lebih luas daripada unsur yang paling luas

 .container grid-template-columns: minmax (min-content, max-content) 1fr 1fr;  

Kita juga boleh menggunakannya min-kandungan dan kandungan maksimum kata kunci bersama-sama dengan nilai panjang yang lain di dalam minmax () berfungsi, sehingga peraturannya masuk akal. Contohnya, minmax (25%, max-content) atau minmax (kandungan min, 300px) akan menjadi peraturan yang sah.

auto

Akhirnya, kita juga boleh menggunakan auto kata kunci sebagai perdebatan minmax () fungsi.

Bila auto adalah digunakan sebagai maksimum, nilainya adalah sama dengan kandungan maksimum.

Bila ia digunakan sebagai minimum, nilainya ditentukan oleh min-lebar / min-ketinggian peraturan, yang bermaksud itu auto kadangkala sama dengan min-kandungan, tetapi tidak selalu.

Dalam contoh terdahulu kami, min-kandungan sama dengan auto, kerana lebar minimum ruang grid pertama selalu lebih kecil daripada ketinggian minimumnya. Jadi, peraturan CSS yang dimiliki:

 .container grid-template-columns: minmax (min-content, max-content) 1fr 1fr;  

boleh juga ditulis seperti ini:

 .bekas grid-template-columns: minmax (auto, auto) 1fr 1fr;  

The auto kata kunci juga boleh digunakan bersama dengan unit statik dan dinamik yang lain (piksel, unit fr, peratusan, dll.) di dalam minmax () fungsi, contohnya minmax (auto, 300px) akan menjadi peraturan yang sah.

Anda boleh menguji bagaimana min-kandungan, kandungan maksimum, dan auto kata kunci berfungsi dengan minmax () fungsi dalam demo Codepen berikut: