Grid CSS: kata kunci de dimensionamento

Nota:Saya baru sahaja menterjemah teks di bawah dan menyiarkannya di sini. Rujukan ada di penghujung artikel ini.

Helo. Hari ini saya ingin bercakap tentang beberapa kata kunci Grid CSS khas yang berguna untuk menentukan saiz trek grid. Keupayaan untuk menggunakan kata kunci ini akan membolehkan anda menentukan dengan tepat saiz trek grid yang dikehendaki. Jadi, jom.

Artikel ini adalah sebahagian daripada pengenalan saya kepada siri Grid CSS. Jika anda ingin menyemak catatan saya sebelum ini, di sini anda boleh mencari indeks penuh.

Memperkenalkan kata kunci saiz

Mengenai Grid CSS, terdapat hanya tiga kata kunci yang boleh anda gunakan untuk menentukan saiz trek. Kata kunci ini ialah auto, kandungan min dan kandungan maks. Kesemuanya boleh digunakan dalam sifat CSS grid-template-colums dan grid-template-rows.

Kandungan min dan kandungan maks

Jika anda ingin menjadikan saiz trek grid bergantung pada kandungannya, anda mesti menggunakan salah satu daripada dua kata kunci: kandungan min atau kandungan maksimum.Trek grid kandungan minakan cuba mengekalkan saiz minimum tanpa melimpahi kandungannya.Runut grid kandungan maksimum, bagaimanapun, menganggap bahawa ruang kosong untuk berkembang adalah tidak terhingga dan menganggap lebar yang sesuai untuk kandungan anda.

Biar saya tunjukkan beberapa contoh yang menunjukkan perbezaan antara kata kunci yang disebutkan. Perlu diingat bahawa setiap imej mengandungi dua bekas: bekas denganlajur grid kandungan mindi sebelah kiri dan bekas denganlajur grid kandungan maksimumdi sebelah kanan.

Seperti yang anda lihat di sini, tiada perbezaan dalam saiz antara lajur kandungan min dan kandungan maksimum. Sebabnya ialah imej itu mempunyai "saiz tetap lalai" yang tidak akan berubah melainkan anda secara eksplisit memberitahunya untuk berubah. Kandungan teks, sebaliknya, mempunyai keupayaan untuk "memampatkan" saiznya bergantung pada keadaan. Pemampatan ini dilakukan dengan menggunakanpembungkusan teks(pembungkusan teks), iaitu perkataan tunggal tidak dibalut. Mengetahui perkara ini, mari kita gantikan imej dalam contoh di atas dengan beberapa teks.

Kali ini, lebar lajur berbeza. Lajurkandungan minmemaksa kandungan teksnya untuk "membalut" manakala lajurkandungan maksimummengembang dengan begitu banyak sehingga tiada pembalut teks diperlukan. Harap maklum bahawa lajurkandungan minmempunyai lebar yang sama dengan perkataan terpanjang dan lajurkandungan maksimumkini lebih luas daripada bekas itu sendiri.

Apakah yang akan berlaku apabila lajur mengandungi lebih daripada satu jenis kandungan? Di bawah ialah contoh lajur yang mengandungi imej dan teks.

Dalam kedua-dua kes, elemen terluas menentukan saiz lajur. Dalam keskandungan min, elemen ini ialah imej atau perkataan terpanjang. Dalam kes lajurlebar maksimum, ini ialah imej atau keseluruhan teks. Perhatikan bagaimana kedua-dua jenis kandungan dipisahkan secara menegak dalam lajur. Saya ingin membincangkan tingkah laku ini dalam salah satu artikel saya yang akan datang.

Auto kata kunci

Kata kunciautoberkaitan dengan unitfryang saya terangkan dalam dua artikel sebelumnya. Ia juga menentukan bahawa trek grid mesti "mengisi" semua ruang yang tersedia pada paksi tertentu.

.container { /** ... **/ grid-template-columns: auto auto; }

Walau bagaimanapun, terdapat dua perbezaan utama antara kata kunci auto dan unit fr. Pertama, kata kunciautobukan satu unit, jadi anda tidak boleh menggunakannya dengan nilai berangka (cth. 2auto) seperti yang anda boleh gunakan denganfr. Kedua, kata kunci auto sentiasa "kalah" dengan unitfr, apabila kedua-duanya digunakan bersama. Lihat contoh di bawah.

.container { /** ... **/ grid-template-columns: auto 1fr; }

Anda boleh mengharapkan auto lajur untuk "mengisi" jumlah ruang yang sama dengan lajur fr dalam dimensi mendatar. Walau bagaimanapun, kehadiran lajur fr menyebabkan lajur secara automatik "mengecilkan" saiznya kepada saiz kandungan yang ada.

Observe que, no caso de text content, aauto grid trackse comporta de forma diferente damin-content/max-content grid track. Quando auto é misturado com fr, aauto-tracknunca força o text content a "wrap", a menos que a auto-track "fill" (preencha) todo o espaço disponível.

.container { /** ... **/ width: 200px; grid-template-columns: auto 1fr; }

Obrigado por ler este pequeno artigo. Se quiser ler mais conteúdo como este, siga minha conta dev.to ou twitter. Além disso, sinta-se à vontade para me dar qualquer tipo de feedback. Eu adoraria ler seus comentários. Vejo você em breve no meu próximo artigo!

PS. Se quiser apoiar meu trabalho, ficarei grato por uma xícara de café. Obrigado. ❤️

Fonte

Artigo escrito porMateusz Kirmuć.

Atas ialah kandungan terperinci Grid CSS: kata kunci de dimensionamento. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!