A capo della griglia CSS


126

È possibile creare una griglia CSS senza utilizzare le media query?

Nel mio caso, ho un numero non deterministico di elementi che voglio posizionare in una griglia e voglio che quella griglia si avvolga. Utilizzando Flexbox, non sono in grado di spaziare bene le cose in modo affidabile. Vorrei evitare anche un mucchio di media query.

Ecco un po 'di codice di esempio :

.grid {
  display: grid;
  grid-gap: 10px;
  grid-auto-flow: column;
  grid-template-columns: 186px 186px 186px 186px;
}

.grid > * {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Ed ecco un'immagine GIF:

Immagine GIF di ciò che vedo

Come nota a margine, se qualcuno può dirmi come potrei evitare di specificare la larghezza di tutti gli elementi come me, grid-template-columnssarebbe fantastico. Preferirei che i bambini specificassero la propria larghezza.


2
grid-template-columns: auto auto auto auto;funziona in questo caso? =)
Jakub Chlebowicz

Risposte:


219

Usa auto-fillo auto-fitcome numero di ripetizione della repeat()notazione.

repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list> )

auto-fill

Quando auto-fillviene fornito come numero di ripetizioni, se il contenitore della griglia ha una dimensione definita o una dimensione massima nell'asse pertinente, il numero di ripetizioni è il numero intero positivo più grande possibile che non causa il trabocco della griglia dal contenitore della griglia.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

La griglia ripeterà quante più tracce possibili senza traboccare il suo contenitore.

Utilizzo del riempimento automatico come numero di ripetizione della notazione repeat ()

In questo caso, dato l'esempio sopra (vedi immagine) , solo 5 tracce possono entrare nel contenitore della griglia senza traboccare. Ci sono solo 4 elementi nella nostra griglia, quindi un quinto viene creato come una traccia vuota nello spazio rimanente.

Il resto dello spazio rimanente, traccia # 6, termina la griglia esplicita. Ciò significa che non c'era spazio sufficiente per posizionare un'altra traccia.


auto-fit

La auto-fitparola chiave si comporta come auto-fill, tranne per il fatto che dopo l' algoritmo di posizionamento degli elementi della griglia, tutte le tracce vuote nello spazio rimanente verranno compresse in 0.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, 186px);
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

La griglia continuerà a ripetere quante più tracce possibile senza traboccare il suo contenitore, ma le tracce vuote verranno ridotte a 0.

Una traccia compressa viene considerata come avente una funzione di dimensionamento della traccia fissa di 0px.

Utilizzo dell'adattamento automatico come numero di ripetizione della notazione repeat ()

A differenza auto-filldell'esempio dell'immagine, la quinta traccia vuota viene compressa, terminando la griglia esplicita subito dopo il quarto elemento.


auto-fill vs auto-fit

La differenza tra i due è evidente quando minmax()si utilizza la funzione.

Utilizzare minmax(186px, 1fr)per variare gli elementi da 186pxa 186pxpiù una frazione dello spazio rimanente nel contenitore della griglia.

Durante l'utilizzo auto-fill, gli elementi cresceranno quando non c'è spazio per posizionare le tracce vuote.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

Durante l'utilizzo auto-fit, gli elementi cresceranno fino a riempire lo spazio rimanente perché tutte le tracce vuote vengono compresse 0px.

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}

.grid>* {
  background-color: green;
  height: 200px;
}
<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>


Terreno di gioco:

CodePen

Ispezione di tracce di riempimento automatico

auto-fill


Ispezione delle tracce di adattamento automatico

auto-fit


3
C'è un modo per centrare quelli che si trovano sulla riga successiva?
kentcdodds

Proprio come faresti con la scatola flessibile, display: gridsull'uso dell'elementojustify-content: center
Spittal

Caro @Ricky Come fare in modo che la prima proprietà di minmax, ad es. repeat(auto-fill, minmax(186px, 1fr));non è pixel, ma solo finché il div ha testo all'interno?
mesqueeb

1
@mesqueeb Non è possibile, è necessaria una dimensione definita . Puoi dare un'occhiata a questa risposta per maggiori dettagli.
Ricky

1
C'è un modo per fare in modo che quando deve passare alla riga successiva, due degli elementi scendano invece di uno solo? Quindi come da 4 a 2 a 1 e non averlo da 4 a 3 a 2 a 1?
sammiepls

16

Vuoi uno auto-fito auto-filldentro la repeat()funzione:

grid-template-columns: repeat(auto-fit, 186px);

La differenza tra i due diventa evidente se si utilizza anche a minmax()per consentire dimensioni flessibili delle colonne:

grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));

Ciò consente alle colonne di flettersi in termini di dimensioni, da 186 pixel a colonne di uguale larghezza che si estendono su tutta la larghezza del contenitore. auto-fillcreerà tutte le colonne che si adattano alla larghezza. Se, diciamo, cinque colonne si adattano, anche se hai solo quattro elementi della griglia, ci sarà una quinta colonna vuota:

Inserisci qui la descrizione dell'immagine

L'utilizzo auto-fitinvece eviterà colonne vuote, allungando ulteriormente le tue se necessario:

Inserisci qui la descrizione dell'immagine


7

Potresti cercare auto-fill:

grid-template-columns: repeat(auto-fill, 186px);

Demo: http://codepen.io/alanbuchanan/pen/wJRMox

Per utilizzare lo spazio disponibile in modo più efficiente, è possibile utilizzare minmaxe passare autocome secondo argomento:

grid-template-columns: repeat(auto-fill, minmax(186px, auto));

Demo: http://codepen.io/alanbuchanan/pen/jBXWLR

Se non vuoi le colonne vuote, puoi usare al auto-fitposto di auto-fill.


2
C'è un modo per centrare quelli che si trovano sulla riga successiva?
kentcdodds

3

Ho avuto una situazione simile. Oltre a quello che hai fatto, volevo centrare le mie colonne nel contenitore senza consentire alle colonne vuote di essere a sinistra oa destra:

.grid { 
    display: grid;
    grid-gap: 10px;
    justify-content: center;
    grid-template-columns: repeat(auto-fit, minmax(200px, auto));
}

Re "mentre non consentendo le colonne vuote per loro" : vuoi dire "mentre non consentendo le colonne vuote sia per loro" ( atropposia )? O "pur non consentendo colonne vuote per loro" (senza a )? O qualcos'altro (non sembra calcolare)?
Peter Mortensen,

1

Ecco il mio tentativo. Scusa il fluff, mi sentivo molto creativo.

Il mio metodo è un genitore divcon dimensioni fisse . Il resto sta solo adattando il contenuto all'interno di quel div di conseguenza.

Questo ridimensionerà le immagini indipendentemente dalle proporzioni. Non ci sarà nemmeno il ritaglio difficile .

body {
    background: #131418;
    text-align: center;
    margin: 0 auto;
}

.my-image-parent {
    display: inline-block;
    width: 300px;
    height: 300px;
    line-height: 300px; /* Should match your div height */
    text-align: center;
    font-size: 0;
}

/* Start demonstration background fluff */
    .bg1 {background: url(https://unsplash.it/801/799);}
    .bg2 {background: url(https://unsplash.it/799/800);}
    .bg3 {background: url(https://unsplash.it/800/799);}
    .bg4 {background: url(https://unsplash.it/801/801);}
    .bg5 {background: url(https://unsplash.it/802/800);}
    .bg6 {background: url(https://unsplash.it/800/802);}
    .bg7 {background: url(https://unsplash.it/802/802);}
    .bg8 {background: url(https://unsplash.it/803/800);}
    .bg9 {background: url(https://unsplash.it/800/803);}
    .bg10 {background: url(https://unsplash.it/803/803);}
    .bg11 {background: url(https://unsplash.it/803/799);}
    .bg12 {background: url(https://unsplash.it/799/803);}
    .bg13 {background: url(https://unsplash.it/806/799);}
    .bg14 {background: url(https://unsplash.it/805/799);}
    .bg15 {background: url(https://unsplash.it/798/804);}
    .bg16 {background: url(https://unsplash.it/804/799);}
    .bg17 {background: url(https://unsplash.it/804/804);}
    .bg18 {background: url(https://unsplash.it/799/804);}
    .bg19 {background: url(https://unsplash.it/798/803);}
    .bg20 {background: url(https://unsplash.it/803/797);}
/* end demonstration background fluff */

.my-image {
    width: auto;
    height: 100%;
    vertical-align: middle;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
<div class="my-image-parent">
    <div class="my-image bg1"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg2"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg3"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg4"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg5"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg6"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg7"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg8"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg9"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg10"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg11"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg12"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg13"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg14"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg15"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg16"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg17"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg18"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg19"></div>
</div>

<div class="my-image-parent">
    <div class="my-image bg20"></div>
</div>

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.