Sistema a griglia
Usa la nostra potente griglia flexbox mobile-first per creare layout di tutte le forme e dimensioni grazie a un sistema a dodici colonne, cinque livelli reattivi predefiniti, variabili Sass e mixin e dozzine di classi predefinite.
Come funziona
Il sistema a griglia di Bootstrap utilizza una serie di contenitori, righe e colonne per il layout e l'allineamento del contenuto. È costruito con flexbox ed è completamente reattivo. Di seguito è riportato un esempio e uno sguardo approfondito su come la griglia si unisce.
Nuovo o non conosci flexbox? Leggi questa guida flexbox CSS Tricks per informazioni su background, terminologia, linee guida e frammenti di codice.
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
L'esempio precedente crea tre colonne di uguale larghezza su dispositivi piccoli, medi, grandi ed extra large utilizzando le nostre classi di griglia predefinite. Tali colonne sono centrate nella pagina con il genitore .container
.
Scomponendolo, ecco come funziona:
- I contenitori forniscono un mezzo per centrare e riempire orizzontalmente i contenuti del tuo sito. Utilizzare
.container
per una larghezza pixel reattiva o.container-fluid
perwidth: 100%
tutte le dimensioni del viewport e del dispositivo. - Le righe sono wrapper per le colonne. Ogni colonna ha un'orizzontale
padding
(chiamata grondaia) per controllare lo spazio tra di loro. Questopadding
viene poi contrastato sulle righe con margini negativi. In questo modo, tutto il contenuto delle colonne è allineato visivamente sul lato sinistro. - In un layout a griglia, il contenuto deve essere posizionato all'interno di colonne e solo le colonne possono essere figli immediati di righe.
- Grazie a flexbox, le colonne della griglia senza un valore specificato
width
verranno automaticamente posizionate come colonne di uguale larghezza. Ad esempio, quattro istanze di.col-sm
saranno automaticamente larghe il 25% dal punto di interruzione piccolo in su. Vedi la sezione delle colonne con layout automatico per altri esempi. - Le classi di colonne indicano il numero di colonne che desideri utilizzare tra le possibili 12 per riga. Quindi, se vuoi tre colonne di uguale larghezza, puoi usare
.col-4
. - Le colonne
width
sono impostate in percentuale, quindi sono sempre fluide e dimensionate rispetto all'elemento padre. - Le colonne hanno l'orizzontale
padding
per creare le grondaie tra le singole colonne, tuttavia, puoi rimuovere lemargin
righe e lepadding
colonne con.no-gutters
il file.row
. - Per rendere la griglia reattiva, ci sono cinque punti di interruzione della griglia, uno per ogni punto di interruzione reattivo : tutti i punti di interruzione (extra piccolo), piccolo, medio, grande ed extra grande.
- I punti di interruzione della griglia si basano su query multimediali di larghezza minima, il che significa che si applicano a quell'unico punto di interruzione ea tutti quelli al di sopra (ad esempio,
.col-sm-4
si applica a dispositivi piccoli, medi, grandi ed extra grandi, ma non al primo punto dixs
interruzione). - Puoi usare classi di griglia predefinite (come
.col-4
) o mixin Sass per più markup semantico.
Siate consapevoli delle limitazioni e dei bug di flexbox , come l' impossibilità di utilizzare alcuni elementi HTML come contenitori flessibili .
Opzioni griglia
Mentre Bootstrap usa em
s o rem
s per definire la maggior parte delle dimensioni, px
s sono usati per i punti di interruzione della griglia e le larghezze dei contenitori. Questo perché la larghezza della finestra è in pixel e non cambia con la dimensione del carattere .
Scopri come funzionano gli aspetti del sistema di griglia Bootstrap su più dispositivi con una pratica tabella.
Extra piccolo <576px |
Piccolo ≥576px |
Medio ≥768px |
Grande ≥992px |
Extra grande ≥1200px |
|
---|---|---|---|---|---|
Larghezza massima del contenitore | Nessuno (automatico) | 540px | 720px | 960px | 1140px |
Prefisso di classe | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# di colonne | 12 | ||||
Larghezza della grondaia | 30px (15px su ciascun lato di una colonna) | ||||
Nidificabile | sì | ||||
Ordinamento delle colonne | sì |
Colonne con layout automatico
Utilizza classi di colonne specifiche del punto di interruzione per ridimensionare facilmente le colonne senza una classe numerata esplicita come .col-sm-6
.
Uguale larghezza
Ad esempio, ecco due layout di griglia che si applicano a ogni dispositivo e finestra, da xs
a xl
. Aggiungi un numero qualsiasi di classi senza unità per ogni punto di interruzione di cui hai bisogno e ogni colonna avrà la stessa larghezza.
<div class="container">
<div class="row">
<div class="col">
1 of 2
</div>
<div class="col">
2 of 2
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col">
2 of 3
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Multilinea di uguale larghezza
Crea colonne di uguale larghezza che si estendono su più righe inserendo un .w-100
punto in cui desideri che le colonne si interrompano su una nuova riga. Rendi le pause reattive mescolando .w-100
con alcune utilità di visualizzazione reattive .
C'era un bug di Safari flexbox che impediva a questo di funzionare senza un esplicito flex-basis
o border
. Esistono soluzioni alternative per le versioni precedenti del browser, ma non dovrebbero essere necessarie se i browser di destinazione non rientrano nelle versioni con bug.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="w-100"></div>
<div class="col">col</div>
<div class="col">col</div>
</div>
</div>
Impostazione della larghezza di una colonna
Il layout automatico per le colonne della griglia flexbox significa anche che puoi impostare la larghezza di una colonna e fare in modo che le colonne di pari livello si ridimensionino automaticamente attorno ad essa. È possibile utilizzare classi di griglia predefinite (come mostrato di seguito), mixin di griglia o larghezze inline. Nota che le altre colonne verranno ridimensionate indipendentemente dalla larghezza della colonna centrale.
<div class="container">
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-6">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-5">
2 of 3 (wider)
</div>
<div class="col">
3 of 3
</div>
</div>
</div>
Contenuto a larghezza variabile
Usa col-{breakpoint}-auto
le classi per ridimensionare le colonne in base alla larghezza naturale del loro contenuto.
<div class="container">
<div class="row justify-content-md-center">
<div class="col col-lg-2">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
<div class="row">
<div class="col">
1 of 3
</div>
<div class="col-md-auto">
Variable width content
</div>
<div class="col col-lg-2">
3 of 3
</div>
</div>
</div>
Classi reattive
La griglia di Bootstrap include cinque livelli di classi predefinite per la creazione di layout reattivi complessi. Personalizza le dimensioni delle tue colonne su dispositivi extra piccoli, piccoli, medi, grandi o extra grandi come meglio credi.
Tutti i punti di interruzione
Per le griglie uguali dal dispositivo più piccolo al più grande, utilizzare le classi .col
e . .col-*
Specificare una classe numerata quando si necessita di una colonna di dimensioni particolari; in caso contrario, sentiti libero di attenersi a .col
.
<div class="container">
<div class="row">
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
<div class="col">col</div>
</div>
<div class="row">
<div class="col-8">col-8</div>
<div class="col-4">col-4</div>
</div>
</div>
Impilato in orizzontale
Utilizzando un unico insieme di .col-sm-*
classi, puoi creare un sistema a griglia di base che inizia impilato e diventa orizzontale al piccolo punto di interruzione ( sm
).
<div class="container">
<div class="row">
<div class="col-sm-8">col-sm-8</div>
<div class="col-sm-4">col-sm-4</div>
</div>
<div class="row">
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
<div class="col-sm">col-sm</div>
</div>
</div>
Mescolare e abbinare
Non vuoi che le tue colonne vengano semplicemente impilate in alcuni livelli della griglia? Usa una combinazione di classi diverse per ogni livello, se necessario. Vedi l'esempio qui sotto per un'idea migliore di come funziona.
<div class="container">
<!-- Stack the columns on mobile by making one full-width and the other half-width -->
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
<!-- Columns are always 50% wide, on mobile and desktop -->
<div class="row">
<div class="col-6">.col-6</div>
<div class="col-6">.col-6</div>
</div>
</div>
grondaie
Le grondaie possono essere regolate in modo reattivo mediante imbottiture specifiche per punto di interruzione e classi di utilità a margine negativo. Per modificare le grondaie in una determinata riga, accoppiare un'utilità di margine negativo sulle utilità di .row
riempimento corrispondente sulla .col
s. Potrebbe essere necessario regolare anche il genitore .container
o per evitare un overflow indesiderato, utilizzando nuovamente l'utilità di riempimento corrispondente..container-fluid
Ecco un esempio di personalizzazione della griglia Bootstrap al punto di lg
interruzione grande ( ) e oltre. Abbiamo aumentato il .col
padding con .px-lg-5
, contrastato quello con .mx-lg-n5
sul genitore .row
e quindi regolato il .container
wrapper con .px-lg-5
.
<div class="container px-lg-5">
<div class="row mx-lg-n5">
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
<div class="col py-3 px-lg-5 border bg-light">Custom column padding</div>
</div>
</div>
Colonne di riga
Usa le .row-cols-*
classi reattive per impostare rapidamente il numero di colonne che rendono al meglio il tuo contenuto e il tuo layout. Mentre le classi normali .col-*
si applicano alle singole colonne (ad esempio, .col-md-4
), le classi delle colonne di riga sono impostate sul genitore .row
come scorciatoia.
Usa queste classi di colonne di righe per creare rapidamente layout di griglia di base o per controllare i layout delle tue carte.
<div class="container">
<div class="row row-cols-2">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-3">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col-6">Column</div>
<div class="col">Column</div>
</div>
</div>
<div class="container">
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
<div class="col">Column</div>
</div>
</div>
Puoi anche usare il mixin Sass in accompagnamento, row-cols()
:
.element {
// Three columns to start
@include row-cols(3);
// Five columns from medium breakpoint up
@include media-breakpoint-up(md) {
@include row-cols(5);
}
}
Allineamento
Utilizzare le utilità di allineamento flexbox per allineare le colonne verticalmente e orizzontalmente. Internet Explorer 10-11 non supporta l'allineamento verticale degli elementi flessibili quando il contenitore flessibile ha un min-height
come mostrato di seguito. Vedi Flexbugs #3 per maggiori dettagli.
Allineamento verticale
<div class="container">
<div class="row align-items-start">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-center">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
<div class="row align-items-end">
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
<div class="col">
One of three columns
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col align-self-start">
One of three columns
</div>
<div class="col align-self-center">
One of three columns
</div>
<div class="col align-self-end">
One of three columns
</div>
</div>
</div>
Allineamento orizzontale
<div class="container">
<div class="row justify-content-start">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-center">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-end">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-around">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
<div class="row justify-content-between">
<div class="col-4">
One of two columns
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
Niente grondaie
Le grondaie tra le colonne nelle nostre classi di griglia predefinite possono essere rimosse con .no-gutters
. Questo rimuove le margin
s negative .row
e l'orizzontale padding
da tutte le colonne figlie immediate.
Ecco il codice sorgente per creare questi stili. Si noti che le sostituzioni delle colonne hanno come ambito solo le prime colonne figlie e vengono scelte come target tramite il selettore di attributi . Sebbene ciò generi un selettore più specifico, il riempimento delle colonne può ancora essere ulteriormente personalizzato con le utilità di spaziatura .
Hai bisogno di un design edge-to-edge? Rilascia il genitore .container
o .container-fluid
.
.no-gutters {
margin-right: 0;
margin-left: 0;
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
In pratica, ecco come appare. Tieni presente che puoi continuare a usarlo con tutte le altre classi di griglia predefinite (incluse le larghezze delle colonne, i livelli reattivi, i riordini e altro).
<div class="row no-gutters">
<div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
<div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>
Avvolgimento delle colonne
Se più di 12 colonne sono posizionate all'interno di una singola riga, ogni gruppo di colonne extra verrà, come un'unica unità, a capo su una nuova riga.
Poiché 9 + 4 = 13 > 12, questo div a 4 colonne viene avvolto su una nuova riga come un'unità contigua.
Le colonne successive continuano lungo la nuova riga.
<div class="container">
<div class="row">
<div class="col-9">.col-9</div>
<div class="col-4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
<div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>
</div>
Interruzioni di colonna
Rompere le colonne in una nuova riga in flexbox richiede un piccolo trucco: aggiungi un elemento con width: 100%
dove vuoi avvolgere le tue colonne in una nuova riga. Normalmente ciò si ottiene con più .row
s, ma non tutti i metodi di implementazione possono tenerne conto.
<div class="container">
<div class="row">
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<!-- Force next columns to break to new line -->
<div class="w-100"></div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
<div class="col-6 col-sm-3">.col-6 .col-sm-3</div>
</div>
</div>
Puoi anche applicare questa interruzione a punti di interruzione specifici con le nostre utilità di visualizzazione reattiva .
<div class="container">
<div class="row">
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<!-- Force next columns to break to new line at md breakpoint and up -->
<div class="w-100 d-none d-md-block"></div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
<div class="col-6 col-sm-4">.col-6 .col-sm-4</div>
</div>
</div>
Riordino
Ordina le classi
Usa .order-
le classi per controllare l' ordine visivo dei tuoi contenuti. Queste classi sono reattive, quindi puoi impostare il order
punto di interruzione per (ad esempio, .order-1.order-md-2
). Include il supporto per 1
tutti 12
e cinque i livelli della griglia.
<div class="container">
<div class="row">
<div class="col">
First in DOM, no order applied
</div>
<div class="col order-12">
Second in DOM, with a larger order
</div>
<div class="col order-1">
Third in DOM, with an order of 1
</div>
</div>
</div>
Esistono anche classi reattive .order-first
e che modificano l' elemento di un elemento applicando e ( ), rispettivamente. Queste classi possono anche essere mescolate con le classi numerate secondo necessità..order-last
order
order: -1
order: 13
order: $columns + 1
.order-*
<div class="container">
<div class="row">
<div class="col order-last">
First in DOM, ordered last
</div>
<div class="col">
Second in DOM, unordered
</div>
<div class="col order-first">
Third in DOM, ordered first
</div>
</div>
</div>
Colonne di compensazione
Puoi compensare le colonne della griglia in due modi: le nostre .offset-
classi di griglia reattive e le nostre utilità di margine . Le classi della griglia sono dimensionate per corrispondere alle colonne, mentre i margini sono più utili per layout rapidi in cui la larghezza dell'offset è variabile.
Classi offset
Sposta le colonne a destra usando le .offset-md-*
classi. Queste classi aumentano il margine sinistro di una colonna di *
colonne. Ad esempio, .offset-md-4
si sposta .col-md-4
su quattro colonne.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
<div class="row">
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
<div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div>
</div>
</div>
Oltre alla cancellazione delle colonne nei punti di interruzione reattivi, potrebbe essere necessario reimpostare gli offset. Guardalo in azione nell'esempio della griglia .
<div class="container">
<div class="row">
<div class="col-sm-5 col-md-6">.col-sm-5 .col-md-6</div>
<div class="col-sm-5 offset-sm-2 col-md-6 offset-md-0">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</div>
</div>
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-6">.col-sm-6 .col-md-5 .col-lg-6</div>
<div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</div>
</div>
</div>
Utilità di margine
Con il passaggio a flexbox nella v4, puoi utilizzare utilità .mr-auto
di margine come forzare le colonne di pari livello l'una dall'altra.
<div class="container">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
<div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto">.col-auto .mr-auto</div>
<div class="col-auto">.col-auto</div>
</div>
</div>
Nidificazione
Per annidare i tuoi contenuti con la griglia predefinita, aggiungi un nuovo .row
e un insieme di colonne all'interno di una colonna .col-sm-*
esistente . .col-sm-*
Le righe nidificate devono includere un set di colonne che si sommano fino a 12 o meno (non è necessario utilizzare tutte le 12 colonne disponibili).
<div class="container">
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-8 col-sm-6">
Level 2: .col-8 .col-sm-6
</div>
<div class="col-4 col-sm-6">
Level 2: .col-4 .col-sm-6
</div>
</div>
</div>
</div>
</div>
Miscele di Sass
Quando si utilizzano i file Sass di origine di Bootstrap, è possibile utilizzare variabili e mixin Sass per creare layout di pagina personalizzati, semantici e reattivi. Le nostre classi di griglia predefinite utilizzano queste stesse variabili e mixin per fornire un'intera suite di classi pronte all'uso per layout veloci e reattivi.
Variabili
Le variabili e le mappe determinano il numero di colonne, la larghezza della grondaia e il punto di media query in cui iniziare le colonne mobili. Li usiamo per generare le classi di griglia predefinite documentate sopra, così come per i mixin personalizzati elencati di seguito.
$grid-columns: 12;
$grid-gutter-width: 30px;
$grid-breakpoints: (
// Extra small screen / phone
xs: 0,
// Small screen / phone
sm: 576px,
// Medium screen / tablet
md: 768px,
// Large screen / desktop
lg: 992px,
// Extra large screen / wide desktop
xl: 1200px
);
$container-max-widths: (
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px
);
Miscele
I mixin vengono utilizzati insieme alle variabili della griglia per generare CSS semantici per le singole colonne della griglia.
// Creates a wrapper for a series of columns
@include make-row();
// Make the element grid-ready (applying everything but the width)
@include make-col-ready();
@include make-col($size, $columns: $grid-columns);
// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);
Esempio di utilizzo
Puoi modificare le variabili in base ai tuoi valori personalizzati o semplicemente utilizzare i mixin con i loro valori predefiniti. Ecco un esempio di utilizzo delle impostazioni predefinite per creare un layout a due colonne con uno spazio vuoto tra.
.example-container {
@include make-container();
// Make sure to define this width after the mixin to override
// `width: 100%` generated by `make-container()`
width: 800px;
}
.example-row {
@include make-row();
}
.example-content-main {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(8);
}
}
.example-content-secondary {
@include make-col-ready();
@include media-breakpoint-up(sm) {
@include make-col(6);
}
@include media-breakpoint-up(lg) {
@include make-col(4);
}
}
<div class="example-container">
<div class="example-row">
<div class="example-content-main">Main content</div>
<div class="example-content-secondary">Secondary content</div>
</div>
</div>
Personalizzazione della griglia
Utilizzando le nostre variabili e mappe Sass della griglia integrate, è possibile personalizzare completamente le classi di griglia predefinite. Modifica il numero di livelli, le dimensioni della query multimediale e le larghezze del contenitore, quindi ricompila.
Colonne e grondaie
Il numero delle colonne della griglia può essere modificato tramite le variabili Sass. $grid-columns
viene utilizzato per generare le larghezze (in percentuale) di ogni singola colonna mentre $grid-gutter-width
imposta la larghezza per le grondaie delle colonne.
$grid-columns: 12 !default;
$grid-gutter-width: 30px !default;
Livelli di griglia
Andando oltre le colonne stesse, puoi anche personalizzare il numero di livelli della griglia. Se volessi solo quattro livelli di griglia, aggiorneresti $grid-breakpoints
e $container-max-widths
a qualcosa del genere:
$grid-breakpoints: (
xs: 0,
sm: 480px,
md: 768px,
lg: 1024px
);
$container-max-widths: (
sm: 420px,
md: 720px,
lg: 960px
);
Quando apporti modifiche alle variabili o mappe Sass, dovrai salvare le modifiche e ricompilare. In questo modo verrà prodotto un nuovissimo set di classi di griglia predefinite per larghezze, offset e ordinamento delle colonne. Anche le utilità di visibilità reattive verranno aggiornate per utilizzare i punti di interruzione personalizzati. Assicurati di impostare i valori della griglia in px
(non rem
, em
o %
).