CSS Grid Columns stacking with large gap under each column - html

Question

I'm relatively new to CSS grid, I'm having issues with my columns. On desktop, columns 2 and 4 have a large gap between them. I'm struggling to close this gap as they must sit directly under each other. So, when each column has different heights of text in, all columns must sit nicely under each other with no gap. Then on mobile they all just stack nicely.
I have created a demo:
http://jsfiddle.net/1uvwyL7h/
.one {
background: red;
}
.two {
background: pink;
}
.three {
background: green;
}
.four {
background: yellow;
}
.wrapper section {
height: fit-content;
}
#media (max-width: 768px) {
.wrapper section:nth-child(2) {
margin: 32px 0 40px;
}
.wrapper section:nth-child(4) {
margin: 24px 0 40px;
}
}
#media (min-width: 768px) {
.wrapper {
display: grid;
gap: 1rem 4rem;
grid-template-columns: repeat(2, 1fr);
}
.wrapper section {
grid-column: 1/2;
}
.wrapper section.sp {
grid-column: 2/3;
grid-row: 1 / span 3;
}
.wrapper section.sa {
grid-column: 2/2;
grid-row: 3 / span 1;
}
}
#media (min-width: 1280px) {
.wrapper {
padding: 32px 24px 24px;
}
}
<div class="wrapper">
<section class="one">
<p>
MOBILE ORDER 1
</p>
<P>
DESKTOP COL 1 TOP LEFT
</P>
<p>
bla bla<br />bla bla<br />bla bla<br />bla bla<br />
</p>
<p>
bla bla<br />bla bla<br />bla bla<br />bla bla<br />
</p>
</section>
<section class="two sp">
<p>
MOBILE ORDER 2
</p>
<P>
DESKTOP COL 2 TOP RIGHT
</P>
<p>
bla bla<br />bla bla<br />bla bla<br />bla bla<br />
</p>
<p>
bla bla<br />bla bla<br />bla bla<br />bla bla<br />
</p>
<p>
bla bla<br />bla bla<br />bla bla<br />bla bla<br />
</p>
<p>
bla bla<br />bla bla<br />bla bla<br />bla bla<br />
</p>
</section>
<section class="three">
<p>
MOBILE ORDER 3
</p>
<P>
DESKTOP COL 1 BOTTOM LEFT
</P>
<p>
bla bla<br />bla bla<br />bla bla<br />bla bla<br />
</p>
<p>
bla bla<br />bla bla<br />bla bla<br />bla bla<br />
</p>
<p>
bla bla<br />bla bla<br />bla bla<br />bla bla<br />
</p>
<p>
bla bla<br />bla bla<br />bla bla<br />bla bla<br />
</p>
</section>
<section class="four sa">
<p>
MOBILE ORDER 4
</p>
<P>
DESKTOP COL 2 BOTTOM RIGHT
</P>
<p>
bla bla<br />bla bla<br />bla bla<br />bla bla<br />
</p>
<p>
bla bla<br />bla bla<br />bla bla<br />bla bla<br />
</p>
</section>
</div>
Thanks

Answer 1

Revised the CSS. Some factors in your grid are not needed.
We have a CSS called 'grid-container' next to your 'wrapper' in DIV, but you can merge both of those together (though its ideal to place all grid setup in the 'grid-container'.
Making a starter grid from scratch with all the basic parameters helps you to catch certain errors, such as loosing the grid box auto height on the text (longer text in one grid and shorter text in other grid).
Additional 'How To' info:
mozilla
/*--====Grid====--*/
.grid-container {
display: grid;
grid-area: auto / auto / auto / auto;
gap: 10px;
padding: 10px;
/*--background-color: #2196F3;--*/ /*--If you want background color--*/
}
.one {background: red;}
.two {background: pink;}
.three {background: green;}
.four {background: yellow;}
/*--This not needed--*/
xxxx.wrapper section {height: fit-content;}
/*--This not needed--*/
xxx#media (max-width: 768px) {
.wrapper section:nth-child(2) {
margin: 32px 0 40px;
}
.wrapper section:nth-child(4) {
margin: 24px 0 40px;
}
}
#media (min-width: 768px) {
.wrapper {
display: grid;
gap: 1rem 1rem;
grid-template-columns: repeat(2, 1fr);
}
section.one {
grid-area: 1 / 1;
}
section.two {
grid-area: 1 / 2;
}
section.three {
grid-area: 2 / 1;
}
section.four {
grid-area: 2 / 2;
}
}
}
/*--This not needed--*/
xxx#media (min-width: 1280px) {
.wrapper {
padding: 32px 24px 24px;
}
}
h1, h2, h3, h4, p {
color: black;
padding: 10px;
margin: 0;
}
<div class="grid-container wrapper">
<section class="one">
<h2> MOBILE ORDER 1 </h2>
<h4> DESKTOP COL 1 TOP LEFT </h4>
<p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p>
<p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p>
</section>
<section class="two sp">
<h2> MOBILE ORDER 2 </h2>
<h4> DESKTOP COL 2 TOP RIGHT </h4>
<p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p>
<p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p>
<p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p>
<p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p>
</section>
<section class="three">
<h2> MOBILE ORDER 3 </h2>
<h4> DESKTOP COL 1 BOTTOM LEFT </h4>
<p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p>
<p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p>
<p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p>
<p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p>
</section>
<section class="four sa">
<h2> MOBILE ORDER 4 </h2>
<h4> DESKTOP COL 2 BOTTOM RIGHT </h4>
<p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p>
<p> bla bla<br />bla bla<br />bla bla<br />bla bla<br /> </p>
</section>
</div>