unibz Pattern Library

Grid: Flexbox Grid 

<div class="g-row g-row-flex">
    <div class="g g-flex g-3@sm">
        <div class="placeholder">Make all elements have the same height using flexbox</div>
    </div>
    <div class="g g-flex g-3@sm">
        <div class="placeholder">Smaller element</div>
    </div>
    <div class="g g-flex g-3@sm">
        <div class="placeholder">Smaller element</div>
    </div>
    <div class="g g-flex g-3@sm">
        <div class="placeholder">Smaller element</div>
    </div>
</div>
 
<div class="g-row {{ class }}">
  {{#each items}}
    <div class="g {{ class }}">
      <div class="placeholder">{{ description }}</div>
    </div>
  {{/each}}
</div>
 
{
  "placeholder": "Placeholder element",
  "class": "g-row-flex",
  "items": [
    {
      "class": "g-flex g-3@sm",
      "description": "Make all elements have the same height using flexbox"
    },
    {
      "class": "g-flex g-3@sm",
      "description": "Smaller element"
    },
    {
      "class": "g-flex g-3@sm",
      "description": "Smaller element"
    },
    {
      "class": "g-flex g-3@sm",
      "description": "Smaller element"
    }
  ]
}

There are no notes for this item.