Grid Columns Without Rows? - css

Question

I'm trying to create a 3 column layout using the CSS Grid spec but I'm running into an issue with rows and element sizing. My columns need to contain an unspecified amount of content with varying heights.
This is my ideal layout:
Problems:
1) If I tell element A and B to use row 1, column 1 then they stack on top of one another rather than B below A.
2) If I specify element B to use the second row, then it gets pushed below element C due to element C making row 1 tall.
3) If I specify element B to use the second row, then element A stretches to fill row 1.
Is there any way to get elements to behave like in the first picture?
The only solution I know of is to create "scaffolding" divs inside the columns like this:
<div class="grid">
<div class="col">
<div class="itemA"></div>
<div class="itemB"></div>
</div>
<div class="col">
<div class="itemC"></div>
</div>
<div class="col">
<div class="itemD"></div>
<div class="itemE"></div>
<div class="itemF"></div>
</div>
</div>
But I dislike doing that and I thought the grid spec was supposed to allow for layout creation without scaffolding.
Questions:
1) Is there any way to prevent elements from stretching to fill the row vertically?
2) Is it possible to put two elements on the same row and have them appear one below the other instead of conflicting?
Here's my 2 pens where I'm attempting to find a solution with and without scaffolding:
Without scaffolding
With scaffolding

Answer 1

The closest i could have, but i do recommend you to use flexbox, You can't only define columns in CSS grids, the browsers will define rows for you, if you don't, and you don't manage them, you will get weird layout.
I hard coded the difference in heights between elements.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.grid {
background: brown;
display: grid;
grid-template-columns: auto 1fr auto;
grid-gap: 10px;
padding: 10px;
}
.grid>div {
background-color: orange;
}
.itemA {
grid-column-start: 1;
grid-row: 1 / 1;
width: 100px;
height: 100px;
}
.itemB {
grid-column-start: 1;
grid-row: 2 / 4;
height: 200px;
}
.itemC {
grid-column-start: 2;
grid-row: 1 / 3;
height: 200px;
}
.itemD {
grid-column-start: 3;
width: 100px;
height: 100px;
}
.itemE {
grid-column-start: 3;
height: 100px;
}
.itemF {
grid-column-start: 3;
grid-row: 3 / 4;
height: 200px;
}
<div class="grid">
<div class="itemA">A</div>
<div class="itemB">B</div>
<div class="itemC">C</div>
<div class="itemD">D</div>
<div class="itemE">E</div>
<div class="itemF">F</div>
</div>