Link copied!

Flex Grid

<div class="e-grid">
  <div class="e-cell">
    <button class="e-btn e-btn-primary">.e-cell</button>
  </div>
  <div class="e-cell">
    <button class="e-btn e-btn-primary">.e-cell</button>
  </div>
  <div class="e-cell">
    <button class="e-btn e-btn-primary">.e-cell</button>
  </div>
  <div class="e-cell">
    <button class="e-btn e-btn-primary">.e-cell</button>
  </div>
  <div class="e-cell">
    <button class="e-btn e-btn-primary">.e-cell</button>
  </div>
</div>
<div class="e-grid e-grid-xsmall">
  <div class="e-cell e-cell-xsmall">
    <button class="e-btn e-btn-primary">.e-cell.e-grid-xsmall</button>
  </div>
  <div class="e-cell e-cell-xsmall">
    <button class="e-btn e-btn-primary">.e-cell.e-grid-xsmall</button>
  </div>
  <div class="e-cell e-cell-xsmall">
    <button class="e-btn e-btn-primary">.e-cell.e-grid-xsmall</button>
  </div>
  <div class="e-cell e-cell-xsmall">
    <button class="e-btn e-btn-primary">.e-cell.e-grid-xsmall</button>
  </div>
  <div class="e-cell e-cell-xsmall">
    <button class="e-btn e-btn-primary">.e-cell.e-grid-xsmall</button>
  </div>
</div>
<div class="e-grid e-grid-small">
  <div class="e-cell e-cell-small">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-small">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-small">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-small">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-small">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-small</button>
  </div>
</div>
<div class="e-grid e-grid-medium">
  <div class="e-cell e-cell-medium">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-medium</button>
  </div>
  <div class="e-cell e-cell-medium">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-medium</button>
  </div>
  <div class="e-cell e-cell-medium">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-medium</button>
  </div>
  <div class="e-cell e-cell-medium">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-medium</button>
  </div>
</div>
<div class="e-grid e-grid-large">
  <div class="e-cell e-cell-large">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-large</button>
  </div>
  <div class="e-cell e-cell-large">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-large</button>
  </div>
  <div class="e-cell e-cell-large">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-large</button>
  </div>
  <div class="e-cell e-cell-large">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-large</button>
  </div>
</div>
<div class="e-grid">
  <div class="e-cell">
    <button class="e-btn e-btn-primary">.e-cell</button>
  </div>
  <div class="e-cell">
    <div class="e-grid e-grid-small">
      <div class="e-cell e-cell-small">
        <button class="e-btn e-btn-primary">.e-cell.e-cell-small</button>
      </div>
      <div class="e-cell e-cell-small">
        <button class="e-btn e-btn-primary">.e-cell.e-cell-small</button>
      </div>
    </div>
  </div>
</div>
<div class="e-grid e-grid-small">
  <div class="e-cell e-cell-small">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-small">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-small">
    <button class="e-btn e-btn-primary">.e-cell.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-small">
    <div class="e-grid">
      <div class="e-cell">
        <button class="e-btn e-btn-primary">.e-cell</button>
      </div>
      <div class="e-cell">
        <button class="e-btn e-btn-primary">.e-cell</button>
      </div>
    </div>
  </div>
</div>
<div class="e-grid">
  <div class="e-cell e-cell-4">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-4</button>
  </div>
  <div class="e-cell e-cell-4">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-4</button>
  </div>
  <div class="e-cell e-cell-4">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-4</button>
  </div>
</div>
<div class="e-grid">
  <div class="e-cell e-cell-auto">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-auto</button>
  </div>
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
</div>
<b>justify_around</b>
<div class="e-grid e-grid-justify_around e-box e-box-nopadding">
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
</div>

<b>justify_between</b>
<div class="e-grid e-grid-justify_between e-box e-box-nopadding">
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
</div>

<b>justify_center</b>
<div class="e-grid e-grid-justify_center e-box e-box-nopadding">
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
</div>

<b>justify_end</b>
<div class="e-grid e-grid-justify_end e-box e-box-nopadding">
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
</div>
<b>align_start</b>
<div class="e-grid e-grid-align_start e-box e-box-nopadding" style="height: 100px;">
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
</div>

<b>align_center</b>
<div class="e-grid e-grid-align_center e-box e-box-nopadding" style="height: 100px;">
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
</div>

<b>align_end</b>
<div class="e-grid e-grid-align_end e-box e-box-nopadding" style="height: 100px;">
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
</div>

<b>align_baseline</b>
<div class="e-grid e-grid-align_baseline e-box e-box-nopadding" style="height: 100px;">
  <div class="e-cell">
    <h1>Baseline</h1>
  </div>
  <div class="e-cell">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell</button>
  </div>
</div>
<div class="e-grid e-grid-wrap">
  <div class="e-cell e-cell-4">
    <button class="e-btn e-btn-fullwidth e-btn-primary">default</button>
  </div>
  <div class="e-cell e-cell-4">
    <button class="e-btn e-btn-fullwidth e-btn-primary">default</button>
  </div>
  <div class="e-cell e-cell-4">
    <button class="e-btn e-btn-fullwidth e-btn-primary">default</button>
  </div>
  <div class="e-cell e-cell-4">
    <button class="e-btn e-btn-fullwidth e-btn-primary">default</button>
  </div>
  <div class="e-cell e-cell-4">
    <button class="e-btn e-btn-fullwidth e-btn-primary">default</button>
  </div>
</div>
<div class="e-grid e-grid-wrap e-grid-small">
  <div class="e-cell e-cell-4 e-cell-small">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-4.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-4 e-cell-small">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-4.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-4 e-cell-small">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-4.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-4 e-cell-small">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-4.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-4 e-cell-small">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-4.e-cell-small</button>
  </div>
</div>
<div class="e-grid e-grid-wrap e-grid-small">
  <div class="e-cell e-cell-4 e-cell-small">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-4.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-4 e-cell-small">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-4.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-4 e-cell-small">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-4.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-4 e-cell-small">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-4.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-4 e-cell-small">
    <div class="e-grid e-grid-large">
      <div class="e-cell e-cell-large e-cell-6">
        <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-6.e-cell-large</button>
      </div>
      <div class="e-cell e-cell-large e-cell-6">
        <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-6.e-cell-large</button>
      </div>
    </div>
  </div>
  <div class="e-cell e-cell-4 e-cell-small">
    <div class="e-grid e-grid-wrap">
      <div class="e-cell e-cell-6">
        <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-6</button>
      </div>
      <div class="e-cell e-cell-6">
        <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-6</button>
      </div>
      <div class="e-cell e-cell-6">
        <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-6</button>
      </div>
    </div>
  </div>
</div>
<div class="e-grid">
  <div class="e-cell e-cell-4 e-cell-border_bottom e-cell-border_top e-cell-border_right e-cell-border_left">
    <button class="e-btn e-btn-link">link button</button>
  </div>
  <div class="e-cell e-cell-4 e-cell-border_bottom e-cell-border_top e-cell-border_right">
    <button class="e-btn e-btn-link">link button</button>
  </div>
  <div class="e-cell e-cell-4 e-cell-border_bottom e-cell-border_top e-cell-border_right">
    <div class="e-grid">
      <div class="e-cell e-cell-4">
        <button class="e-btn e-btn-link">link button</button>
      </div>
      <div class="e-cell e-cell-4">
        <button class="e-btn e-btn-link">link button</button>
      </div>
      <div class="e-cell e-cell-4">
        <button class="e-btn e-btn-link">link button</button>
      </div>
    </div>
  </div>
</div>
<div class="e-grid e-grid-column e-grid-small e-grid-between e-border-all" style="height: 200px">
  <div class="e-cell e-cell-small">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-small">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-small</button>
  </div>
  <div class="e-cell e-cell-small">
    <button class="e-btn e-btn-fullwidth e-btn-primary">.e-cell.e-cell-small</button>
  </div>
</div>
<div style="height: 200px">
  <div class="e-grid e-grid-fullheight e-grid-vertical_center e-grid-center">
    <div class="e-cell">
      <button class="e-btn e-btn-primary">.e-cell</button>
    </div>
    <div class="e-cell">
      <button class="e-btn e-btn-primary">.e-cell</button>
    </div>
    <div class="e-cell">
      <button class="e-btn e-btn-primary">.e-cell</button>
    </div>
    <div class="e-cell">
      <button class="e-btn e-btn-primary">.e-cell</button>
    </div>
  </div>
</div>