Griglia CSS a larghezza intera – Colonne con margini uniformi

Sto provando a creare una griglia retriggers con 4 colonne che riempie l’intera larghezza dello schermo sulla versione desktop, ma l’aggiunta di margini per spaziarle nel mezzo significa ovviamente che l’ultima colonna non riempie la larghezza rimanente di lo schermo, o scende in una nuova riga, a seconda della larghezza delle colonne.

CSS:

#servicesGrid { position:absolute; top:0; left:0; width:100%; height:100%; } .service { width:24.75%; height:45%; background:#262626; display:block; float:left; margin:1px; } #servicesGrid .service:nth-of-type(1) { width:100%; } #servicesGrid .service:nth-of-type(2) { margin-left:0; } #servicesGrid .service:nth-of-type(5) { margin-right:0; } 

HTML:

 

Esempio su JSFiddle: https://jsfiddle.net/4bw4p3LL/ .

se usi % per width , ti suggerisco di usare % per i margini. quindi sarai sicuro di aggiungere fino al 100% .

l’idea è che i 4*colwidth + 3*margins = 100%

quindi, usando un margin-right:0.5% a tutti .col elementi .col tranne l’ultimo ( nth-of-type(5) ), allora avrai la larghezza del 100% - 3*0.5% = 98.5% / 4 = 24.625%

dove: 100% è la larghezza del servicesGrid , 3 è il numero di margini dello 0.5% dato ai primi 3 cols, il 98.5% è lo spazio rimanente occupato dal 4 col, e dividendolo per il nr di col ti dà la larghezza di ogni colore

 #servicesGrid { position:absolute; top:0; left:0; width:100%; height:100%; } .service { width:24.625%; height:45%; background:#262626; display:block; float:left; margin:1px 0.5% 1px 0; } #servicesGrid .service:nth-of-type(5) { margin-right:0; } 
 

Potresti usare calc per la width . Questo ti permetterà di specificare un valore (il margin ) da sottrarre dalla width . Basta essere consapevoli del supporto del browser , che è tutti i browser moderni.

jsfiddle

 .service { width: calc(24.75% - 1px); height: 45%; background: #262626; display: block; float: left; margin: 1px; } 
 #servicesGrid { position:absolute; top:0; left:0; width:100%; height:100%; } .service { width:calc(24.75% - 1px); height:45%; background:#262626; display:block; float:left; margin:1px; } #servicesGrid .service:nth-of-type(2) { margin-left:0; } #servicesGrid .service:nth-of-type(5) { margin-right:0; } 
 

Dato che vuoi lavorare con un margine fisso di 1 pixel, devi calcolare la larghezza (il modo in cui è impostato il margine, è molto difficile impostare una larghezza dynamic senza una piccola eccezione, a meno che tu non voglia utilizzare

)

In questo modo, ti consiglio di utilizzare width: calc(25% - Ypx) sulle colonne. È supportato nei browser generali ( http://caniuse.com/#search=calc ). Questo ha funzionato usando questo:

 .service { width:calc(25% - 2px); height:45%; background:#262626; display:block; float:left; margin: 1px; } #servicesGrid .service:nth-of-type(2) { margin-left:0; width:calc(25% - 1px); } #servicesGrid .service:nth-of-type(5) { margin-right:0; width:calc(25% - 1px); } 

Un’opzione è utilizzare un border per simulare lo spazio tra gli elementi, quindi è ansible utilizzare il box-sizing per includere il bordo all’interno della width . Prova questo codice:

 #servicesGrid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .service { width: 25%; height: 45%; background: #262626; display: block; float: left; box-sizing: border-box; } .service:nth-child(n+3) { border-left: 1px solid white; }