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 coordinato a lungo il design con l'ufficio centrale negli Stati Uniti, ma di conseguenza tutto è stato accettato. È positivo che i nostri appaltatori abbiano fatto del loro meglio durante il servizio fotografico e nella fase di progettazione! »
Karina Khusainova (Google, Associate Product Marketing Manager).
«Tutte e 4 le varianti del logo RestoRus sono piaciute molto. Non eravamo quasi d'accordo con quello generale su quale scegliere :) »
Vadim Zuykov (CEO di NTA Event Media Group).