Tinggi baris yang sama dalam CSS Grid Layout

Saya menyimpulkan bahwa ini tidak mungkin dicapai dengan menggunakan Flexbox, karena setiap baris hanya dapat menjadi ketinggian minimal yang diperlukan untuk menyesuaikan elemennya, tetapi dapatkah ini dicapai dengan menggunakan CSS Grid yang lebih baru?

Agar jelas, saya ingin ketinggian yang sama untuk semua elemen dalam kisi di semua baris, tidak hanya per baris. Pada dasarnya, "sel" tertinggi harus menentukan tinggi semua sel, bukan hanya sel dalam barisnya.

Jawaban singkat

Jika tujuannya adalah untuk membuat kisi dengan tinggi baris yang sama, di mana sel tertinggi dalam kisi menetapkan tinggi untuk semua baris, berikut adalah solusi cepat dan sederhana:

• Setel wadah ke grid-auto-rows: 1fr

Bagaimana itu bekerja

Tata Letak Kisi menyediakan unit untuk menetapkan panjang yang fleksibel dalam wadah kisi. Ini adalah frunitnya. Ini dirancang untuk mendistribusikan ruang kosong di wadah dan agak mirip dengan flex-growproperti di flexbox.

Jika Anda menyetel semua baris dalam wadah petak menjadi 1fr, katakanlah seperti ini:

grid-auto-rows: 1fr;

... maka semua baris akan memiliki tinggi yang sama.

Ini tidak benar-benar masuk akal karena frseharusnya mendistribusikan ruang kosong. Dan jika beberapa baris memiliki konten dengan ketinggian berbeda, maka ketika ruang didistribusikan, beberapa baris akan secara proporsional lebih kecil dan lebih tinggi.

Kecuali , terkubur jauh di dalam spesifikasi grid adalah nugget kecil ini:

7.2.3. Panjang Fleksibel: fr unit

...

Ketika ruang yang tersedia tidak terbatas (yang terjadi ketika lebar atau tinggi wadah kisi tidak terbatas), frtrek kisi berukuran fleksibel ( ) disesuaikan dengan isinya sambil mempertahankan proporsinya masing-masing.

Ukuran yang digunakan dari setiap jalur bingkai berukuran fleksibel dihitung dengan menentukan max-contentukuran setiap jalur bingkai berukuran fleksibel dan membagi ukuran tersebut dengan faktor fleksibel masing-masing untuk menentukan " 1fr ukuran hipotetis ".

Maksimumnya digunakan sebagai 1frpanjang yang ditentukan (fraksi fleksibel), yang kemudian dikalikan dengan faktor fleksibel setiap jalur kisi untuk menentukan ukuran akhirnya.

Jadi, jika saya membacanya dengan benar, ketika berhadapan dengan kisi berukuran dinamis (misalnya, tingginya tidak pasti), trek kisi (baris, dalam hal ini) disesuaikan dengan isinya.

Tinggi setiap baris ditentukan oleh max-contentitem grid tertinggi ( ).

Tinggi maksimum baris tersebut menjadi panjang 1fr.

Begitulah cara 1frmembuat baris dengan tinggi yang sama dalam wadah grid.

Mengapa flexbox bukanlah pilihan

Seperti disebutkan dalam pertanyaan, baris dengan tinggi yang sama tidak dimungkinkan dengan flexbox.

Item lentur bisa memiliki tinggi yang sama di baris yang sama, tetapi tidak di beberapa baris.

Perilaku ini ditentukan dalam spesifikasi flexbox:

6. Garis Fleksibel

Dalam penampung fleksibel multi-baris, ukuran silang setiap baris adalah ukuran minimum yang diperlukan untuk memuat item fleksibel di baris.

Dengan kata lain, jika ada beberapa baris dalam wadah fleksibel berbasis baris, tinggi setiap baris ("ukuran silang") adalah tinggi minimum yang diperlukan untuk memuat item fleksibel pada baris tersebut.

Jawaban singkatnya adalah pengaturan grid-auto-rows: 1fr;pada wadah grid menyelesaikan apa yang ditanyakan.

https://codepen.io/Hlsg/pen/EXKJba