Test Fork

by Federico Tibaldo

HTML

<div class="container-fluid">
  Lorem ipsum
</div>
<div class="container-fluid">
  <div class="colore">
    Lorem ipsum
  </div>
</div>

<div class="container">
  Lorem ipsum
</div>
<div class="container">
  <div class="colore">
    Lorem ipsum
  </div>
</div>


<div class="container">

  <div class="colore">
    <div class="row">
      <div class="col-6">
        Lorem ipsum
      </div>
      <div class="col-6">
        Lorem ipsum
      </div>
    </div>
  </div>
</div>


<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="colore">
        Lorem ipsum
      </div>
    </div>
    <div class="col-6">
      <div class="colore">
        Lorem ipsum
      </div>
    </div>
  </div>
</div>

<div class="container">
  <div class="row">
    <div class="col-6">
      Lorem ipsum
    </div>
    <div class="col-6">
      <div class="row">
        <div class="col-6">
          Lorem ipsum
        </div>
        <div class="col-6">
          Lorem ipsum
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="colore">
        Lorem ipsum
      </div>
    </div>
    <div class="col-6">
      <div class="row">
        <div class="col-6">
          <div class="colore">
            Lorem ipsum
          </div>
        </div>
        <div class="col-6">
          <div class="colore">
            Lorem ipsum
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

*, *::before, *::after {
  box-sizing: inherit;
}
html {
  box-sizing: border-box;
  --gutter: 15px;
}
body {
  padding: 0;
  margin: 0;
}

.container-fluid {
  /* padding: 0 var(--gutter); */
  background: #dadada;
}
.container {
  max-width: 600px;
  margin: 0 auto;
  background: #dadada;
  padding: 0 calc(var(--gutter) * 2);
}

.colore {
  background-color: red;
  color: white;
  padding: 0 var(--gutter);
}

.row {
  margin: 0 calc(var(--gutter) * -1);
  display: flex;
  flex-wrap: wrap;
}
.col-12, .col-6 {
  padding: 0 var(--gutter);
  /* margin: 0 var(--gutter); */
}
.col-12 {
  flex-basis: 100%;
}
.col-6 {
  flex-basis: 50%;
}
/* 
[class^=col-] [class^=col-]:last-child {
  margin-right: 0;
}
[class^=col-] [class^=col-]:first-child {
  margin-left: 0;
} */