CSS Grid and display: contents;

by oilvier

HTML

<div class="grid">
  <app-product-variants-container>
    <div class="variant-section">
      <app-product-variant-style-selector>
        <span class="placeholder"></span>
      </app-product-variant-style-selector>
      <app-product-variant-size-selector>
        <span>Le modèle</span>
        <span class="placeholder placeholder--foo"></span>
      </app-product-variant-size-selector>
    </div>
  </app-product-variants-container>
  <app-add-to-cart>
    <form action="">
      <div class="quantity">
        <select name="" id="">
          <option value="">Option</option>
        </select>
      </div>
      <button type="submit" class="btn btn-primary btn-block"> Ajouter au panier </button>
    </form>
  </app-add-to-cart>
</div>

SCSS

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "foo foo" "bar bar" "baz baz";
  grid-template-columns: 2fr 1fr;
}

app-product-variants-container,
app-add-to-cart,
.variant-section,
app-add-to-cart > form {
  display: contents;
}

app-product-variant-style-selector {
  grid-area: foo;
}

app-product-variant-size-selector {
  grid-area: bar;
  grid-column-end: 1;
}

.quantity {
  grid-area: bar;
  grid-column-start: 2;
  align-self: flex-end;
}

.btn {
  grid-area: baz;
}

.placeholder {
  display: block;
  padding: 20px;
  background-color: indianred;
}

.placeholder--foo {
  background-color: cyan;
}

select {
  width: 100%;
}