JSFiddle - React, Tailwind, and code Playground

Grid with bleed areas

by Richard Hunter

HTML

<div class="grid-1-1">
  <div>
    Ob Architekten oder Restaurants, Bäckereien oder Autowerkstätten: Wir haben tausende Unternehmen in Deutschland, Großbritannien, den Vereinigten Staaten und in den Niederlanden bei ihrem nächsten Schritt begleitet.
  </div>
  <div>
    Ob Architekten oder Restaurants, Bäckereien oder Autowerkstätten: Wir haben tausende Unternehmen in Deutschland, Großbritannien, den Vereinigten Staaten und in den Niederlanden bei ihrem nächsten Schritt begleitet.
  </div>
</div>
<br>

<div class="grid-1-1-1">
  <div>
    Ob Architekten oder Restaurants, Bäckereien oder Autowerkstätten: Wir haben tausende Unternehmen in Deutschland, Großbritannien, den Vereinigten Staaten und in den Niederlanden bei ihrem nächsten Schritt begleitet.
  </div>
  <div>
    Ob Architekten oder Restaurants, Bäckereien oder Autowerkstätten: Wir haben tausende Unternehmen in Deutschland, Großbritannien, den Vereinigten Staaten und in den Niederlanden bei ihrem nächsten Schritt begleitet.
  </div>
    <div>
    Ob Architekten oder Restaurants, Bäckereien oder Autowerkstätten: Wir haben tausende Unternehmen in Deutschland, Großbritannien, den Vereinigten Staaten und in den Niederlanden bei ihrem nächsten Schritt begleitet.
  </div>
</div>
<br>

<div class="grid-1-1-bleed-right">
  <div>
    Ob Architekten oder Restaurants, Bäckereien oder Autowerkstätten: Wir haben tausende Unternehmen in Deutschland, Großbritannien, den Vereinigten Staaten und in den Niederlanden bei ihrem nächsten Schritt begleitet.
  </div>
  <div>
    khkhkh
  </div>
</div>
<br>
<div class="grid-1-1-bleed-left">
  <div>
 gjgjgj
  </div>
  <div>
   Ob Architekten oder Restaurants, Bäckereien oder Autowerkstätten: Wir haben tausende Unternehmen in Deutschland, Großbritannien, den Vereinigten Staaten und in den Niederlanden bei ihrem nächsten Schritt begleitet.
  </div>
</div>

SCSS

body {
  margin: 6px;
}

html {
  box-sizing: border-box;
}

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

// general grid declarations
.grid-1-1,
.grid-1-1-1,
.grid-1-1-bleed-left,
.grid-1-1-bleed-right {
  background: green;
  padding: 0;
  overflow: hidden;
  > div {
    float: left;
    background: red;
    margin-right: 10px;
    &:last-child {
      margin-right: 0;
    }
  }
}

.grid-1-1 {
  margin: 0 10%;
  > div {
    width: calc(50% - 5px);
  }
}
.grid-1-1-1 {
  margin: 0 10%;
  > div {
    width: calc((100% - 20px) / 3);
  }
}
.grid-1-1-bleed-left {
  // no left hand margin
  margin: 0 10% 0 0;
  > div {
    width: calc((8 / 9 * 50%) - 5px);
    &:first-child {
      background: yellow;
      //  last child element has width that extends to right hand of viewport
      width: calc((8 / 9 * 50% + (1/9 * 100%)) - 5px);
    }
  }
}


.grid-1-1-bleed-right {
  // no right hand margin
  margin: 0 0 0 10%;
  > div {
    width: calc((8 / 9 * 50%) - 5px);
    &:last-child {
      background: yellow;
      //  last child element has width that extends to right hand of viewport
      width: calc((8 / 9 * 50% + (1/9 * 100%)) - 5px);
      margin-right: 0;
    }
  }
}