Order uneven sized elements in CSS [duplicate] - html

Question

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 1 year ago.
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>

Answer 1

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>

Answer 2

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>