Impedisci ai contenuti di espandere gli elementi della griglia

TL; DR: Esiste qualcosa di simile table-layout: fixedalle griglie CSS?

Ho provato a creare un calendario con vista annuale con una grande griglia 4x3 per i mesi e in essa nidificate griglie 7x6 per i giorni.

Il calendario dovrebbe riempire la pagina, quindi il contenitore della griglia dell'anno ottiene una larghezza e un'altezza del 100% ciascuno.

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

Ecco un esempio funzionante: https://codepen.io/loilo/full/ryXLpO/

Per semplicità, ogni mese in quella penna ci sono 31 giorni e inizia un lunedì.

Ho anche scelto una dimensione del carattere ridicolmente piccola per dimostrare il problema:

Gli elementi della griglia (= celle giornaliere) sono piuttosto concentrati in quanto ce ne sono diverse centinaia nella pagina. E non appena le etichette dei numeri del giorno diventano troppo grandi (sentiti libero di giocare con la dimensione del carattere nella penna usando i pulsanti in alto a sinistra) la griglia aumenterà di dimensioni e supererà le dimensioni del corpo della pagina.

C'è un modo per prevenire questo comportamento?

Inizialmente ho dichiarato che la mia griglia dell'anno era al 100% in larghezza e altezza, quindi è probabilmente il punto da cui partire, ma non sono riuscito a trovare alcuna proprietà CSS relativa alla griglia che si sarebbe adattata a tale necessità.

Dichiarazione di non responsabilità: sono consapevole del fatto che esistono modi abbastanza semplici per modellare quel calendario solo senza utilizzare il layout griglia CSS. Tuttavia, questa domanda riguarda più le conoscenze generali sull'argomento che la soluzione dell'esempio concreto.

Per impostazione predefinita, un elemento della griglia non può essere inferiore alla dimensione del suo contenuto.

Gli elementi della griglia hanno una dimensione iniziale di min-width: autoe min-height: auto.

È possibile ignorare questo comportamento impostando elementi della griglia su min-width: 0, min-height: 0o overflowcon qualsiasi valore diverso visible.

Dalle specifiche:

6.6. Dimensione minima automatica degli elementi griglia

Per fornire una dimensione minima predefinita più ragionevole per gli elementi della griglia, questa specifica definisce che il autovalore di min-width/ min-heightapplica anche una dimensione minima automatica nell'asse specificato agli elementi della griglia di cui overflowè visible. (L'effetto è analogo alla dimensione minima automatica imposta agli oggetti flessibili.)

Ecco una spiegazione più dettagliata relativa agli articoli flessibili, ma si applica anche agli elementi della griglia:

• Perché gli oggetti flessibili non si riducono oltre le dimensioni del contenuto?

Questo post copre anche potenziali problemi con contenitori nidificati e differenze di rendering note tra i principali browser .

Per correggere il layout, apporta queste modifiche al codice:

.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 rivisto

1fr vs minmax(0, 1fr)

La soluzione sopra funziona a livello di elemento della griglia. Per una soluzione a livello di container, vedi questo post:

• Come mai minmax (0, 1fr) funziona per elementi lunghi mentre 1fr no?

La risposta precedente è abbastanza buono, ma ho anche voluto ricordare che ci sia un equivalente layout fisso per le reti, non vi resta che scrivere minmax(0, 1fr), invece di 1frcome la dimensione pista.

Le risposte esistenti risolvono la maggior parte dei casi. Tuttavia, mi sono imbattuto in un caso in cui avevo bisogno del contenuto della cella della griglia overflow: visible. L'ho risolto posizionandomi assolutamente all'interno di un involucro (non ideale, ma il migliore che conosco), in questo modo:

.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

una cosa più semplice da fare è impostare la larghezza massima dell'elemento della griglia in questo modo:

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