Test

by Federico Tibaldo

HTML

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

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


<div class="container">
  <div class="row">
    <div class="col-6">
      Lorem ipsum
    </div>
    <div class="col-6">
      Lorem ipsum
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-6 colore">
      Lorem ipsum
    </div>
    <div class="col-6 colore">
      Lorem ipsum
    </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 colore">
      Lorem ipsum
    </div>
    <div class="col-6">
      <div class="row">
        <div class="col-6 colore">
          Lorem ipsum
        </div>
        <div class="col-6 colore">
          Lorem ipsum
        </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 var(--gutter);
}

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

.row {
  /* margin: 0 calc(var(--gutter) * -1); */
  display: flex;
}
.col-12, .col-6 {
  /* padding: 0 var(--gutter); */
  margin: 0 var(--gutter);
}
.col-12 {
  flex-basis: 100%;
}
.col-6 {
  width: 50%;
}

[class^=col-] [class^=col-]:last-child {
  margin-right: 0;
}
[class^=col-] [class^=col-]:first-child {
  margin-left: 0;
}