Grid

Je kan met de UIkit een volledig responsive en geneste grid layout maken.

Hoe te gebruiken

Om een grid te maken  moet aan een element de class .uk-grid class worden toegevoegd. De onderstaande opties zijn moegelijk.

Class Beschrijving
.uk-width-1-1 Grid over de volledige breedte van de website.
.uk-width-1-2 Grid over de halve breedte van de website.
.uk-width-1-3 tm .uk-width-2-3 Verdeeld de grid in 3 delen.
.uk-width-1-4 tm .uk-width-3-4 Verdeeld de grid in 4 delen.
.uk-width-1-5 tm .uk-width-4-5 Verdeeld de grid in 5 delen.
.uk-width-1-6 tm .uk-width-5-6 Verdeeld de grid in 6 delen.
.uk-width-1-10 tm .uk-width-9-10 Verdeeld de grid in 10 delen.

Voorbeelden

Onderstaande voorbeelden geven de diverse mogelijkheden van de basis .uk-width-* classes.
Eén deel van de grid heeft een groene kleur!, hier is het attribute uk-button-success toegevoegd.

Grid over 1/3 vd website
Grid over 1/3 vd website
Grid over 1/3 vd website
Grid over de helft vd website
Grid over de helft vd website
Grid 3/10 vd website
Grid 7/10 vd website


Hieronder staat het script van de hierboven gegeven voorbeelden.

<div class="uk-grid">

<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box"><code>Grid over 1/3 vd website</code></div>
</div>

<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box uk-button-success"><code>Grid over 1/3 vd website</code></div>
</div>

<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box"><code>Grid over 1/3 vd website</code></div>
</div>

</div>

 

<div class="uk-grid">

<div class="uk-width-1-2">
<div class="uk-panel uk-panel-box"><code>Grid over de helft vd website</code></div>
</div>

<div class="uk-width-1-2">
<div class="uk-panel uk-panel-box"><code>Grid over de helft vd website</code></div>
</div>

</div>


<div class="uk-grid">

<div class="uk-width-3-10">
<div class="uk-panel uk-panel-box"><code>Grid 3/10 vd website</code></div>
</div>

<div class="uk-width-7-10">
<div class="uk-panel uk-panel-box"><code>Grid 7/10 vd website</code></div>
</div>

</div>

Voorbeeld met een tekst in de grid

Grid over 1/3 vd website.
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et
dolore magna aliqua. Ut enim
ad minim veniam.
Grid over 1/3 vd website.
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et
dolore magna aliqua. Ut enim
ad minim veniam.
Grid over 1/3 vd website.
Lorem ipsum dolor sit amet,
consectetur adipisicing elit,
sed do eiusmod tempor
incididunt ut labore et
dolore magna aliqua. Ut enim
ad minim veniam.

Hieronder staat het script van het hierboven gegeven voorbeeld.

<div class="uk-grid">

<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box"><code>Grid over 1/3 vd website. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>

<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box"><code>Grid over 1/3 vd website. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>

<div class="uk-width-1-3">
<div class="uk-panel uk-panel-box"><code>Grid over 1/3 vd website. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
</div>

</div>  



Responsive Grid-breedtes

UIkit heeft ook een aantal zeer bruikbare Grid-breedtes die goed toepasbaarzijn om een grid anders op een desktop dan op een mobiele telefoon te tonen. Het werkt in pricipe hetzelfde zoals hierboven beschreven allen de prefix van de class  is net iets anders. Op deze manier kan je vanaf een bepaalde schermbreedte (in pixels) een grid anders laten tonen. Dat is handig omdat de schermbreedte (breakpoint genoemd) op een mobiele telefoon een stuk minder breed is dan op een desktop computer. 

Class Beschrijving
uk-width-* Dit heeft effect op alle schermbreedtes en is een grid over de gehele breedte van de website.
uk-width-small-* Dit heeft effect op schermbreedtes van 480pixels en meer. Het grid zal vanaf 480px zich op elkaar gaan stapelen.
uk-width-medium-* Dit heeft effect op schermbreedtes van 768pixels en meer. Het grid zal vanaf 768px zich op elkaar gaan stapelen.
uk-width-large-* Dit heeft effect op schermbreedtes van 960pixels en meer. Het grid zal vanaf 960px zich op elkaar gaan stapelen.

BELANGRIJK: Om een marging aan op elkaar stapelende grids toe te voegen is het van belang om het attribute data-uk-grid-margin te gebruiken.

Voorbeelden

uk-width-medium-1-2 uk-width-large-1-3
uk-hidden-medium uk-width-large-1-3
uk-width-medium-1-2 uk-width-large-1-3
uk-width-1-2 uk-width-medium-1-3
uk-hidden-small uk-width-medium-1-3
uk-width-1-2 uk-width-medium-1-3
uk-width-1-1 uk-visible-small
uk-width-medium-1-1 uk-visible-medium
uk-width-large-1-1 uk-visible-large
 
Maak het browserscherm kleiner en ervaar het effect!
Het gaat van 3, 3, 1 Grid naar 2, 3, 1 Grid naar 1, 1, 1, 2, 1 Grid!
 

<div class="tm-grid-truncate uk-text-center">

    <div class="uk-grid" data-uk-grid-margin="">

        <div class="uk-width-large-1-3 uk-width-medium-1-2">
            <div class="uk-panel uk-panel-box uk-panel-box-primary"><code>uk-width-medium-1-2</code> <code>uk-width-large-1-3</code></div>
        </div>

        <div class="uk-width-large-1-3 uk-hidden-medium">
            <div class="uk-panel uk-panel-box"><code>uk-hidden-medium</code> <code>uk-width-large-1-3</code></div>
        </div>

        <div class="uk-width-large-1-3 uk-width-medium-1-2">
            <div class="uk-panel uk-panel-box uk-panel-box-primary"><code>uk-width-medium-1-2</code> <code>uk-width-large-1-3</code></div>
        </div>

    </div>

    <div class="uk-grid" data-uk-grid-margin="">

        <div class="uk-width-medium-1-3 uk-width-1-2">
            <div class="uk-panel uk-panel-box uk-panel-box-secondary"><code>uk-width-1-2</code> <code>uk-width-medium-1-3</code></div>
        </div>

        <div class="uk-width-medium-1-3 uk-hidden-small">
            <div class="uk-panel uk-panel-box"><code>uk-hidden-small</code> <code>uk-width-medium-1-3</code></div>
        </div>

        <div class="uk-width-medium-1-3 uk-width-1-2">
            <div class="uk-panel uk-panel-box uk-panel-box-secondary"><code>uk-width-1-2</code> <code>uk-width-medium-1-3</code></div>
        </div>

    </div>

    <div class="uk-grid" data-uk-grid-margin="">

        <div class="uk-width-1-1 uk-visible-small">
            <div class="uk-panel uk-panel-box uk-panel-box-secondary"><code>uk-width-1-1 uk-visible-small</code></div>
        </div>

        <div class="uk-width-medium-1-1 uk-visible-medium">
            <div class="uk-panel uk-panel-box uk-panel-box-primary"><code>uk-width-medium-1-1 uk-visible-medium</code></div>
        </div>

        <div class="uk-width-large-1-1 uk-visible-large">
            <div class="uk-panel uk-panel-box uk-panel-box"><code>uk-width-large-1-1 uk-visible-large</code></div>
        </div>

</div> 

 

Grid gutter

Een grid heeft als er meerdere grids naast elkaar staan een standaard (default) tussenruimte (Grid gutter). Standaard (default) is de tussenruimte groter naarmate de website breder is! De Grid gutter is dus responsive!

Voorbeeld van een grid met de standaard (default) tussenruimte.

Lorem ipsum
Lorem ipsum
Lorem ipsum

Medium gutter

Een smallere tussennruimte is te verkrijgen door de volgende class toe te voegen:  .uk-grid-medium

Voorbeeld

Lorem ipsum
Lorem ipsum
Lorem ipsum

Smalle gutter

Wil je een nog smallere tussenruimte, gebruik dan:  .uk-grid-small class.

Voorbeeld

Lorem ipsum
Lorem ipsum
Lorem ipsum

Geen gutter

Wil je helemaal geen tussenruimte tussen je grid elementen, gebruik dan:  .uk-grid-collapse class.

Voorbeeld

Lorem ipsum
Lorem ipsum
Lorem ipsum
 
 

Hieronder staat de code van de hierboven gebruikte voorbeelden

<h3>Medium gutter</h3>

<p>Een smallere tussennruimte is te verkrijgen door de volgende class toe te voegen:&nbsp; <code>.uk-grid-medium</code></p>

<h4 class="tm-article-subtitle">Voorbeeld</h4>

<div class="uk-grid uk-grid-medium">
    <div class="uk-width-1-3">
        <div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div>
    </div>
</div>

<hr class="uk-article-divider" />

<h3>Smalle gutter</h3>

<p>Wil je een nog smallere tussenruimte, gebruik dan:&nbsp; <code>.uk-grid-small</code> class.</p>

<h4 class="tm-article-subtitle">Voorbeeld</h4>

<div class="uk-grid uk-grid-small">
    <div class="uk-width-1-3">
        <div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div>
    </div>
</div>

<hr class="uk-article-divider" />

<h3>Geen gutter</h3>

<p>Wil je helemaal geen tussenruimte tussen je grid elementen, gebruik dan:&nbsp; <code>.uk-grid-collapse</code> class.</p>

<h4 class="tm-article-subtitle">Voorbeeld</h4>

<div class="uk-grid uk-grid-collapse">
    <div class="uk-width-1-3">
        <div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div>
    </div>
    <div class="uk-width-1-3">
        <div class="uk-panel uk-panel-box uk-panel-box-primary">Lorem ipsum</div>
    </div>
</div>

 

Er is nog veel meer mogelijk met het Grid

Voor onderstaande mogelijkheden, bezoek hiervoor: http://getuikit.com/docs/grid.html

  • Nested grid
  • Center grid
  • Grid divider
  • Source ordering
  • Match column heights
  • Wrap multiple rows
  • Even grid columns