JSFiddle - React, Tailwind, and code Playground

by antixrist

HTML

<h4>Старая сетка:</h4>

<div class="main-container grid-old">
  <p><code>.row</code>: </p>

  <div class="row">
    <div class="col-10">
      <div class="content">col-10</div>
    </div>
  </div>
  <div class="row">
    <div class="col-5">
      <div class="content">col-5</div>
    </div>
    <div class="col-5">
      <div class="content">col-5</div>
    </div>
  </div>
  <div class="row">
    <div class="col-4">
      <div class="content">col-4</div>
    </div>
    <div class="col-6">
      <div class="content">col-6</div>
    </div>
  </div>
  <div class="row">
    <div class="col-3">
      <div class="content">col-3</div>
    </div>
    <div class="col-7">
      <div class="content">col-7</div>
    </div>
  </div>

  <p><code>.row.gutter</code>: </p>
  <div class="row gutter">
    <div class="col-10">
      <div class="content">col-10</div>
    </div>
  </div>
  <div class="row gutter">
    <div class="col-5">
      <div class="content">col-5</div>
    </div>
    <div class="col-5">
      <div class="content">col-5</div>
    </div>
  </div>
  <div class="row gutter">
    <div class="col-4">
      <div class="content">col-4</div>
    </div>
    <div class="col-6">
      <div class="content">col-6</div>
    </div>
  </div>
  <div class="row gutter">
    <div class="col-3">
      <div class="content">col-3</div>
    </div>
    <div class="col-7">
      <div class="content">col-7</div>
    </div>
  </div>
</div>

<h4>Новая сетка:</h4>
<div class="main-container grid-new">
  <div class="row no-gutter">
    <div class="col-10">
      <div class="content">no-gutter: col-10</div>
    </div>
  </div>
  <div class="row">
    <div class="col-10">
      <div class="content">col-10</div>
    </div>
  </div>
  <div class="row no-gutter">
    <div class="col-5">
      <div class="content">no-gutter: col-5</div>
    </div>
    <div class="col-5">
      <div class="content">col-5</div>
    </div>
  </div>
  <div class="row">
    <div class="col-5">
      <div...

SCSS

*,
*::before,
*::after {
  box-sizing: border-box;
}

$gutter: 24px;
$cols: 12;

.main-container {
  margin: 0 auto;
  max-width: 500px;
  width: 100%;
  padding-right: $gutter;
  padding-left: $gutter;
  
  // outline: 1px solid #eee;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  
  margin-bottom: $gutter;
/*
  outline: 1px solid red;
  > [class*="col"] {
    outline: 1px solid green;
  }
*/
}
  

.grid-old {
  .row {
    @for $i from 1 through $cols {
      .col-#{$i} {
        width: 100% * $i / $cols;
      }
    }

    &.gutter {
      $gutter-grid: ($gutter / 2);
      margin-left: -($gutter-grid);
      margin-right: -($gutter-grid);

      > [class*="col"] {
        padding-left: $gutter-grid;
        padding-right: $gutter-grid;
      }
    }
  }
}

.grid-new {
  .row {
    @for $i from 1 through $cols {
      .col-#{$i} {
        $width: 100% * $i / $cols;
        max-width: $width;
        flex: 0 0 $width;
        width: 100%;
      }
    }

    $gutter-grid: ($gutter / 2);
    margin-left: -($gutter-grid);
    margin-right: -($gutter-grid);

    > [class*="col-"] {
      padding-left: $gutter-grid;
      padding-right: $gutter-grid;
    }

    &.no-gutter {
      margin-right: 0;
      margin-left: 0;

      > [class*="col-"] {
        padding-right: 0;
        padding-left: 0;
      }
    }
  }
}


[class*="col-"] {
  display: flex;
  align-items: stretch;
  
  .content {
    background: #ccc;
    width: 100%;
  }
}