<main>

  <div class="container">

    <div>
      <div class="box">
        <p>default</p>
      </div>
    </div>

    <div class="fluid">
      <div class="box">
        <p>.fluid</p>
      </div>
    </div>
    
    <div class="flush">
      <div class="box">
        <p>.flush</p>
      </div>
    </div>
  </div>
</main>
main {
  background: #252d3d;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  h1 {
    color: #f8d58c;
  }
  .box {
    height: 5em;
    width: 100%;
    background: #d0c1fa;
    color: darken(#d0c1fa, 40%);
    p {
      opacity: 0.6;
    }
    font-weight: bold;
    border-radius: 0.5em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .flush {
    div {
      border-radius: 0;
    }
  }
}

.container {
  display: grid;
  gap: 1em 0;
  grid-template-columns:
    [flush-start] 1em
    [fluid-start] minmax(1em, 1fr)
    [main-start] minmax(0, 60em) [main-end]
    minmax(1em, 1fr) [fluid-end]
    1em [flush-end];
  width: 100%;

  > * {
    grid-column: main;
  }
  .fluid {
    grid-column: fluid;
  }
  .flush {
    grid-column: flush;
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.