Grid / Layout Grid

<!-- Additional "no-gap" class on row to remove space between cells -->
<div class="row no-gap">
    <!-- Each "cell" has col-[width in percents] class -->
    <div class="col-50">50%</div>
    <div class="col-50">50%</div>
</div>
<div class="row">
    <!-- Each "cell" has col-[width in percents] class -->
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
    <div class="col-33">33%</div>
</div>

<div class="block-title">Columns with gap</div>
<div class="block">
  <div class="row">
    <div class="col">50% (.col)</div>
    <div class="col">50% (.col)</div>
  </div>
  <div class="row">
    <div class="col">25% (.col)</div>
    <div class="col">25% (.col)</div>
    <div class="col">25% (.col)</div>
  <div class="row">
    <div class="col">33% (.col)</div>
    <div class="col">33% (.col)</div>
    <div class="col">33% (.col)</div>
  </div>
  <div class="row">
    <div class="col">20% (.col)</div>
    <div class="col">20% (.col)</div>
    <div class="col">20% (.col)</div>
    <div class="col">20% (.col)</div>
    <div class="col">20% (.col)</div>
  </div>
  <div class="row">
    <div class="col-33">33% (.col-33)</div>
    <div class="col-66">66% (.col-66)</div>
  </div>
  <div class="row">
    <div class="col-25">25% (.col-25)</div>
    <div class="col-25">25% (.col-25)</div>
    <div class="col-50">50% (.col-50)</div>
  </div>
  <div class="row">
  </div>
  <div class="row">
    <div class="col-80">80% (.col-80)</div>
    <div class="col-20">20% (.col-20)</div>
  </div>
</div>

<div class="block-title">Nested</div>
<div class="block">
  <div class="row">
    <div class="col">50% (.col)
      <div class="row">
        <div class="col">50% (.col)</div>
        <div class="col">50% (.col)</div>
      </div>
    </div>
    <div class="col">50% (.col)
      <div class="row">
        <div class="col-33">33% (.col-33)</div>
        <div class="col-66">66% (.col-66)</div>
      </div>
    </div>
  </div>
</div>