Vi använder kakor (cookies) för att webbplatsen ska fungera så bra som möjligt för dig.
Vi använder också kakor för webbanalys för att göra webbplatsen bättre.
Godkänner du att vi också använder kakor för webbanalys?
Grid används för att skapa responsiva gränssnitt som anpassar sig till olika skärm- och fönsterstorlekar. Det definierar den yta som komponenter kan placeras på och styr hur stor del av ytans bredd som komponenterna får uppta vid olika brytpunkter för skärmbredden.
Containern styr den maximala bredden som innehållet får ta och sätter marginal i vänster- och högerkant. Containerns fulla bredd motsvarar 12 kolumner.
Det finns två typer av containers:
Container – centrerar innehållet på skärmen i en maxbredd som varierar beroende av skärmens bredd
Container-fluid - tar 100% av den tillgängliga ytan. Om en maxbredd sätts kommer ytan vänsterjusteras
Innehåll i ett gridlayout placeras i kolumner (col) och kolumnerna ska i sig alltid ligga i en rad (row). Varje rad har 12 möjliga kolumner, vilket motsvarar hela bredden som raden placeras i. Bredden på en kolumn anges i hur många av radens 12 möjliga kolumner som den får uppta. Komponenter som placeras i kolumnen tar sedan hela kolumnens bredd.
En kolumn som sätts till col-12 tar upp alla 12 möjliga kolumner i raden, men eftersom samma resultat uppnås utan att använda rad- och kolumnklasser behöver den varianten i regel inte användas.
I en rad med två lika stora kolumner får vardera ta upp 6 av radens 12 möjliga kolumner.
I en rad med tre lika stora kolumner får vardera ta upp 4 av radens 12 möjliga kolumner.
Kolumnerna i en rad kan vara olika stora – så länge summan av kolumnernas bredd inte överstiger 12 kommer de lägga sig bredvid varandra.
Genom att använda fördefinierade brytpunkter kan du anpassa hur en layout ska se ut vid olika skärmstorlekar. Det finns fyra brytpunkter som kan konfigureras. Varje brytpunkt har ett standardvärde för vilken skärmbredd den kommer att bryta på:
sm - skärmbredd mellan 0 och 639 pixlar
md - skärmbredd mellan 640 och 1023 pixlar
lg - skärmbredd mellan 1024 och 1279 pixlar
xl - skärmbredd från 1280 pixlar och uppåt
Du sätter bredden på en kolumn för olika skärmstorlekar genom att ange i klassen för vilken brytpunkt bredden gäller.
För att aktivera de olika brytpunkterna så kan du minska bredden på webbläsarens fönster.
I de angivna exempel nedan finns det två olika scenarion. Ett där föräldern tar upp hela bredden på 12 kolumner och ett exempel där föräldern tar 8 kolumner medan dess barn tar hela bredden på 12 kolumner inuti dess förälder.
I detta exempel nästlar vi en grid i en förälder med 8 kolumner.
Det innebär att kolumernas storlek kommer motsvara tolftedelar utav förälderns 8 kolumner och inte längre skärmstorleken.
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text.
Lite text
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text.
Lite text
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text.
<divclass="container-fluid"><divclass="row example-grid row--align-top"><divclass="col col--sm-4"><divclass="example-content">Lite text</div></div><divclass="col col--sm-4"><divclass="example-content">
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text.
</div></div></div><divclass="row example-grid row--align-middle"><divclass="col col--sm-4"><divclass="example-content">Lite text</div></div><divclass="col col--sm-4"><divclass="example-content">
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text.
</div></div></div><divclass="row example-grid row--align-bottom"><divclass="col col--sm-4"><divclass="example-content">Lite text</div></div><divclass="col col--sm-4"><divclass="example-content">
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text.
</div></div></div></div>
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text.
Lite text
Lite text
Lite text
<divclass="container-fluid"><divclass="row example-grid "><divclass="col col--md-3"><divclass="example-content">
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text. Massa text. Massa text. Massa text. Massa text.
Massa text.
</div></div><divclass="col col--md-3 col--align-top"><divclass="example-content">Lite text</div></div><divclass="col col--md-3 col--align-bottom"><divclass="example-content">Lite text</div></div><divclass="col col--md-3 col--align-middle"><divclass="example-content">Lite text</div></div></div></div>
Grid inkluderar flera hjälpklasser för dynamisk ordning, col--order-$ORDNING och col--$BRYTPUNKT-order-$ORDNING så att det är lättare att byta ordning på kolumner dynamiskt mellan olika brytpunkter.
