Impedisci ai contenuti di espandere gli elementi della griglia


153

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.


Cosa vuoi che succeda invece? Il carattere in ogni cella può avere qualsiasi dimensione e non fa mai aumentare la dimensione della cella della griglia?
Michael Coker,

1
Esattamente. Fondamentalmente un modo più conveniente di cosa accadrebbe se impostassi le dimensioni degli elementi della griglia su valori percentuali invece che frazioni.
Loilo,

Sto fondamentalmente cercando una versione a layout di griglia del layout di tabella: fissa (vedi: codepen.io/loilo/pen/dvxpvq?editors=1100 )
Loilo

7
Questo è il più grande dolore dell'intera specifica CSS Grid. Hanno bisogno di essere un'impostazione in cui le aree della griglia non possano sfuggire alle dimensioni di nessuno dei loro contenitori della griglia padre! Così com'è, è un incubo per le strutture della griglia profondamente annidate.
Lonnie Best

Risposte:


263

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:

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:


3
Wow. È affascinante e interessante allo stesso tempo, e sicuramente non mi sarei mai inventato solo provandomi. Hai appena dato un'occhiata alle specifiche per tali informazioni? Perché dopo non sapere cosa cercare su Google, è quello che ho provato prima, ma ho finito per leggere la sezione sbagliata (dopo aver concluso la causa sbagliata del problema).
Loilo,

1
In precedenza avevo riscontrato questo problema con gli articoli flessibili . Essendo che ci sono molte somiglianze tra gli elementi flex e grid, ho pensato che il comportamento potesse essere lo stesso e azzerato su quella sezione delle specifiche.
Michael Benjamin,

1
Corregge l'altezza, ma continua a crescere in direzione orizzontale, min-width: 0;non aiuta. Mi sto perdendo qualcosa?
utente

2
Per le reti nidificate dobbiamo applicarlo a tutti i livelli. Ma sono davvero venuto qui per votare e ringraziarti ..
Knack


57

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.


6
Raccomando questo approccio rispetto alla precedente risposta accettata.
Thierry Prost,

Anche se funziona, non ne capisco un po '... Potresti forse spiegare perché funziona? Cosa sta facendo minmax (0, 1fr)? Non dovrebbe sempre essere 0? Sono confuso :(
BAERUS

2
minmax(0, 1fr)funziona perché 1frè davvero una scorciatoia per minmax(auto,1fr), che non è il valore corretto per la domanda originale.
Mikko Rantalainen il


1

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


0

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
  }

Sono un po 'confuso a dire il vero. Il tuo codice non assomiglia affatto alla domanda originale e l'applicazione della larghezza massima: 100% agli elementi della griglia (anziché larghezza minima: 0 dalla soluzione accettata) non risolverà il problema ...
Loilo

max-width gli impedirà di riaggiustarsi rispetto alla sua larghezza figlio
Pedro JR

Ho provato a riprodurre il tuo codice e funziona davvero, ma non sembra essere a causa della larghezza massima: 100% ma a causa della colonna della griglia: span 4; senza definire una colonna iniziale. Definire una colonna iniziale (ad es. Usando grid-column: 1 / span 4;) e interromperà nuovamente il layout. (Questo comportamento è un po 'strano, ma sono sicuro che c'è un angolo da qualche parte nelle specifiche in cui questo è definito.)
Loilo

va bene, suona bene. ma non consideri ancora un voto per me
Pedro JR,

Ad essere sinceri: 1. Questo è stato un problema risolto per oltre tre anni. 2. la tua risposta non è stata testata correttamente (il tuo CSS contiene errori di battitura multipli che devono essere corretti prima che il browser riconosca anche la tua griglia). E 3. la tua risposta in realtà non rispondeva all'esempio della mia domanda (altrimenti ti saresti reso conto che la tua soluzione non funzionava con essa). - Quindi no, mi dispiace, ma non sto prendendo in considerazione un voto.
Loilo,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.