Centrare una griglia di larghezza variabile, mentre allineando gli elementi a sinistra

Question

Considerate i seguenti

<div class="container"> 
    <div class="grid"> 
     <div class="unit"></div> 
     <div class="unit"></div> 
     <div class="unit"></div> 
     <div class="unit"></div> 
     <div class="unit"></div> 
     <div class="unit"></div> 
      .... 
     </div> 
</div> 

Utilizzando le immagini, in pratica quello che ho è qualcosa di simile

Come si può vedere la i blocchi verdi e il contenitore sono allineati a sinistra

Quello che voglio ottenere è qualcosa di simile.

Gli .unit elementi hanno larghezza costante

L'elemento .grid dovrebbe espandersi con larghezza (in modo che più unit elementi si adatterebbe in linea 1) mentre è sempre centrato all'interno .container.

Qualsiasi indizio su come ottenerlo utilizzando solo CSS (e forse alcuni wrapper html se necessario)?

Answer 1

nel CSS, assicurarsi che: 1. Nella regola .grid, text-align è impostato su center 2. Nella regola .unit, display è impostato su inline-block. L'elemento div è un elemento a livello di blocco e quindi ogni nuovo elemento viene visualizzato su una nuova riga. Se si assegna alla proprietà display un valore pari a inline-block, tutti gli div s con la classe unit devono essere visualizzati sulla stessa riga (fino a quando non c'è più spazio). Anche text-align : center non funziona con elementi con proprietà di visualizzazione impostate su block e gli elementi a livello di blocco hanno un valore di visualizzazione di block per impostazione predefinita.

Answer 2

Devi solo dare valore ai vostri corsi come questo,

.grid { text-align:center; } 

.unit { display:inline-block; } 

Spero che questo risolverà il problema.

In caso contrario, si prega di mostrare il codice completo tramite Jsfiddle.

Answer 3

Vorrei iniziare col dire che questa è una domanda interessante e il mio primo pensiero è stato che il flexbox è il modo per risolvere questo problema. Ho provato tutti i tipi di accordi di flexbox, ma questo tipo di soluzione mi ha eluso. Di seguito, la soluzione che utilizza le query floating, clearing e media.

Per questo esempio, ho assunto che ogni riga abbia almeno 3 e non più di 9 caselle. Tuttavia, è possibile estendere questa soluzione per gestire ovunque tra 1 e più di 9 caselle.

Ecco HTML:

<div class="grid"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

Ecco un CSS che (1) esegui una mini-reset per eliminare le imbottiture ei margini browser applicata che possono interferire con il dimensionamento e (2) formatta i .grid e le sue div bambini :

* { 
    margin: 0; 
    padding: 0; 
} 

.grid { 
    display: table; 
    outline: 1px solid blue; 
    min-width: 330px; 
    margin: 0 auto; 
} 

.grid > div { 
    width: 100px; 
    height: 61px; 
    margin: 5px; 
    background-color: teal; 
    float: left; 
} 

Il blocco .container stato eliminato perché .grid viene visualizzato come una tabella. Quest'ultimo è un blocco che si restringe attorno ai suoi figli e margin: 0 auto può essere applicato per centrarlo sulla pagina. Lo min-width di 330px del .grid assicura che un minimo di tre blocchi possa adattarsi per riga. Ogni volta che si verifica un errore all'interno di un elemento table, i suoi margini non collassano, quindi non è necessaria alcuna compensazione esplicita dei float (ad es. Tramite clearfix).

Ogni .griddiv bambino occupa 110 px di spazio orizzontale (100 px di larghezza + 10 px nei margini sinistro e destro). Questo numero è importante per il codice media query che segue qui sotto:

@media screen and (min-width: 330px) and (max-width: 439px) { 
    .grid > div:nth-of-type(3n + 1) { 
     clear: left; 
    } 
} 

@media screen and (min-width: 440px) and (max-width: 549px) { 
    .grid > div:nth-of-type(4n + 1) { 
     clear: left; 
    } 
} 

@media screen and (min-width: 550px) and (max-width: 659px) { 
    .grid > div:nth-of-type(5n + 1) { 
     clear: left; 
    } 
} 

@media screen and (min-width: 660px) and (max-width: 769px) { 
    .grid > div:nth-of-type(6n + 1) { 
     clear: left; 
    } 
} 

@media screen and (min-width: 770px) and (max-width: 879px) { 
    .grid > div:nth-of-type(7n + 1) { 
     clear: left; 
    } 
} 

@media screen and (min-width: 880px) and (max-width: 989px) { 
    .grid > div:nth-of-type(8n + 1) { 
     clear: left; 
    } 
} 

@media screen and (min-width: 990px) { 
    .grid > div:nth-of-type(9n + 1) { 
     clear: left; 
    }  
} 

La logica alla base del codice è questo: se non v'è abbastanza spazio per includere solo n blocchi per riga, quindi ogni blocco di (n + 1) il bordo sinistro viene cancellato, che sposta il blocco su una nuova linea.

E, ecco un violino: http://jsfiddle.net/5hWXw/. Ridimensiona la finestra di anteprima per vedere le regolazioni.

Answer 4

@ La risposta di DRD è buona, ma richiede molte richieste multimediali. Se il seguente tua barca galleggia però: non guardare troppo lontano quando può essere semplice: impostare un padding-left/-proprio sul vostro contenitore ...

.grid { 
    padding: 0 5%; 
} 

Noterete gli spazi è nemmeno quando la larghezza non è una moltiplicazione dell'intera scatola di .unit (riempimento, margine, bordo, larghezza). Impostazione di una larghezza basata su% può aiutare qui.

Vedere this fiddle per un test case. Ho aggiunto un po 'di Javascript per regolare il padding in modo dinamico, rimuoverlo per vedere il risultato solo CSS. EDIT: @DRD ha creato una funzione jQuery che funziona meglio del mio JS, vederlo here (non dimenticare di includere jQuery se vuoi usarlo).

Answer 5

Sembra che una soluzione a questo è simile a quella qui Flex-box: Align last row to grid

Prima di tutto impostare .grid-inline, quindi l'aggiunta di più div con height: 0 farebbe il trucco, numero di div in più di dovrebbe essere atleast pari a numero massimo di units in 1 riga (meno 1).

Questo è un po 'incontinente, ma ancora più facile che la definizione multipla @media come @DRD suggerito, e non richiede JavaScript/window.resize() la manipolazione

<div class="container"> 
    <div class="grid"> 
     <div class="unit"></div> 
     <div class="unit"></div> 
     <div class="unit"></div> 
     <div class="unit"></div> 
     <div class="unit"></div> 
     <div class="unit"></div> 
     <div class="unit empty"></div> 
     <div class="unit empty"></div> 
     <div class="unit empty"></div> 
     <div class="unit empty"></div> 
     <div class="unit empty"></div> 
     <div class="unit empty"></div> 
     <div class="unit empty"></div> 
    </div> 
</div> 


.container { 
    display: block; 
    text-align: center; 
} 

.empty { 
    height: 0 !important; 
} 

.grid { 
    display: inline; 
} 

spero ancora di una soluzione migliore usando solo css