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


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

Latest works:

«Abbiamo ottenuto circa 20 bozze del logo, di cui due scelte per lo studio. La calligrafia è risultata bellissima, ma ho comunque scelto un logo più classico con il segno PL »
Dmitry Agadzhanov (Direttore Generale di Pokupalylux LLC).
«Il processo si è rivelato non così veloce come mi aspettavo, ma alla fine della giornata il risultato è ottimo. I servizi di sviluppo web forniti da Illumina Creative sono sicuramente il massimo livello »
Vladimir Burashnikov (EVIG, comproprietario). Il design del sito web responsive è stato seguito dalla programmazione CMS