Order uneven sized elements in CSS

Question

I am trying to make a layout where the uneven sized elements will be "1 - 2 / 3 - 4" on desktop, and stacked one under the other on the mobile. I've tried to do that with floats, and I'm partially there. However, the gap between the elements 2 and 4 is too large... Is there a way to reduce this somehow, maybe with the other approach perhaps?

Please check the full-page preview, thanks a lot for any input!

.test1 {
  background: red;
}

.test2 {
  background: yellow;
}

.test3 {
  background: lightblue;
}

.test4 {
  background: green;
}

section {
 
}

section:nth-child(odd) {
  float: left;
  width: 66%;
}

section:nth-child(even) {
  float: right;
  width: 33%;
}

footer {
  clear: both;
}

@media(max-width: 992px) {
section:nth-child(odd) {
  float: none;
  width: 100%;
}

section:nth-child(even) {
  float: none;
  width: 100%;
}
}

<div class="wrap">
    <section class="test1">
      <b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
      
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod?
      
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam.
      
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore?
      
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
    </section>
      <section class="test2">
      <b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
      <section class="test3">
      <b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
      <section class="test4">
      <b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
</div>

<footer>
  footer
</footer>

the gap between the two right-floated elemens. there should be no gap, trying to resolve it with floats or flexbox...(no grid) — Smithy, Sep 07 '21 at 09:42
flex has the same issue...it stretches the second element too much on the bottom — Smithy, Sep 07 '21 at 09:49
I had a similar issue and the only way I got around it was using grid with display contents — Pete, Sep 07 '21 at 09:52

Pete · Answer 1 · 2021-09-07T10:10:52.513

If you can use grid and change the starting order of your html elements, you can make them stack how you want on desktop, and then use a media query to change to flex and have them 100% width and ordered correctly for mobile

.test1 {
  background: red;
}

.test2 {
  background: yellow;
}

.test3 {
  background: lightblue;
}

.test4 {
  background: green;
}

.wrap {
  display: grid;
  grid-template-columns: 66% 33%;
  column-gap: 1%;
}

@media(max-width: 992px) {
  .wrap {
    display: flex;
    flex-wrap: wrap;
  }
  .column {
    display: contents;
  }
  section {
    width: 100%;
  }
  .test1 {
    order: 1;
  }
  .test2 {
    order: 2;
  }
  .test3 {
    order: 3;
  }
  .test4 {
    order: 4;
  }
}

*/

<div class="wrap">
  <div class="column">
    <section class="test1">
      <b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum
      dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
      elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
      fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
      perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
    </section>
    <section class="test3">
      <b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
  </div>
  <div class="column">
    <section class="test2">
      <b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
    <section class="test4">
      <b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
  </div>
</div>

<footer>
  footer
</footer>

I guess you don't need grid and can just use flex:

.test1 {
  background: red;
}

.test2 {
  background: yellow;
}

.test3 {
  background: lightblue;
}

.test4 {
  background: green;
}

.wrap {
  display: flex;
  justify-content: space-between;
}

.column:first-child {
  width: 66%;
}

.column:last-child {
  width: 33%;
}

@media(max-width: 992px) {
  .wrap {
    flex-wrap: wrap;
  }
  .column {
    display: contents;
    width: 100%;
  }
  section {
    width: 100%;
  }
  .test1 {
    order: 1;
  }
  .test2 {
    order: 2;
  }
  .test3 {
    order: 3;
  }
  .test4 {
    order: 4;
  }
}

*/

<div class="wrap">
  <div class="column">
    <section class="test1">
      <b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum
      dolor, sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
      elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
      fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
      perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
    </section>
    <section class="test3">
      <b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
  </div>
  <div class="column">
    <section class="test2">
      <b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
    <section class="test4">
      <b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
    </section>
  </div>
</div>

<footer>
  footer
</footer>

Amaury Hanser · Answer 2 · 2021-09-07T10:04:45.257

You could work only on a media query min-width: 992px.

On your .wrap element, add display: flex and flex-wrap: wrap. flex-wrap will allow your children to go to the next line.

      .wrap {
        display: flex;
        flex-wrap: wrap;
      }

Then, define the width of your children.

  section:nth-child(odd) {
    width: 66%;
  }
  section:nth-child(even) {
    width: 34%;
  }

@media(min-width: 992px) {
  .wrap {
    display: flex;
    flex-wrap: wrap;
  }
  section:nth-child(odd) {
    width: 66%;
  }
  section:nth-child(even) {
    width: 34%;
  }
}


/* For demo only */

.test1 {
  background: red;
}

.test2 {
  background: yellow;
}

.test3 {
  background: lightblue;
}

.test4 {
  background: green;
}

<div class="wrap">
  <section class="test1">
    <b>TEST 1</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat? Lorem ipsum dolor,
    sit amet consectetur adipisicing elit. Aut obcaecati porro recusandae quae omnis voluptas reprehenderit nam, quos dicta fuga consequatur ipsum beatae vel ut veritatis velit corporis minima quod? Lorem ipsum dolor, sit amet consectetur adipisicing
    elit. Illo, adipisci aliquam iusto molestiae commodi quam, maiores quidem maxime laboriosam mollitia sint ad cumque culpa velit. Fugiat adipisci cupiditate beatae veniam. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis, expedita ipsam
    fugit repudiandae cupiditate earum tempora veniam accusantium nam aliquid, optio in tempore nobis quaerat quam unde consectetur laborum? Inventore? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nihil facere quaerat ex, minima
    perspiciatis assumenda necessitatibus reprehenderit voluptatum quasi illo nisi tempora quibusdam repudiandae iure voluptas expedita. Tenetur, quod?
  </section>
  <section class="test2">
    <b>TEST 2</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
  </section>
  <section class="test3">
    <b>TEST 3</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
  </section>
  <section class="test4">
    <b>TEST 4</b> Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto omnis ad itaque iste nostrum minima rerum. Quidem hic, vitae blanditiis consectetur quibusdam culpa earum, ad, doloremque magni eveniet accusantium fugiat?
  </section>
</div>

Thanks, but the Element 2 still has too much space / padding to the bottom. So if the Element 1 was very large, that space would be even larger... — Smithy, Sep 07 '21 at 09:58
I don't know what space you are talking about. All children are edge to edge. Are you sure that you don't have conflicting styles ? — Amaury Hanser, Sep 07 '21 at 10:03

Order uneven sized elements in CSS

2 Answers2