<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;
    }
  }
}

$sm: 540px;
$md: 720px;
$lg: 960px;
$xl: 1140px;

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

  @media screen and (min-width: $md) {
    grid-template-columns:
      [flush-start] 1em
      [fluid-start] minmax(0, 1fr)
      [main-start] minmax(0, $md) [main-end]
      minmax(0, 1fr) [fluid-end]
      1em [flush-end];
  }
  
   @media screen and (min-width: $lg) {
    grid-template-columns:
      [flush-start] 1em
      [fluid-start] minmax(0, 1fr)
      [main-start] minmax(0, $lg) [main-end]
      minmax(0, 1fr) [fluid-end]
      1em [flush-end];
  }
     @media screen and (min-width: $xl) {
    grid-template-columns:
      [flush-start] 1em
      [fluid-start] minmax(0, 1fr)
      [main-start] minmax(0, $xl) [main-end]
      minmax(0, 1fr) [fluid-end]
      1em [flush-end];
  }
  

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.