Internetstiftelsen Styleguide

Grid 

<style>
    .styleguide-visible-grid {
        background-color: #0477ce;
        margin-bottom: 1rem;
        color: #fff;
    }

    .styleguide-align-containers {
        background-color: #a7d8fd;
        height: 100px;
        margin-bottom: 2rem;
        color: #fff;
    }

    .align-items-stretch .styleguide-visible-grid {
        min-height: 100%;
    }

    code {
        background-color: #ededed;
    }
</style>

<div class="wrapper u-p-y-4" id="content">
    <div class="row">
        <div class="grid-sm-12 grid-18">
            <h1>Gridsystem</h1>
            <p class="preamble">Internetstiftelsens layout-grid är en 18-kolumnsgrid med 20 pixlars gap mellan varje kolumn, 10 pixlar på varje sida. Griden är baserad på flexbox.</p>
        </div>
    </div>

    <div class="row">
        <div class="grid-sm-12 grid-18">
            <h2>Wrapper och Row</h2>
            <p>För att hålla dina containers på plats används en omgivande container med klassen <code>.wrapper</code>. Denna ser till att kolumnerna centreras och får en maxbredd på 1360px. Vill man ha en fullbred layout behövs inte denna omgivande container.</p>
            <p>För varje rad med kolumner används en omgivande container med klassen <code>.row</code></p>
        </div>
    </div>

    <div class="row">
        <div class="grid-18">
            <h2>Kolumner</h2>
            <p>Det finns totalt 18 kolumner. För att styra hur många kolumner en container ska ta upp används klasserna <code>.grid-{columns}</code>.</p>
        </div>
    </div>
    <div class="row">
        <div class="grid-1">
            <div class="styleguide-visible-grid">
                .grid-1
            </div>
        </div>
        <div class="grid-17">
            <div class="styleguide-visible-grid">
                .grid-17
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid-2">
            <div class="styleguide-visible-grid">
                .grid-2
            </div>
        </div>
        <div class="grid-16">
            <div class="styleguide-visible-grid">
                .grid-16
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid-3">
            <div class="styleguide-visible-grid">
                .grid-3
            </div>
        </div>
        <div class="grid-15">
            <div class="styleguide-visible-grid">
                .grid-15
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid-4">
            <div class="styleguide-visible-grid">
                .grid-4
            </div>
        </div>
        <div class="grid-14">
            <div class="styleguide-visible-grid">
                .grid-14
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid-5">
            <div class="styleguide-visible-grid">
                .grid-5
            </div>
        </div>
        <div class="grid-13">
            <div class="styleguide-visible-grid">
                .grid-13
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid-6">
            <div class="styleguide-visible-grid">
                .grid-6
            </div>
        </div>
        <div class="grid-12">
            <div class="styleguide-visible-grid">
                .grid-12
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid-7">
            <div class="styleguide-visible-grid">
                .grid-7
            </div>
        </div>
        <div class="grid-11">
            <div class="styleguide-visible-grid">
                .grid-11
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid-8">
            <div class="styleguide-visible-grid">
                .grid-8
            </div>
        </div>
        <div class="grid-10">
            <div class="styleguide-visible-grid">
                .grid-10
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid-9">
            <div class="styleguide-visible-grid">
                .grid-9
            </div>
        </div>
        <div class="grid-9">
            <div class="styleguide-visible-grid">
                .grid-9
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid-10">
            <div class="styleguide-visible-grid">
                .grid-10
            </div>
        </div>
        <div class="grid-8">
            <div class="styleguide-visible-grid">
                .grid-8
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid-11">
            <div class="styleguide-visible-grid">
                .grid-11
            </div>
        </div>
        <div class="grid-7">
            <div class="styleguide-visible-grid">
                .grid-7
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-12">
            <div class="styleguide-visible-grid">
                .grid-12
            </div>
        </div>
        <div class="grid-6">
            <div class="styleguide-visible-grid">
                .grid-6
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-13">
            <div class="styleguide-visible-grid">
                .grid-13
            </div>
        </div>
        <div class="grid-5">
            <div class="styleguide-visible-grid">
                .grid-5
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-14">
            <div class="styleguide-visible-grid">
                .grid-14
            </div>
        </div>
        <div class="grid-4">
            <div class="styleguide-visible-grid">
                .grid-4
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-15">
            <div class="styleguide-visible-grid">
                .grid-15
            </div>
        </div>
        <div class="grid-3">
            <div class="styleguide-visible-grid">
                .grid-3
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-16">
            <div class="styleguide-visible-grid">
                .grid-16
            </div>
        </div>
        <div class="grid-2">
            <div class="styleguide-visible-grid">
                .grid-2
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-17">
            <div class="styleguide-visible-grid">
                .grid-17
            </div>
        </div>
        <div class="grid-1">
            <div class="styleguide-visible-grid">
                .grid-1
            </div>
        </div>
    </div>

    <div class="row u-m-b-4">
        <div class="grid-18">
            <div class="styleguide-visible-grid">
                .grid-18
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-sm-12 grid-18">
            <h2>Dynamisk kolumnbredd</h2>
            <p>Om en container alltid ska ta upp resterande tillgänglig yta behöver den bara ges klassen <code>.grid</code></p>
        </div>
    </div>

    <div class="row u-m-b-4">
        <div class="grid-2">
            <div class="styleguide-visible-grid">
                .grid-2
            </div>
        </div>
        <div class="grid-4">
            <div class="styleguide-visible-grid">
                .grid-4
            </div>
        </div>
        <div class="grid">
            <div class="styleguide-visible-grid">
                .grid
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-sm-12 grid-18">
            <h2>Kolumnbredd baserad på innehåll</h2>
            <p>Om en container alltid ska ta upp samma yta som dess innehåll används klasserna <code>.grid-auto</code> eller <code>.grid-{breakpoint}-auto</code> <a href="#breakpoints">Läs mer om breakpoints</a>.</p>
        </div>
    </div>

    <div class="row u-m-b-4">
        <div class="grid-md-auto">
            <div class="styleguide-visible-grid">
                .grid-md-auto
            </div>
        </div>
        <div class="grid-6">
            <div class="styleguide-visible-grid">
                .grid-6
            </div>
        </div>
        <div class="grid">
            <div class="styleguide-visible-grid">
                .grid
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-sm-12 grid-18">
            <h2 id="breakpoints">Breakpoints</h2>
            <p>Det finns 7 olika fasta breakpoints. Där emellan är containrarnas bredd dynamisk. Dessa breakpoints är följande:</p>
            <ul>
                <li><code>xs: 0</code>
                    < 469px</li>
                <li><code>sm-xs: 469px</code> ≥ 469px</li>
                <li><code>sm: 576px</code> ≥ 576px</li>
                <li><code>md: 769px</code> ≥ 769px</li>
                <li><code>lg: 961px</code> ≥ 961px</li>
                <li><code>xl: 1200px</code> ≥ 1200px</li>
                <li><code>xxl: 1400px</code> ≥ 1400px</li>
            </ul>
            <p>För att ge en kolumn en viss bredd vid en viss breakpoint använd klasserna <code>.grid-{breakpoint}-{columns}</code></p>
            <p><strong>OBS!</strong>: Du behöver bara ange den minsta breakpoint där du vill att det ska slå igenom. Vid lägsta breakpointen <code>xs</code> anges inget prefix utan då används istället <code>.grid-{columns}</code></p>
        </div>
    </div>
    <div class="row">
        <div class="grid-sm-6 grid-18">
            <div class="styleguide-visible-grid">
                .grid-sm-6 .grid-18
            </div>
        </div>
        <div class="grid-sm-12 grid-18">
            <div class="styleguide-visible-grid">
                .grid-sm-12 .grid-18
            </div>
        </div>
    </div>
    <div class="row">
        <div class="grid-sm-9 grid-18">
            <div class="styleguide-visible-grid">
                .grid-sm-9 .grid-18
            </div>
        </div>
        <div class="grid-sm-9 grid-18">
            <div class="styleguide-visible-grid">
                .grid-sm-9 .grid-18
            </div>
        </div>
    </div>
    <div class="row u-m-b-4 u-m-b-4">
        <div class="grid-sm-12 grid-18">
            <div class="styleguide-visible-grid">
                .grid-sm-12 .grid-18
            </div>
        </div>
        <div class="grid-sm-6 grid-18">
            <div class="styleguide-visible-grid">
                .grid-sm-6 .grid-18
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-sm-12 grid-18">
            <h2>Vertikal linjering</h2>
            <p>Du kan få dina containers att linjera upptill, nertill eller ligga centrerade inuti sin parent. Applicera klasserna <code>.align-items-start</code> <code>.align-items-end</code> eller <code>.align-items-center</code> på din <code>.row</code></p>
            <p>Samtliga dessa klasser går att kombinera med breakpoints <code>.align-items-{breakpoint}-start</code></p>
        </div>
    </div>
    .align-items-start
    <div class="row align-items-start styleguide-align-containers">
        <div class="grid-9">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-9
            </div>
        </div>
        <div class="grid-9">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-9
            </div>
        </div>
    </div>
    .align-items-end
    <div class="row align-items-end styleguide-align-containers">
        <div class="grid-9">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-9
            </div>
        </div>
        <div class="grid-9">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-9
            </div>
        </div>
    </div>
    .align-items-center
    <div class="row align-items-center styleguide-align-containers">
        <div class="grid-9">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-9
            </div>
        </div>
        <div class="grid-9">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-9
            </div>
        </div>
    </div>
    .align-items-baseline
    <div class="row align-items-baseline styleguide-align-containers">
        <div class="grid-9">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-9
            </div>
        </div>
        <div class="grid-9">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-9
            </div>
        </div>
    </div>
    .align-items-stretch
    <div class="row align-items-stretch styleguide-align-containers">
        <div class="grid-9">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-9
            </div>
        </div>
        <div class="grid-9">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-9
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-sm-12 grid-18">
            <h2>Horizontell linjering</h2>
            <p>Du kan få dina containers att linjera vänster, höger eller ligga centrerade inuti sin parent. Applicera klasserna <code>.justify-content-start</code>, <code>.justify-content-end</code> eller <code>.justify-content-center</code> på din <code>.row</code></p>
            <p>Samtliga dessa klasser går att kombinera med breakpoints <code>.justify-content-{breakpoint}-start</code></p>
        </div>
    </div>
    .justify-content-start
    <div class="row justify-content-start align-items-center styleguide-align-containers">
        <div class="grid-3">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-3
            </div>
        </div>
        <div class="grid-3">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-3
            </div>
        </div>
    </div>
    .justify-content-end
    <div class="row justify-content-end align-items-center styleguide-align-containers">
        <div class="grid-3">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-3
            </div>
        </div>
        <div class="grid-3">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-3
            </div>
        </div>
    </div>
    .justify-content-center
    <div class="row justify-content-center align-items-center styleguide-align-containers">
        <div class="grid-3">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-3
            </div>
        </div>
        <div class="grid-3">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-3
            </div>
        </div>
    </div>

    .justify-content-around
    <div class="row justify-content-around align-items-center styleguide-align-containers">
        <div class="grid-3">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-3
            </div>
        </div>
        <div class="grid-3">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-3
            </div>
        </div>
    </div>

    .justify-content-between
    <div class="row justify-content-between align-items-center styleguide-align-containers">
        <div class="grid-3">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-3
            </div>
        </div>
        <div class="grid-3">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-3
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-sm-12 grid-18">
            <h2>Blanda</h2>
            <p>Du kan även blanda mellan dessa alternativ</p>
        </div>
    </div>
    .align-items-center.justify-content-center
    <div class="row align-items-center justify-content-center styleguide-align-containers">
        <div class="grid-3">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-3
            </div>
        </div>
        <div class="grid-3">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-3
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-sm-12 grid-18">
            <h2>Ordning</h2>
            <p>Eftersom flexbox stöder <strong>order</strong> så kan man även ändra ordning på kolumnerna i griden med <code>.order-{column}</code> eller <code>.order-{breakpoint}-{column}</code>. På så sätt kan man få till en visuell ändring av ordningen utan att logiken i markupen påverkas.</p>
        </div>
    </div>

    Först men sist
    <div class="row align-items-center justify-content-center styleguide-align-containers">
        <div class="grid-6 order-2">
            <div class="styleguide-visible-grid u-m-b-0">
                .order-2
            </div>
        </div>
        <div class="grid-6 order-1">
            <div class="styleguide-visible-grid u-m-b-0">
                .order-1
            </div>
        </div>
    </div>

    <div class="row align-items-center justify-content-center styleguide-align-containers u-m-b-4">
        <div class="grid-6 order-lg-2">
            <div class="styleguide-visible-grid u-m-b-0">
                .order-2
            </div>
        </div>
        <div class="grid-6 order-lg-1">
            <div class="styleguide-visible-grid u-m-b-0">
                .order-lg-1
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-sm-12 grid-18">
            <h2>Inget mellanrum</h2>
            <p>Om det finns behov av att ta bort mellanrummet mellan containers kan klassen <code>.no-gutters</code> användas på <code>.row</code></p>
        </div>
    </div>
    <div class="row styleguide-align-containers align-items-center no-gutters u-m-b-4">
        <div class="grid-9">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-9
            </div>
        </div>
        <div class="grid-9">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-9
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-sm-12 grid-18">
            <h2>Offset</h2>
            <p>Om det finns behov av att "putta" kolumner används margins, t.ex. <code>.ml-auto</code> (margin-left: auto), <code>.mr-auto</code> (margin-right: auto) eller <code>.ml-{breakpoint}-auto</code> om det bara ska ske vid vissa breakpoints.</p>
            <p>Det går även att putta en kolumner med ett visst antal kolummner t.ex. <code>.offset-{breakpoint}-{columns}</code></p>
        </div>
    </div>

    <div class="row align-items-center styleguide-align-containers">
        <div class="grid-md-4">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-md-4
            </div>
        </div>
        <div class="grid-md-4 ml-auto">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-md-4 .ml-auto
            </div>
        </div>
    </div>
    <div class="row align-items-center styleguide-align-containers">
        <div class="grid-md-3 ml-md-auto">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-md-3 .ml-md-auto
            </div>
        </div>
        <div class="grid-md-3 mr-md-auto">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-md-3 .ml-md-auto
            </div>
        </div>
    </div>
    <div class="row align-items-center styleguide-align-containers u-m-b-4">
        <div class="grid-auto mr-auto">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-auto .mr-auto
            </div>
        </div>
        <div class="grid-auto">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-auto
            </div>
        </div>
    </div>
    <div class="row align-items-center styleguide-align-containers u-m-b-4">
        <div class="grid-auto offset-3">
            <div class="styleguide-visible-grid u-m-b-0">
                .offset-3
            </div>
        </div>
        <div class="grid-auto">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-auto
            </div>
        </div>
    </div>
    <div class="row align-items-center styleguide-align-containers u-m-b-4">
        <div class="grid-auto offset-lg-5">
            <div class="styleguide-visible-grid u-m-b-0">
                .offset-lg-5
            </div>
        </div>
        <div class="grid-auto">
            <div class="styleguide-visible-grid u-m-b-0">
                .grid-auto
            </div>
        </div>
    </div>

    <h2>Wordpress gutenberg columns block grid</h2>

    <div class="row background-ocean-light u-m-b-4">
        <div class="grid-18">
            <div class="wp-block-columns">
                <div class="wp-block-column background-ocean-dark color-snow">
                    50%
                </div>
                <div class="wp-block-column background-ocean-dark color-snow">
                    50%
                </div>
            </div>
        </div>
    </div>

    <h2>Two columns; one-third, two-thirds split</h2>

    <div class="row background-ocean-light u-m-b-4">
        <div class="grid-18">
            <div class="wp-block-columns">
                <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
                    33%
                </div>
                <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 66.66%">
                    66%
                </div>
            </div>

            <div class="wp-block-columns">
                <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 66.66%">
                    66%
                </div>
                <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
                    33%
                </div>
            </div>
        </div>
    </div>

    <h2>Three columns; equal split</h2>

    <div class="row background-ocean-light u-m-b-4">
        <div class="grid-18">
            <div class="wp-block-columns">
                <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
                    <p>33%</p>
                </div>
                <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
                    <p>33%</p>
                </div>
                <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
                    <p>33%</p>
                </div>
            </div>
        </div>
    </div>

    <h2>Three columns; wide center column</h2>

    <div class="row background-ocean-light u-m-b-4">
        <div class="grid-18">
            <div class="wp-block-columns">
                <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 25%">
                    <p>25%</p>
                </div>
                <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 50%">
                    50%
                </div>
                <div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 25%">
                    <p>25%</p>
                </div>
            </div>

            <h2>One column</h2>

            <div class="wp-block-columns">
                <div class="wp-block-column background-ocean-dark color-snow">
                    <p>100%</p>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="grid-sm-12 grid-18">
            <h2>Asymmetrisk grid</h2>
            <p>Placera kolumner asymmetriskt
            <p>
        </div>
    </div>

    <div class="row asymmetric-sm">
        <div class="grid-18 grid-sm-6">
            <div class="styleguide-visible-grid">
                Column 1
            </div>
        </div>
        <div class="grid-18 grid-sm-6">
            <div class="styleguide-visible-grid">
                Column 2
            </div>
        </div>
        <div class="grid-18 grid-sm-6">
            <div class="styleguide-visible-grid">
                Column 3
            </div>
        </div>
    </div>

    <div class="row asymmetric-sm asymmetric-reversed">
        <div class="grid-18 grid-sm-6">
            <div class="styleguide-visible-grid">
                Column 1
            </div>
        </div>
        <div class="grid-18 grid-sm-6">
            <div class="styleguide-visible-grid">
                Column 2
            </div>
        </div>
        <div class="grid-18 grid-sm-6">
            <div class="styleguide-visible-grid">
                Column 3
            </div>
        </div>
    </div>
</div>
</div>
 
<style>
.styleguide-visible-grid {
	background-color: #0477ce;
	margin-bottom: 1rem;
	color: #fff;
}

.styleguide-align-containers {
	background-color: #a7d8fd;
	height: 100px;
	margin-bottom: 2rem;
	color: #fff;
}

.align-items-stretch .styleguide-visible-grid {
	min-height: 100%;
}

code {
	background-color: #ededed;
}
</style>

<div class="wrapper u-p-y-4" id="content">
	<div class="row">
		<div class="grid-sm-12 grid-18">
			<h1>Gridsystem</h1>
			<p class="preamble">Internetstiftelsens layout-grid är en 18-kolumnsgrid med 20 pixlars gap mellan varje kolumn, 10 pixlar på varje sida. Griden är baserad på flexbox.</p>
		</div>
	</div>

	<div class="row">
		<div class="grid-sm-12 grid-18">
			<h2>Wrapper och Row</h2>
			<p>För att hålla dina containers på plats används en omgivande container med klassen <code>.wrapper</code>. Denna ser till att kolumnerna centreras och får en maxbredd på 1360px. Vill man ha en fullbred layout behövs inte denna omgivande container.</p>
			<p>För varje rad med kolumner används en omgivande container med klassen <code>.row</code></p>
		</div>
	</div>

	<div class="row">
		<div class="grid-18">
			<h2>Kolumner</h2>
			<p>Det finns totalt 18 kolumner. För att styra hur många kolumner en container ska ta upp används klasserna <code>.grid-{columns}</code>.</p>
		</div>
	</div>
	<div class="row">
		<div class="grid-1">
			<div class="styleguide-visible-grid">
				.grid-1
			</div>
		</div>
		<div class="grid-17">
			<div class="styleguide-visible-grid">
				.grid-17
			</div>
		</div>
	</div>
	<div class="row">
		<div class="grid-2">
			<div class="styleguide-visible-grid">
				.grid-2
			</div>
		</div>
		<div class="grid-16">
			<div class="styleguide-visible-grid">
				.grid-16
			</div>
		</div>
	</div>
	<div class="row">
		<div class="grid-3">
			<div class="styleguide-visible-grid">
				.grid-3
			</div>
		</div>
		<div class="grid-15">
			<div class="styleguide-visible-grid">
				.grid-15
			</div>
		</div>
	</div>
	<div class="row">
		<div class="grid-4">
			<div class="styleguide-visible-grid">
				.grid-4
			</div>
		</div>
		<div class="grid-14">
			<div class="styleguide-visible-grid">
				.grid-14
			</div>
		</div>
	</div>
	<div class="row">
		<div class="grid-5">
			<div class="styleguide-visible-grid">
				.grid-5
			</div>
		</div>
		<div class="grid-13">
			<div class="styleguide-visible-grid">
				.grid-13
			</div>
		</div>
	</div>
	<div class="row">
		<div class="grid-6">
			<div class="styleguide-visible-grid">
				.grid-6
			</div>
		</div>
		<div class="grid-12">
			<div class="styleguide-visible-grid">
				.grid-12
			</div>
		</div>
	</div>
	<div class="row">
		<div class="grid-7">
			<div class="styleguide-visible-grid">
				.grid-7
			</div>
		</div>
		<div class="grid-11">
			<div class="styleguide-visible-grid">
				.grid-11
			</div>
		</div>
	</div>
	<div class="row">
		<div class="grid-8">
			<div class="styleguide-visible-grid">
				.grid-8
			</div>
		</div>
		<div class="grid-10">
			<div class="styleguide-visible-grid">
				.grid-10
			</div>
		</div>
	</div>
	<div class="row">
		<div class="grid-9">
			<div class="styleguide-visible-grid">
				.grid-9
			</div>
		</div>
		<div class="grid-9">
			<div class="styleguide-visible-grid">
				.grid-9
			</div>
		</div>
	</div>
	<div class="row">
		<div class="grid-10">
			<div class="styleguide-visible-grid">
				.grid-10
			</div>
		</div>
		<div class="grid-8">
			<div class="styleguide-visible-grid">
				.grid-8
			</div>
		</div>
	</div>
	<div class="row">
		<div class="grid-11">
			<div class="styleguide-visible-grid">
				.grid-11
			</div>
		</div>
		<div class="grid-7">
			<div class="styleguide-visible-grid">
				.grid-7
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-12">
			<div class="styleguide-visible-grid">
				.grid-12
			</div>
		</div>
		<div class="grid-6">
			<div class="styleguide-visible-grid">
				.grid-6
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-13">
			<div class="styleguide-visible-grid">
				.grid-13
			</div>
		</div>
		<div class="grid-5">
			<div class="styleguide-visible-grid">
				.grid-5
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-14">
			<div class="styleguide-visible-grid">
				.grid-14
			</div>
		</div>
		<div class="grid-4">
			<div class="styleguide-visible-grid">
				.grid-4
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-15">
			<div class="styleguide-visible-grid">
				.grid-15
			</div>
		</div>
		<div class="grid-3">
			<div class="styleguide-visible-grid">
				.grid-3
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-16">
			<div class="styleguide-visible-grid">
				.grid-16
			</div>
		</div>
		<div class="grid-2">
			<div class="styleguide-visible-grid">
				.grid-2
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-17">
			<div class="styleguide-visible-grid">
				.grid-17
			</div>
		</div>
		<div class="grid-1">
			<div class="styleguide-visible-grid">
				.grid-1
			</div>
		</div>
	</div>

	<div class="row u-m-b-4">
		<div class="grid-18">
			<div class="styleguide-visible-grid">
				.grid-18
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-sm-12 grid-18">
			<h2>Dynamisk kolumnbredd</h2>
			<p>Om en container alltid ska ta upp resterande tillgänglig yta behöver den bara ges klassen <code>.grid</code></p>
		</div>
	</div>

	<div class="row u-m-b-4">
		<div class="grid-2">
			<div class="styleguide-visible-grid">
				.grid-2
			</div>
		</div>
		<div class="grid-4">
			<div class="styleguide-visible-grid">
				.grid-4
			</div>
		</div>
		<div class="grid">
			<div class="styleguide-visible-grid">
				.grid
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-sm-12 grid-18">
			<h2>Kolumnbredd baserad på innehåll</h2>
			<p>Om en container alltid ska ta upp samma yta som dess innehåll används klasserna <code>.grid-auto</code> eller <code>.grid-{breakpoint}-auto</code> <a href="#breakpoints">Läs mer om breakpoints</a>.</p>
		</div>
	</div>

	<div class="row u-m-b-4">
		<div class="grid-md-auto">
			<div class="styleguide-visible-grid">
				.grid-md-auto
			</div>
		</div>
		<div class="grid-6">
			<div class="styleguide-visible-grid">
				.grid-6
			</div>
		</div>
		<div class="grid">
			<div class="styleguide-visible-grid">
				.grid
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-sm-12 grid-18">
			<h2 id="breakpoints">Breakpoints</h2>
			<p>Det finns 7 olika fasta breakpoints. Där emellan är containrarnas bredd dynamisk. Dessa breakpoints är följande:</p>
			<ul>
				<li><code>xs: 0</code> < 469px</li>
				<li><code>sm-xs: 469px</code> ≥ 469px</li>
				<li><code>sm: 576px</code> ≥ 576px</li>
				<li><code>md: 769px</code> ≥ 769px</li>
				<li><code>lg: 961px</code> ≥ 961px</li>
				<li><code>xl: 1200px</code> ≥ 1200px</li>
				<li><code>xxl: 1400px</code> ≥ 1400px</li>
			</ul>
			<p>För att ge en kolumn en viss bredd vid en viss breakpoint använd klasserna <code>.grid-{breakpoint}-{columns}</code></p>
			<p><strong>OBS!</strong>: Du behöver bara ange den minsta breakpoint där du vill att det ska slå igenom. Vid lägsta breakpointen <code>xs</code> anges inget prefix utan då används istället <code>.grid-{columns}</code></p>
		</div>
	</div>
	<div class="row">
		<div class="grid-sm-6 grid-18">
			<div class="styleguide-visible-grid">
				.grid-sm-6 .grid-18
			</div>
		</div>
		<div class="grid-sm-12 grid-18">
			<div class="styleguide-visible-grid">
				.grid-sm-12 .grid-18
			</div>
		</div>
	</div>
	<div class="row">
		<div class="grid-sm-9 grid-18">
			<div class="styleguide-visible-grid">
				.grid-sm-9 .grid-18
			</div>
		</div>
		<div class="grid-sm-9 grid-18">
			<div class="styleguide-visible-grid">
				.grid-sm-9 .grid-18
			</div>
		</div>
	</div>
	<div class="row u-m-b-4 u-m-b-4">
		<div class="grid-sm-12 grid-18">
			<div class="styleguide-visible-grid">
				.grid-sm-12 .grid-18
			</div>
		</div>
		<div class="grid-sm-6 grid-18">
			<div class="styleguide-visible-grid">
				.grid-sm-6 .grid-18
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-sm-12 grid-18">
			<h2>Vertikal linjering</h2>
			<p>Du kan få dina containers att linjera upptill, nertill eller ligga centrerade inuti sin parent. Applicera klasserna <code>.align-items-start</code> <code>.align-items-end</code> eller <code>.align-items-center</code> på din <code>.row</code></p>
			<p>Samtliga dessa klasser går att kombinera med breakpoints <code>.align-items-{breakpoint}-start</code></p>
		</div>
	</div>
	.align-items-start
	<div class="row align-items-start styleguide-align-containers">
		<div class="grid-9">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-9
			</div>
		</div>
		<div class="grid-9">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-9
			</div>
		</div>
	</div>
	.align-items-end
	<div class="row align-items-end styleguide-align-containers">
		<div class="grid-9">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-9
			</div>
		</div>
		<div class="grid-9">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-9
			</div>
		</div>
	</div>
	.align-items-center
	<div class="row align-items-center styleguide-align-containers">
		<div class="grid-9">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-9
			</div>
		</div>
		<div class="grid-9">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-9
			</div>
		</div>
	</div>
	.align-items-baseline
	<div class="row align-items-baseline styleguide-align-containers">
		<div class="grid-9">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-9
			</div>
		</div>
		<div class="grid-9">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-9
			</div>
		</div>
	</div>
	.align-items-stretch
	<div class="row align-items-stretch styleguide-align-containers">
		<div class="grid-9">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-9
			</div>
		</div>
		<div class="grid-9">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-9
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-sm-12 grid-18">
			<h2>Horizontell linjering</h2>
			<p>Du kan få dina containers att linjera vänster, höger eller ligga centrerade inuti sin parent. Applicera klasserna <code>.justify-content-start</code>, <code>.justify-content-end</code> eller <code>.justify-content-center</code> på din <code>.row</code></p>
			<p>Samtliga dessa klasser går att kombinera med breakpoints <code>.justify-content-{breakpoint}-start</code></p>
		</div>
	</div>
	.justify-content-start
	<div class="row justify-content-start align-items-center styleguide-align-containers">
		<div class="grid-3">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-3
			</div>
		</div>
		<div class="grid-3">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-3
			</div>
		</div>
	</div>
	.justify-content-end
	<div class="row justify-content-end align-items-center styleguide-align-containers">
		<div class="grid-3">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-3
			</div>
		</div>
		<div class="grid-3">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-3
			</div>
		</div>
	</div>
	.justify-content-center
	<div class="row justify-content-center align-items-center styleguide-align-containers">
		<div class="grid-3">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-3
			</div>
		</div>
		<div class="grid-3">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-3
			</div>
		</div>
	</div>

	.justify-content-around
	<div class="row justify-content-around align-items-center styleguide-align-containers">
		<div class="grid-3">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-3
			</div>
		</div>
		<div class="grid-3">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-3
			</div>
		</div>
	</div>

	.justify-content-between
	<div class="row justify-content-between align-items-center styleguide-align-containers">
		<div class="grid-3">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-3
			</div>
		</div>
		<div class="grid-3">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-3
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-sm-12 grid-18">
			<h2>Blanda</h2>
			<p>Du kan även blanda mellan dessa alternativ</p>
		</div>
	</div>
	.align-items-center.justify-content-center
	<div class="row align-items-center justify-content-center styleguide-align-containers">
		<div class="grid-3">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-3
			</div>
		</div>
		<div class="grid-3">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-3
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-sm-12 grid-18">
			<h2>Ordning</h2>
			<p>Eftersom flexbox stöder <strong>order</strong> så kan man även ändra ordning på kolumnerna i griden med <code>.order-{column}</code> eller <code>.order-{breakpoint}-{column}</code>. På så sätt kan man få till en visuell ändring av ordningen utan att logiken i markupen påverkas.</p>
		</div>
	</div>

	Först men sist
	<div class="row align-items-center justify-content-center styleguide-align-containers">
		<div class="grid-6 order-2">
			<div class="styleguide-visible-grid u-m-b-0">
				.order-2
			</div>
		</div>
		<div class="grid-6 order-1">
			<div class="styleguide-visible-grid u-m-b-0">
				.order-1
			</div>
		</div>
	</div>

	<div class="row align-items-center justify-content-center styleguide-align-containers u-m-b-4">
		<div class="grid-6 order-lg-2">
			<div class="styleguide-visible-grid u-m-b-0">
				.order-2
			</div>
		</div>
		<div class="grid-6 order-lg-1">
			<div class="styleguide-visible-grid u-m-b-0">
				.order-lg-1
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-sm-12 grid-18">
			<h2>Inget mellanrum</h2>
			<p>Om det finns behov av att ta bort mellanrummet mellan containers kan klassen <code>.no-gutters</code> användas på <code>.row</code></p>
		</div>
	</div>
	<div class="row styleguide-align-containers align-items-center no-gutters u-m-b-4">
		<div class="grid-9">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-9
			</div>
		</div>
		<div class="grid-9">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-9
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-sm-12 grid-18">
			<h2>Offset</h2>
			<p>Om det finns behov av att "putta" kolumner används margins, t.ex. <code>.ml-auto</code> (margin-left: auto), <code>.mr-auto</code> (margin-right: auto) eller <code>.ml-{breakpoint}-auto</code> om det bara ska ske vid vissa breakpoints.</p>
			<p>Det går även att putta en kolumner med ett visst antal kolummner t.ex. <code>.offset-{breakpoint}-{columns}</code></p>
		</div>
	</div>

	<div class="row align-items-center styleguide-align-containers">
		<div class="grid-md-4">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-md-4
			</div>
		</div>
		<div class="grid-md-4 ml-auto">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-md-4 .ml-auto
			</div>
		</div>
	</div>
	<div class="row align-items-center styleguide-align-containers">
		<div class="grid-md-3 ml-md-auto">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-md-3 .ml-md-auto
			</div>
		</div>
		<div class="grid-md-3 mr-md-auto">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-md-3 .ml-md-auto
			</div>
		</div>
	</div>
	<div class="row align-items-center styleguide-align-containers u-m-b-4">
		<div class="grid-auto mr-auto">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-auto .mr-auto
			</div>
		</div>
		<div class="grid-auto">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-auto
			</div>
		</div>
	</div>
	<div class="row align-items-center styleguide-align-containers u-m-b-4">
		<div class="grid-auto offset-3">
			<div class="styleguide-visible-grid u-m-b-0">
				.offset-3
			</div>
		</div>
		<div class="grid-auto">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-auto
			</div>
		</div>
	</div>
	<div class="row align-items-center styleguide-align-containers u-m-b-4">
		<div class="grid-auto offset-lg-5">
			<div class="styleguide-visible-grid u-m-b-0">
				.offset-lg-5
			</div>
		</div>
		<div class="grid-auto">
			<div class="styleguide-visible-grid u-m-b-0">
				.grid-auto
			</div>
		</div>
	</div>

	<h2>Wordpress gutenberg columns block grid</h2>

	<div class="row background-ocean-light u-m-b-4">
		<div class="grid-18">
			<div class="wp-block-columns">
				<div class="wp-block-column background-ocean-dark color-snow">
					50%
				</div>
				<div class="wp-block-column background-ocean-dark color-snow">
					50%
				</div>
			</div>
		</div>
	</div>

	<h2>Two columns; one-third, two-thirds split</h2>

	<div class="row background-ocean-light u-m-b-4">
		<div class="grid-18">
			<div class="wp-block-columns">
				<div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
					33%
				</div>
				<div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 66.66%">
					66%
				</div>
			</div>

			<div class="wp-block-columns">
				<div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 66.66%">
					66%
				</div>
				<div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
					33%
				</div>
			</div>
		</div>
	</div>

	<h2>Three columns; equal split</h2>

	<div class="row background-ocean-light u-m-b-4">
		<div class="grid-18">
			<div class="wp-block-columns">
				<div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
					<p>33%</p>
				</div>
				<div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
					<p>33%</p>
				</div>
				<div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 33.33%">
					<p>33%</p>
				</div>
			</div>
		</div>
	</div>

	<h2>Three columns; wide center column</h2>

	<div class="row background-ocean-light u-m-b-4">
		<div class="grid-18">
			<div class="wp-block-columns">
				<div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 25%">
					<p>25%</p>
				</div>
				<div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 50%">
					50%
				</div>
				<div class="wp-block-column background-ocean-dark color-snow" style="flex-basis: 25%">
					<p>25%</p>
				</div>
			</div>

			<h2>One column</h2>

			<div class="wp-block-columns">
				<div class="wp-block-column background-ocean-dark color-snow">
					<p>100%</p>
				</div>
			</div>
		</div>
	</div>

	<div class="row">
		<div class="grid-sm-12 grid-18">
			<h2>Asymmetrisk grid</h2>
			<p>Placera kolumner asymmetriskt<p>
			</div>
		</div>

		<div class="row asymmetric-sm">
			<div class="grid-18 grid-sm-6">
				<div class="styleguide-visible-grid">
					Column 1
				</div>
			</div>
			<div class="grid-18 grid-sm-6">
				<div class="styleguide-visible-grid">
					Column 2
				</div>
			</div>
			<div class="grid-18 grid-sm-6">
				<div class="styleguide-visible-grid">
					Column 3
				</div>
			</div>
		</div>

		<div class="row asymmetric-sm asymmetric-reversed">
			<div class="grid-18 grid-sm-6">
				<div class="styleguide-visible-grid">
					Column 1
				</div>
			</div>
			<div class="grid-18 grid-sm-6">
				<div class="styleguide-visible-grid">
					Column 2
				</div>
			</div>
			<div class="grid-18 grid-sm-6">
				<div class="styleguide-visible-grid">
					Column 3
				</div>
			</div>
		</div>
	</div>
</div>
 
{
  "title": "Grid",
  "description": "Layout grid - 18 columns."
}
  • Content: 
    @charset "UTF-8";

@use "sass:math";
@use '../variables' as var;
@use '../functions' as func;
@use '../../vendor/grid/grid' as grid;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid-framework' as gridFramework;

// Grid only
//
// Includes relevant variables and mixins for the flexbox grid
// system, as well as the generated predefined classes (e.g., `.col-sm-4`).

//
// Box sizing, responsive, and more
//

@at-root {
	@-ms-viewport { width: device-width; }
}

// Container widths
//
// Set the container width, and override it for fixed navbars in media queries.

@if var.$enable-grid-classes {
	.wrapper,
	%wrapper {
		@include grid.make-container();
		@include grid.make-container-max-widths();

		// Specify bigger wrapper padding on smaller screens
		@include breakpoint.bp-down(xl) {
			padding-right: var.$grid-gutter-width;
			padding-left: var.$grid-gutter-width;
		}
	}
}

// Fluid container
//
// Utilizes the mixin meant for fixed width containers, but with 100% width for
// fluid, full width layouts.

@if var.$enable-grid-classes {
	.wrapper-fluid {
		@include grid.make-container();
	}
}

// Row
//
// Rows contain and clear the floats of your columns.

@mixin make-asymmetric-cols($gap, $reversed: false) {
	@for $i from 1 through 3 {
		$col-gap: $gap * ($i - 1);

		@if $reversed == false {
			$col-gap: -$col-gap;
		}

		> .grid,
		> [class*='grid-']:nth-child(#{$i}) {
			transform: translateY(func.rhythm($col-gap));
		}

		@include breakpoint.bp-only(sm) {
			> [class*='grid-']:last-child {
				transform: translateY(func.rhythm($gap));
			}
		}
	}
}

@mixin make-asymmetric-row() {
	$gap: 6;
	$bp-gap: $gap;
	$margin: 7;

	margin: func.rhythm($margin) 0 0;

	&:not(.asymmetric-reversed) {
		@include make-asymmetric-cols($bp-gap);
	}

	&.asymmetric-reversed {
		@include make-asymmetric-cols($bp-gap, true);
	}

	@include breakpoint.bp-up(sm) {
		margin: func.rhythm($margin * 1.25) 0 0;

		&:not(.asymmetric-reversed) {
			$bp-gap: $gap * 1.25;
			@include make-asymmetric-cols($bp-gap);
		}

		&.asymmetric-reversed {
			$bp-gap: math.div($gap, 2);
			@include make-asymmetric-cols($bp-gap, true);
		}
	}

	@include breakpoint.bp-up(md) {
		&.asymmetric-reversed {
			margin-bottom: calc(100px);
		}
	}

	@include breakpoint.bp-up(lg) {


		margin: func.rhythm($margin * 1.5) 0 0;

		&:not(.asymmetric-reversed) {
			$bp-gap: $gap * 1.5;
			@include make-asymmetric-cols($bp-gap);
		}

		&.asymmetric-reversed {
			$bp-gap: $gap;
			@include make-asymmetric-cols($bp-gap, true);
			margin-bottom: calc(125px);
		}
	}

	@include breakpoint.bp-up(xl) {
		margin: func.rhythm($margin * 2) 0 0;

		&:not(.asymmetric-reversed) {
			$bp-gap: $gap * 2;
			@include make-asymmetric-cols($bp-gap);
		}

		&.asymmetric-reversed {
			$bp-gap: $gap;
			@include make-asymmetric-cols($bp-gap, true);
			margin-bottom: calc(150px);
		}
	}
}

@if var.$enable-grid-classes {
	.row {
		@include grid.make-row();
	}

	.asymmetric {
		@include make-asymmetric-row;

		@include breakpoint.bp-up(sm) {
			&-sm {
				@include make-asymmetric-row;
			}
		}

		@include breakpoint.bp-up(md) {
			&-md {
				@include make-asymmetric-row;
			}
		}

		@include breakpoint.bp-up(lg) {
			&-lg {
				@include make-asymmetric-row;
			}
		}

		@include breakpoint.bp-up(xl) {
			&-xl {
				@include make-asymmetric-row;
			}
		}
	}

	// Remove the negative margin from default .row, then the horizontal padding
	// from all immediate children columns (to prevent runaway style inheritance).
	.no-gutters {
		margin-right: 0;
		margin-left: 0;

		> .grid,
		> [class*='grid-'] {
			padding-right: 0;
			padding-left: 0;
		}
	}

	.no-wrap {
		flex-wrap: nowrap;
	}
}

// Columns
//
// Common styles for small and large grid columns

@if var.$enable-grid-classes {
	@include gridFramework.make-grid-columns();
}
  • URL: /components/raw/grid/_grid.scss
  • Filesystem Path: src/configurations/grid/_grid.scss
  • Size: 3.8 KB

Grid system

Breakpoints

  • xs: 0 < 576px
  • sm: 576px ≥ 576px
  • md: 769px ≥ 769px
  • lg: 961px ≥ 961px
  • xl: 1200px ≥ 1200px
  • xxl: 1400px ≥ 1400px

Complete list of available classes

Basic grid classes

  • .wrapper
  • .row
  • .grid
  • .grid-{column}
  • .grid-{breakpoint}-{column}
  • .grid-auto

Optional classes

Flex classes

  • .display-flex { display: flex !important; }

  • .flex-{breakpoint}-row { flex-direction: row !important; }

  • .flex-{breakpoint}-column { flex-direction: column !important; }

  • .flex-{breakpoint}-row-reverse { flex-direction: row-reverse !important; }

  • .flex-{breakpoint}-column-reverse { flex-direction: column-reverse !important; }

  • .flex-{breakpoint}-wrap { flex-wrap: wrap !important; }

  • .flex-{breakpoint}-nowrap { flex-wrap: nowrap !important; }

  • .flex-{breakpoint}-wrap-reverse { flex-wrap: wrap-reverse !important; }

Justify classes

  • .justify-content-{breakpoint}-start { justify-content: flex-start !important; }
  • .justify-content-{breakpoint}-end { justify-content: flex-end !important; }
  • .justify-content-{breakpoint}-center { justify-content: center !important; }
  • .justify-content-{breakpoint}-between { justify-content: space-between !important; }
  • .justify-content-{breakpoint}-around { justify-content: space-around !important; }

Align classes

  • .align-items-{breakpoint}-start { align-items: flex-start !important; }

  • .align-items-{breakpoint}-end { align-items: flex-end !important; }

  • .align-items-{breakpoint}-center { align-items: center !important; }

  • .align-items-{breakpoint}-baseline { align-items: baseline !important; }

  • .align-items-{breakpoint}-stretch { align-items: stretch !important; }

  • .align-content-{breakpoint}-start { align-content: flex-start !important; }

  • .align-content-{breakpoint}-end { align-content: flex-end !important; }

  • .align-content-{breakpoint}-center { align-content: center !important; }

  • .align-content-{breakpoint}-between { align-content: space-between !important; }

  • .align-content-{breakpoint}-around { align-content: space-around !important; }

  • .align-content-{breakpoint}-stretch { align-content: stretch !important; }

  • .align-self-{breakpoint}-auto { align-self: auto !important; }

  • .align-self-{breakpoint}-start { align-self: flex-start !important; }

  • .align-self-{breakpoint}-end { align-self: flex-end !important; }

  • .align-self-{breakpoint}-center { align-self: center !important; }

  • .align-self-{breakpoint}-baseline { align-self: baseline !important; }

  • .align-self-{breakpoint}-stretch { align-self: stretch !important; }

Margin classes

  • .m-{breakpoint}-auto { margin: auto !important; }

  • .mt-{breakpoint}-auto { margin-top: auto !important; }

  • .mr-{breakpoint}-auto { margin-right: auto !important; }

  • .mb-{breakpoint}-auto { margin-bottom: auto !important; }

  • .ml-{breakpoint}-auto { margin-left: auto !important; }

  • .mx-{breakpoint}-auto { margin-right: auto !important; margin-left: auto !important; }

  • .my-{breakpoint}-auto { margin-top: auto !important; margin-bottom: auto !important; }

Offset classes

  • .offset-{columns};
  • .offset-{breakpoint-{columns};