CSS Grid

Container/layout component.
Put the grid-class on the parent element, and its children will be layed out as an even grid.
Comes with a variety of modifier classes, depending on what the layout should be:

CSS Grid

Component status: WIP

Collapse

Has no gutter, and a small negative margin to give the elements an even seperation.

Collapse

Component status: WIP

Has no gutter, and a small negative margin to give the elements an even seperation.

 <div class="css-grid css-grid--collapse css-grid--two css-grid-sm--three">
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
 </div>

Se mere

Gutter

Has an even gutter between each element.

Gutter

Component status: WIP

Has an even gutter between each element.

 <div class="css-grid css-grid--gutter css-grid--two css-grid-sm--three">
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
     <div class="designsystem-box"></div>
 </div>

Se mere

Se mere

[title]