Grid

Default (4 equal columns)

25%

<div class="o-grid">
  <div class="o-grid__col">
    <div class="placeholder">25%</div>
  </div>
  <div class="o-grid__col">
    <div class="placeholder">25%</div>
  </div>
  <div class="o-grid__col">
    <div class="placeholder">25%</div>
  </div>
  <div class="o-grid__col">
    <div class="placeholder">25%</div>
  </div>
</div>

Presets

Column 1

Column 2

Column 3

Column 4

<div class="o-grid o-grid--dashboard">
  <div class="o-grid__col">
    <div class="placeholder">Column 1</div>
  </div>
  <div class="o-grid__col">
    <div class="placeholder">Column 2</div>
  </div>
  <div class="o-grid__col">
    <div class="placeholder">Column 3</div>
  </div>
  <div class="o-grid__col">
    <div class="placeholder">Column 4</div>
  </div>
</div>

Column 1

Column 2

Column 3

Column 4

<div class="o-grid o-grid--booker">
  <div class="o-grid__col">
    <div class="placeholder">Column 1</div>
  </div>
  <div class="o-grid__col">
    <div class="placeholder">Column 2</div>
  </div>
  <div class="o-grid__col">
    <div class="placeholder">Column 3</div>
  </div>
  <div class="o-grid__col">
    <div class="placeholder">Column 4</div>
  </div>
</div>

Column 1

Column 2

Column 3

<div class="o-grid o-grid--split">
  <div class="o-grid__col">
    <div class="placeholder">Column 1</div>
  </div>
  <div class="o-grid__col">
    <div class="placeholder">Column 2</div>
  </div>
  <div class="o-grid__col">
    <div class="placeholder">Column 3</div>
  </div>
</div>

Custom values

6/16

10/16

<div
  class="o-grid"
  style="--grid-template: 6fr 10fr"
>
  <div class="o-grid__col">
    <div class="placeholder">6/16</div>
  </div>
  <div class="o-grid__col">
    <div class="placeholder">10/16</div>
  </div>
</div>