Direct naar hoofdinhoud

Hoofdnavigatie

Platform Beta

Grid

  1. Grid Hidden

Basis

.grid__unit.l-8-12
.grid__unit.l-4-12
.grid__unit.s-2-4.m-6-12.l-8-12
.grid__unit.m-6-12 l-4-12
.grid__unit.l-6-12
.grid__unit.l-6-12
.grid

Some (not all!) examples of grid constellations. A griditem lives in a .grid container. The griditem gets .grid__unit and, additionally, some unit-classes per breakpoint. By default a griditem is 100% (s-4-4, m-12-12 and l-12-12). Only exceptions to this 100%-default need to be defined. The .dss-outline class is there only for example purposes. These should be removed when you use the markup.

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit l-8-12">
        <span>.grid__unit.l-8-12</span>
    </div>
    <div class="grid__unit l-4-12">
        <span>.grid__unit.l-4-12</span>
    </div>
    <div class="grid__unit s-2-4 m-6-12 l-8-12">
        <span>.grid__unit.s-2-4.m-6-12.l-8-12</span>
    </div>
    <div class="grid__unit m-6-12 l-4-12">
        <span>.grid__unit.m-6-12  l-4-12</span>
    </div>
    <div class="grid__unit l-6-12">
        <span>.grid__unit.l-6-12</span>
    </div>
    <div class="grid__unit l-6-12">
        <span>.grid__unit.l-6-12</span>
    </div>
</div>

Examples of usage

Grid Hidden

s-4-4 m-12-12 l-8-12
s-4-4 m-12-12 l-4-12
s-hidden m-visible
s-2-4 m-6-12 l-8-12
s-2-4 m-6-12 l-4-12
s-4-4 m-12-12 l-6-12
s-4-4 m-12-12 l-6-12

Per media break a .grid_items can be hidden (and shown). De visibility of these items are (like all css) mobile-first. This means that an .s-hidden .grid__item will be hidden at all breakpoints, unless a .x-visible class is used, ie .m-visible

Markup

<div class="grid" data-controller="generic/ui/ResponsiveGrid">
    <div class="grid__unit s-4-4 m-12-12 l-8-12">
      <span>s-4-4 m-12-12 l-8-12<span>
    </div>
    <div class="grid__unit s-4-4 m-12-12 l-4-12 s-hidden m-visible">
        <span>s-4-4 m-12-12 l-4-12<br>s-hidden m-visible</span>
    </div>
    <div class="grid__unit s-2-4 m-6-12 l-8-12">
        <span>s-2-4 m-6-12 l-8-12</span>
    </div>
    <div class="grid__unit s-2-4 m-6-12 l-4-12">
        <span>s-2-4 m-6-12  l-4-12</span>
    </div>
    <div class="grid__unit s-4-4 m-12-12 l-6-12">
        <span>s-4-4 m-12-12 l-6-12</span>
    </div>
    <div class="grid__unit s-4-4 m-12-12 l-6-12">
        <span>s-4-4 m-12-12 l-6-12</span>
    </div>
</div>