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 min akan 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 dengan lajur grid kandungan min di sebelah kiri dan bekas dengan lajur grid kandungan maksimum di 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 menggunakan pembungkusan 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. Lajur kandungan min memaksa kandungan teksnya untuk "membalut" manakala lajur kandungan maksimum mengembang dengan begitu banyak sehingga tiada pembalut teks diperlukan. Harap maklum bahawa lajur kandungan min mempunyai lebar yang sama dengan perkataan terpanjang dan lajur kandungan maksimum kini 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 kes kandungan min, elemen ini ialah imej atau perkataan terpanjang. Dalam kes lajur lebar 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 kunci auto berkaitan dengan unit fr yang 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 kunci auto bukan satu unit, jadi anda tidak boleh menggunakannya dengan nilai berangka (cth. 2auto) seperti yang anda boleh gunakan dengan fr. Kedua, kata kunci auto sentiasa "kalah" dengan unit fr, 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, a auto grid track se comporta de forma diferente da min-content/max-content grid track. Quando auto é misturado com fr, a auto-track nunca 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 por Mateusz Kirmuć.

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