Foundations

Grid

Nella definizione del layout di una interfaccia utente, la griglia è una suddivisione dello spazio tramite precise spaziature verticali ed orizzontali. In questa sezione definiamo le regole per progettare il posizionamento degli elementi nelle pagine. L'obiettivo è creare layout scalabili e razionali per un design full responsive.

Esempio pratico della griglia

12 columns .col-sm-1:

.col-sm-1

.col-sm-1

.col-sm-1

.col-sm-1

.col-sm-1

.col-sm-1

.col-sm-1

.col-sm-1

.col-sm-1

.col-sm-1

.col-sm-1

.col-sm-1

.col-sm-2

.col-sm-2

.col-sm-2

.col-sm-2

.col-sm-2

.col-sm-2

.col-sm-3

.col-sm-3

.col-sm-3

.col-sm-3

.col-sm-4

.col-sm-4

.col-sm-4

.col-sm-6

.col-sm-6

.col-sm-4

.col-sm-8

.col-sm-3

.col-sm-9

.col-sm-2

.col-sm-10

Colonne della griglia

Breakpoint

Extra Extra large ≥1400 px

Extra large ≥1200 px

Large ≥ 992 px

Medium ≥ 768 px

Small ≥ 576 px

Extra Small < 576 px

Fluid