Layout Kotak CSS Cara Menggunakan minmax ()

Itu Modul Tata Letak Kotak CSS membawa desain responsif ke tingkat berikutnya dengan memperkenalkan a jenis fleksibilitas baru yang belum pernah terlihat sebelumnya. Sekarang, kita tidak bisa hanya tentukan kisi khusus sangat cepat hanya dengan CSS murni, tetapi CSS Grid juga memilikinya banyak permata tersembunyi yang memungkinkan kita untuk lebih lanjut mengubah jaringan dan mencapai tata letak yang rumit.

Itu minmax () fungsi adalah salah satu fitur yang kurang dikenal. Itu memungkinkan untuk menentukan ukuran trek kotak sebagai rentang minimum hingga maksimum sehingga grid dapat beradaptasi dengan viewport setiap pengguna dengan cara terbaik.

Sintaksis

Sintaks dari minmax () fungsi relatif sederhana, dibutuhkan dua argumen: nilai minimum dan maksimum:

 minmax (min, maks) 

Itu min nilai harus lebih kecil daripada maks, jika tidak maks diabaikan oleh browser.

Kita bisa menggunakan minmax () berfungsi sebagai nilai dari grid-template-kolom atau grid-template-rows properti (atau keduanya). Dalam contoh kita, kita akan menggunakan yang pertama, karena ini adalah kasus penggunaan yang jauh lebih sering.

 .wadah display: grid; grid-template-kolom: minmax (100px, 200px) 1fr 1fr; grid-template-rows: 100px 100px 100px; celah jaringan: 10px;  

Dalam demo Codepen di bawah ini, Anda dapat menemukan Kode HTML dan CSS kami akan menggunakan seluruh artikel.

Kita bisa gunakan berbagai jenis nilai di dalam minmax () fungsi, semua tergantung pada jenis kotak kustom apa yang ingin kita buat.

Nilai panjang statis

Ada dua cara dasar bagaimana kita dapat menggunakan minmax () berfungsi dengan nilai panjang statis.

Pertama, kita bisa menggunakan minmax () hanya untuk satu kolom kotak dan tentukan lebar kolom lainnya sebagai nilai statis sederhana (piksel di sini).

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

Pada demo gif di bawah ini, Anda dapat melihat bahwa tata letak ini tidak responsif, Namun kolom pertama memiliki beberapa fleksibilitas. Kolom kedua dan ketiga mempertahankan lebar tetap (200px) sedangkan kolom pertama berkisar dari 100px hingga 200px, berdasarkan ruang yang tersedia.

Kedua, kita dapat mendefinisikan lebar lebih dari satu kolom kotak menggunakan minmax (). Nilai min dan maks keduanya statis, jadi secara default, kisi-kisinya tidak responsif. Namun, kolom itu sendiri fleksibel, tetapi hanya antara 100px dan 200px. Mereka tumbuh dan menyusut secara bersamaan karena kami mengubah ukuran viewport.

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

Perhatikan bahwa kita juga bisa menggunakan ulangi() fungsi bersama dengan minmax (). Jadi, potongan kode sebelumnya juga dapat ditulis seperti ini:

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

Nilai panjang dinamis

Terlepas dari nilai statis, the minmax () Fungsi juga menerima unit persentase dan unit fraksi (fr) baru sebagai argumen. Dengan menggunakannya, kita dapat mencapai kisi kustom yang sama-sama responsif dan ubah dimensi mereka sesuai dengan ruang yang tersedia.

Kode di bawah ini menghasilkan kotak di mana lebar kolom pertama berkisar antara 50% dan 80% sedangkan yang kedua dan ketiga berbagi ruang yang tersisa secara merata.

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

Ketika kami menggunakan nilai dinamis dengan minmax () fungsi, sangat penting untuk mengatur aturan yang masuk akal. Mari saya tunjukkan contoh dimana grid berantakan:

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

Aturan ini tidak masuk akal, seperti browsernya tidak dapat memutuskan nilai yang akan ditetapkan ke minmax () fungsi. Nilai minimum akan mengarah pada a 1fr 1fr 1fr lebar kolom, sedangkan maksimum untuk 2fr 1fr 1fr. Namun, keduanya dimungkinkan bahkan pada layar yang sangat kecil. Ada tidak ada hubungannya dengan browser.

Inilah hasilnya:

Gabungkan nilai statis dan dinamis

Itu juga mungkin menggabungkan nilai statis dan dinamis. Misalnya, dalam demo Codepen di atas, saya menggunakan minmax (100px, 200px) 1fr 1fr; aturan yang menghasilkan kotak di mana kolom pertama berkisar antara 100px dan 200px dan ruang yang tersisa adalah dibagi secara merata antara dua lainnya.

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

Sangat menarik untuk mengamati bahwa ketika viewport tumbuh, pertama, kolom pertama tumbuh dari 100px menjadi 200px. Dua lainnya, diperintah oleh unit fr, mulai tumbuh hanya setelah yang pertama mencapai lebar maksimum. Ini logis, karena tujuan dari unit pecahan adalah untuk membagi ruang yang tersedia (tersisa).

Itu konten min, konten maksimal, dan mobil kata kunci

Ada jenis nilai ketiga kita dapat menetapkan untuk minmax () fungsi. Itu konten min, konten maksimal, dan mobil kata kunci menghubungkan dimensi trek kotak ke konten yang dikandungnya.

konten maksimal

Itu konten maksimal kata kunci mengarahkan browser yang diperlukan kolom kisi selebar elemen terluas yang dikandungnya.

Pada demo di bawah ini, saya menempatkan a Gambar selebar 400px di dalam trek kotak pertama, dan menggunakan aturan CSS berikut (Anda dapat menemukan demo Codepen dengan kode yang dimodifikasi penuh di akhir artikel):

 .container grid-templat-kolom: max-konten 1fr 1fr; / ** * Sama dengan notasi minmax (): * grid-template-kolom: minmax (konten maksimal, konten maksimal) 1fr 1fr; * / 

Saya belum pernah menggunakan minmax () belum notasi, tetapi dalam komentar kode di atas Anda dapat melihat bagaimana kode yang sama akan terlihat seperti itu (meskipun berlebihan di sini).

Seperti yang Anda lihat, kolom kotak pertama selebar elemen terluasnya (di sini gambar). Dengan cara ini, pengguna selalu dapat melihat gambar dalam ukuran penuh. Namun, di bawah ukuran viewport tertentu, tata letak ini tidak responsif.

konten min

Itu konten min kata kunci mengarahkan peramban yang dibutuhkan kolom kotak selebar elemen tersempit yang dikandungnya, dengan cara itu tidak mengarah ke luapan.

Mari kita lihat seperti apa bentuk demo sebelumnya dengan gambar jika kita mengubah nilai kolom pertama konten min:

 .wadah kisi-templat-kolom: min-konten 1fr 1fr; / ** * Sama dengan notasi minmax (): * grid-template-kolom: minmax (min-content, min-content) 1fr 1fr; * / 

Saya meninggalkan latar belakang hijau di bawah gambar sehingga Anda dapat melihat ukuran penuh sel kotak pertama.

Seperti yang Anda lihat, kolom pertama mempertahankan lebar terkecil itu dapat dicapai tanpa overflow. Dalam contoh ini, ini akan ditentukan oleh lebar minimal sel kotak ke-4 dan ke-7, yang berasal dari lapisan dan ukuran huruf properti, seperti gambar di sel pertama bisa menyusut menjadi nol tanpa luapan.

Jika sel kotak berisi string teks, konten min akan menjadi sama dengan lebar kata terpanjang, karena itulah elemen terkecil yang tidak dapat menyusut lebih jauh tanpa melimpah. Inilah artikel yang bagus dari BitsOfCode di mana Anda dapat melihat caranya konten min dan konten maksimal berperilaku ketika sel kotak berisi string teks.

Menggunakan konten min dan konten maksimal bersama

Jika kita menggunakan konten min dan konten maksimal bersama di dalam minmax () berfungsi kita mendapatkan kolom kotak yang:

1. responsif
2. tidak memiliki kelebihan
3. tidak tumbuh lebih luas dari elemen terluasnya

 .container grid-templat-kolom: minmax (konten min, konten maksimal) 1fr 1fr;  

Kita juga bisa menggunakan konten min dan konten maksimal kata kunci bersama dengan nilai panjang lainnya di dalam minmax () berfungsi, sampai aturan masuk akal. Contohnya, minmax (25%, maks-konten) atau minmax (konten min, 300px) akan menjadi aturan yang valid.

mobil

Akhirnya, kita juga bisa menggunakan mobil kata kunci sebagai argumen dari minmax () fungsi.

Kapan mobil aku s digunakan sebagai maksimum, nilainya identik dengan konten maksimal.

Kapan itu digunakan sebagai minimum, nilainya ditentukan oleh min-width / min-height aturan, yang berarti itu mobil terkadang identik dengan konten min, tapi tidak selalu.

Dalam contoh kita sebelumnya, konten min tidak sama dengan mobil, karena lebar minimal kolom kotak pertama selalu lebih kecil dari tinggi minimalnya. Jadi, aturan CSS yang dimiliki:

 .container grid-templat-kolom: minmax (konten min, konten maksimal) 1fr 1fr;  

bisa juga ditulis seperti ini:

 .container grid-template-kolom: minmax (otomatis, otomatis) 1fr 1fr;  

Itu mobil kata kunci juga bisa digunakan bersama dengan unit statis dan dinamis lainnya (piksel, fr unit, persentase, dll.) di dalam minmax () fungsi, misalnya minmax (otomatis, 300px) akan menjadi aturan yang valid.

Anda bisa menguji caranya konten min, konten maksimal, dan mobil kata kunci berfungsi dengan minmax () fungsi dalam demo Codepen berikut: