Formula per la griglia del layout del sito web

Formula per la griglia del layout del sito web

Quando crei un sito web reattivo, dovrai calcolare una griglia di 24 colonne sotto bootstrap per la massima risoluzione
alt
Michael CEO e fondatore


Printed 2011-02-20

Nel 95% dei casi basteranno quelle griglie che si trovano già pronte sul mio sito web o su Internet. Ma sarà utile dire come calcolare la griglia: ad esempio, le specifiche del sito potrebbero richiedere grandi rientri all'interno delle colonne e così via. In particolare, quando crei un design adattivo di un sito web , che dovrebbe anche essere di gomma, dovrai calcolare la griglia a 24 colonne sotto il bootstrap per la massima risoluzione (di solito 1920px).

Ad esempio, prendiamo un layout con una width di 1600 px e proviamo a creare una griglia di otto colonne.

La formula è: Larghezza dello schermo 1600 = 8 * (width della colonna) + 7 * (due larghezze di rientro all'interno della colonna).

Il rientro all'interno della colonna è solitamente di 5 ... 10 pixel; il nostro compito è selezionare tale valore di rientro. A cui la width della colonna di questa formula sarà un numero intero.

Ad esempio, sostituisci qui la width del rientro di 6 pixel; quindi la width della colonna sarà (1600 - 7 * 2 * 6)/8 = 189,5 pixel. Non adatto. La stessa cosa ci aspetta nel caso di 7 pixel. Ma con un rientro pari a 8 pixel, tutto va molto meglio:

Larghezza colonna = (1600 - 7 * 2 * 8)/8 = 186 pixel. Qui puoi calcolare le griglie in un modo così semplice.


Maggiori informazioni sulle griglie nel design:

Perché abbiamo bisogno della griglia< br> Oltre i confini delle colonne
Regola della densità
Griglia e umore
Griglia reattiva per Bootstrap
Formula per la griglia
Metodo: se la griglia fallisce

Our services