css - tabelle - table html




Impedisci ai contenuti di espandere gli elementi della griglia (2)

La risposta precedente è abbastanza buona, ma volevo anche menzionare che esiste un layout fisso equivalente per le griglie, devi solo scrivere minmax(0, 1fr) invece di 1fr come dimensione della traccia.

TL; DR: Esiste qualcosa come il table-layout: fixed per le griglie CSS?

Ho cercato di 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 si ingrandirà e supererà la dimensione 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: auto e min-height: auto .

È possibile ignorare questo comportamento impostando gli elementi della griglia su min-width: 0 , min-height: 0 o overflow con qualsiasi valore diverso da 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 valore auto di min-width min-height / min-height minima applica anche una dimensione minima automatica nell'asse specificato agli elementi della griglia il 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?




css-grid