Item grid yang mengehadkan pengembangan kandungan

Question

TL: Adakah terdapat sifat yang serupa dengan table-layout: fixed

---

Saya cuba mencipta kalendar paparan tahun dengan grid 4x3 yang besar untuk bulan-bulan dan bersarang di dalamnya ialah grid 7x6 untuk tarikh.

Kalendar harus memenuhi seluruh halaman, jadi lebar dan tinggi bekas grid tahun ditetapkan kepada 100%.

.year-grid {
  lebar: 100%;
  ketinggian: 100%;

  paparan: grid;
  grid-template: ulang(3, 1fr) / ulang(4, 1fr);
}

.bulan-grid {
  paparan: grid;
  grid-template: ulang(6, 1fr) / ulang(7, 1fr);
}

Berikut ialah contoh yang berfungsi: https://codepen.io/loilo/full/ryXLpO/

Untuk memudahkan, setiap bulan dalam contoh ini mempunyai 31 hari dan bermula pada hari Isnin.

Saya juga memilih saiz fon yang sangat kecil untuk menunjukkan masalah:

Item grid (iaitu sel tarikh) sangat padat kerana terdapat ratusan sel tarikh pada halaman. Dan apabila label tarikh menjadi terlalu besar (jangan ragu untuk menggunakan butang di penjuru kiri sebelah atas untuk melaraskan saiz fon dalam contoh), grid berkembang dan melebihi had halaman.

Adakah terdapat cara untuk mencegah tingkah laku ini?

Saya pada asalnya menetapkan lebar dan ketinggian grid tahun kepada 100%, jadi itu mungkin tempat untuk bermula, tetapi saya tidak dapat mencari sebarang sifat CSS berkaitan grid untuk memenuhi keperluan ini.

Penafian: Saya tahu ada cara mudah untuk menggayakan kalendar ini tanpa menggunakan reka letak Grid CSS. Walau bagaimanapun, soalan ini lebih kepada pengetahuan umum tentang topik dan bukannya menangani contoh khusus.

Answer 1

Jawapan sebelumnya sangat bagus, tetapi saya juga ingin menyatakan bahawa terdapat cara yang setara untuk membetulkan reka letak untuk grid, anda hanya perlu menggunakan huruf besar pada trek anda sebagai minmax(0, 1fr)而不是1fr.

Answer 2

Secara lalai, saiz item grid tidak boleh lebih kecil daripada saiz kandungannya.

Saiz awal item grid ialah min-width: auto和min-height: auto.

Anda boleh mengatasi gelagat ini dengan menetapkan item grid kepada sebarang nilai selain daripada min-width: 0，min-height: 0或overflow（除visible).

Dari spec:

Berikut ialah penjelasan yang lebih terperinci meliputi item fleksibel, tetapi juga digunakan pada item grid:

• Mengapa item flex tidak boleh mengecil di bawah saiz kandungan?

Artikel ini juga merangkumi masalah berpotensi dengan bekas bersarang dan diketahui menyatakan perbezaan antara penyemak imbas utama.

---

Untuk membetulkan reka letak anda, buat pelarasan berikut pada kod anda:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;  /* 新增 */
  min-width: 0;   /* 新增；Firefox需要 */
}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;  /* 新增 */
  min-width: 0;      /* 新增；Firefox需要 */
}

jsFiddle Demo

---

1fr与minmax(0, 1fr)

Penyelesaian di atas beroperasi pada tahap item grid. Untuk penyelesaian peringkat kontena, lihat artikel berikut:

• Kenapa untuk elemen panjang, minmax(0, 1fr) sah tetapi 1fr tidak sah?