İçeriğin ızgara öğelerini genişletmesini önleyin

TL; DR:table-layout: fixed CSS ızgaraları gibi bir şey var mı ?

Aylar için büyük bir 4x3 ızgara ve günler için iç içe geçmiş 7x6 ızgaralarla bir yıl görünümü takvimi oluşturmaya çalıştım.

Takvim sayfayı doldurmalıdır, böylece yıl ızgarası kapsayıcısı her birinin genişliği ve yüksekliği% 100 olur.

.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);
}

İşte çalışan bir örnek: https://codepen.io/loilo/full/ryXLpO/

Basit olması için, o kalemde her ayın 31 günü vardır ve bir Pazartesi günü başlar.

Sorunu göstermek için gülünç derecede küçük bir yazı tipi boyutu da seçtim:

Kılavuz öğeleri (= gün hücreleri), sayfada birkaç yüz tane olduğu için oldukça yoğunlaştırılmıştır. Ve gün sayısı etiketleri çok büyük hale gelir gelmez (sol üstteki düğmeleri kullanarak kalemdeki yazı tipi boyutuyla oynamaktan çekinmeyin), ızgara sadece boyut olarak büyüyecek ve sayfanın gövde boyutunu aşacaktır.

Bu davranışı önlemenin bir yolu var mı?

Başlangıçta yıl ızgaramın genişlik ve yükseklikte% 100 olduğunu ilan ettim, bu yüzden muhtemelen başlamam gereken nokta bu, ancak bu ihtiyaca uyan ızgarayla ilgili CSS özelliği bulamadım.

Sorumluluk Reddi: Bu takvimi CSS Izgara Düzeni kullanmadan şekillendirmenin oldukça kolay yolları olduğunun farkındayım. Ancak bu soru, somut örneği çözmekten çok konuyla ilgili genel bilgilerle ilgilidir.

Varsayılan olarak, bir ızgara öğesi içeriğinin boyutundan daha küçük olamaz.

Grid öğelerinin başlangıç ​​boyutu min-width: autove min-height: auto.

Sen hiç ızgara öğelerini ayarlayarak bu davranışı geçersiz kılabilirsiniz min-width: 0, min-height: 0ya overflowdışında herhangi bir değere sahip visible.

Spesifikasyondan:

6.6. Otomatik Minimum Izgara Öğeleri Boyutu

Izgara öğeler, bu tanımlama belirtir için daha makul bir varsayılan minimum boyutu sağlamak autodeğeri min-width/ min-heightayrıca, ızgara öğelerine belirtilen eksen bir otomatik minimum boyutu geçerli overflowolup visible. (Etki, esnek öğelere uygulanan otomatik minimum boyuta benzer.)

İşte esnek öğeleri kapsayan daha ayrıntılı bir açıklama, ancak ızgara öğeleri için de geçerlidir:

• Esnek öğeler neden geçmiş içerik boyutunu küçültmüyor?

Bu gönderi aynı zamanda iç içe geçmiş kapsayıcılarla ilgili olası sorunları ve başlıca tarayıcılar arasındaki bilinen oluşturma farklılıklarını da kapsar .

Düzeninizi düzeltmek için kodunuzda şu ayarlamaları yapın:

.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 */
}

revize kod parçası

1fr vs minmax(0, 1fr)

Yukarıdaki çözüm, ızgara öğesi düzeyinde çalışır. Kapsayıcı düzeyinde bir çözüm için şu gönderiye bakın:

• Nasıl oluyor da minmax (0, 1fr) uzun elementler için işe yararken 1fr çalışmıyor?

Önceki cevabı oldukça iyidir, ama ben de orada bulunduğunu hatırlatmak istedik olan ızgaraları için sabit düzen eşdeğer, sadece yazmak gerekir minmax(0, 1fr)yerine 1frparkur büyüklüğü gibi.

Mevcut cevaplar çoğu durumu çözer. Ancak, ızgara hücresinin içeriğinin olması gereken bir durumla karşılaştım overflow: visible. Bunu kesinlikle bir sarmalayıcıya yerleştirerek çözdüm (ideal değil, ama bildiğim en iyisi), şöyle:

.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