NEF float layout

by phloe

HTML

<div class="section">
  <div class="a large">A1</div>
  <div class="a x-large">A2</div>
  <div class="div"></div>
  <div class="b large">B1</div>
  <div class="b">B2</div>
  <div class="b">B3</div>
  <div class="b">B4</div>
  <div class="b">B5</div>
  <div class="b">B6</div>
  <div class="b">B7</div>
  <div class="b">B8</div>
  <div class="b">B9</div>
</div>

CSS

.section {
  font-size: 0;
  margin-top: -1rem;
  margin-left: -1rem;
}

.section::after {
  content: "";
  display: block;
  clear: both;
}

.section > * {
  margin-top: 1rem;
  margin-left: 1rem;
  font-size: 1rem;
}

.section > .a {
  width: calc(((100% - 3rem) / 3) * 2 + 1rem);
}

.a {
  padding: 1rem;
  background: bisque;
  min-height: 10rem;
  float: right;
  box-sizing: border-box;
}

.a.large {
  aspect-ratio: 9 / 6;
}

.a.x-large {
  aspect-ratio: 3 / 4;
}

.b {
  padding: 1rem;
  display: inline-block;
  background: khaki;
  box-sizing: border-box;
  width: calc(((100% - 3rem) / 3) * 1);
  height: 7.5rem;
}

.b.large {
  height: 20rem;
  background: lightgrey;
}

.div {
  width: calc(100% - 1rem);
  margin: 0;
  float: left;
}

@media (max-width: 25rem) {
  .section {
    display: flex;
    flex-flow: column;
  }
  .section > * {
    float: none;
    display: block;
    margin: 0 0 1rem;
    width: auto !important;
  }
  .div {
    display: none;
  }
  .a.x-large {
    order: 1;
  }
}