Cegah konten agar tidak memperluas item kisi

TL; DR: Apakah ada sesuatu seperti table-layout: fixeduntuk grid CSS?

Saya mencoba membuat kalender tampilan tahun dengan kisi-kisi besar 4x3 selama berbulan-bulan dan di dalamnya bersarang kisi-kisi 7x6 selama berhari-hari.

Kalender harus mengisi halaman, sehingga wadah kotak tahun mendapat lebar dan tinggi masing-masing 100%.

.year-grid {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template: repeat(3, 1fr) / repeat(4, 1fr);
}

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
}

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

Untuk mempermudah, setiap bulan dalam pena itu ada 31 hari dan dimulai pada hari Senin.

Saya juga memilih ukuran font yang sangat kecil untuk menunjukkan masalah:

Item kisi (= sel hari) cukup kental karena ada beberapa ratusan di halaman. Dan segera setelah label nomor hari menjadi terlalu besar (jangan ragu untuk bermain-main dengan ukuran font di pena menggunakan tombol di kiri atas) kotak hanya akan tumbuh dalam ukuran dan melebihi ukuran tubuh halaman.

Apakah ada cara untuk mencegah perilaku ini?

Saya awalnya menyatakan grid tahun saya menjadi 100% lebar dan tinggi sehingga mungkin titik untuk memulai, tapi saya tidak bisa menemukan properti CSS yang berhubungan dengan grid yang sudah cocok dengan kebutuhan itu.

Penafian: Saya sadar bahwa ada cara yang cukup mudah untuk men-style kalender itu tanpa menggunakan Layout Grid CSS. Namun, pertanyaan ini lebih tentang pengetahuan umum tentang topik daripada memecahkan contoh konkret.

Secara default, item kisi tidak boleh lebih kecil dari ukuran kontennya.

Item kisi memiliki ukuran awal min-width: autodan min-height: auto.

Anda bisa mengesampingkan perilaku ini dengan mengatur item kisi ke min-width: 0, min-height: 0atau overflowdengan nilai apa pun selain visible.

Dari spec:

6.6. Otomatis Ukuran Minimum dari Item Kisi

Untuk memberikan ukuran minimum standar lebih masuk akal untuk item grid, spesifikasi ini mendefinisikan bahwa autonilai min-width/ min-heightjuga berlaku ukuran minimum otomatis dalam sumbu ditentukan untuk item jaringan yang overflowadalah visible. (Efeknya analog dengan ukuran minimum otomatis yang dikenakan pada item fleksibel.)

Berikut adalah penjelasan yang lebih terperinci yang mencakup item fleksibel, tetapi juga berlaku untuk item kisi, juga:

• Mengapa item fleksibel tidak menyusutkan ukuran konten sebelumnya?

Posting ini juga mencakup masalah potensial dengan wadah bersarang dan perbedaan render yang diketahui di antara browser utama .

Untuk memperbaiki tata letak Anda, buat penyesuaian ini pada kode Anda:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;
  min-height: 0;  /* NEW */
  min-width: 0;   /* NEW; needed for Firefox */
}

.day-item {
  padding: 10px;
  background: #DFE7E7;
  overflow: hidden;  /* NEW */
  min-width: 0;      /* NEW; needed for Firefox */
}

codepen yang direvisi

1fr vs. minmax(0, 1fr)

Solusi di atas beroperasi pada level item grid. Untuk solusi level kontainer, lihat posting ini:

• Kenapa minmax (0, 1fr) berfungsi untuk elemen yang panjang sedangkan 1fr tidak?

Jawaban sebelumnya cukup bagus, tapi saya juga ingin menyebutkan bahwa ada adalah tata letak setara tetap untuk grid, Anda hanya perlu menulis minmax(0, 1fr)bukan 1frsebagai ukuran trek Anda.

Jawaban yang ada memecahkan sebagian besar kasus. Namun, saya mengalami kasus di mana saya membutuhkan konten sel-grid overflow: visible. Saya menyelesaikannya dengan benar-benar memposisikan dalam pembungkus (tidak ideal, tetapi yang terbaik yang saya tahu), seperti ini:

.month-grid {
  display: grid;
  grid-template: repeat(6, 1fr) / repeat(7, 1fr);
  background: #fff;
  grid-gap: 2px;  
}

.day-item-wrapper {
  position: relative;
}

.day-item {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px;

  background: rgba(0,0,0,0.1);
}

https://codepen.io/bjnsn/pen/vYYVPZv

hal yang lebih mudah untuk dilakukan adalah mengatur lebar item kisi item seperti:

//for the container
.gridContainer{
    display: grid;
    grids-templates-column: repeat (12, 1fr);
 }

 //for the grid item
 .gridItem{
       max-width: 100%;
       grid-column: span 4  //4 can be any number from1-12 as we specified in the grid template
  }