[CSS] Choose between Grid layout and flexbox

    <div class="navbar display-flex">
      <span class="h3">?? NoteTaker</span>
      <nav>
        ...
      </nav>
    </div>    

    <div class="navbar display-flex display-flex--wrap">
      <span class="h3">?? NoteTaker</span>
      <nav>
        <ul class="list-unstyled display-grid display-grid--columns">
          <li>
            <a href="javascript:;" class="button button--small">Pre-Order</a>
          </li>
          <li><a href="javascript:;">About</a></li>
          <li><a href="javascript:;">Contact</a></li>
        </ul>
      </nav>
    </div>

.display-grid {
  display: grid;
  grid-gap: 16px;

  &--columns {
    grid-auto-flow: column;
  }
}

    <div class="navbar display-flex display-flex--wrap">
      <span class="h3">?? NoteTaker</span>
      <nav>
        <ul class="list-unstyled display-grid display-grid--columns">
          <li>
            <a href="javascript:;" class="button button--small">Pre-Order</a>
          </li>
          <li><a href="javascript:;">About</a></li>
          <li><a href="javascript:;">Contact</a></li>
        </ul>
      </nav>
    </div>

.display-flex {
  display: flex;

  &--wrap {
    flex-wrap: wrap;
  }
}

    <header class="my-lg display-grid container mx-auto alignitems--center">
      <div>
        <h1 class="mb-none">Take Notes Like Never Before</h1>
        <p class="lead mt-sm mb-none">
          Pre-order what will be the #1 note-taking app on your preferred device
          today!
        </p>
      </div>
      <div>
        <h2 class="h3">Subscribe to Launch Updates</h2>
        <form action="/" class="display-grid">
          <label for="email1">Enter your email:</label>
          <input id="email1" name="email" type="email" />
          <button class="button button--secondary" type="submit">
            Subscribe
          </button>
        </form>
      </div>
    </header>

// Components
.navbar {
  justify-content: space-between;
  padding: $unit * 2 $unit * 3;
}

header.display-grid {
  grid-gap: $unit * 4;

  @media (min-width: 60rem) {
    grid-auto-flow: column;
  }
}

// Display
.display-flex {
  display: flex;

  &--wrap {
    flex-wrap: wrap;
  }
}

.display-grid {
  display: grid;
  grid-gap: $unit * 2;

  &--columns {
    grid-auto-flow: column;
  }
}

.alignitems--center {
  align-items: center;
}

.container {
  max-width: 80rem;
  padding-left: $unit * 3;
  padding-right: $unit * 3;
}

grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));