I’m using CSS Grid from Bootstrap where I have an issue with the first div spanning the entire height of the grid area.
.grid {
display: grid;
grid-template-rows: repeat(var(--bs-rows, 1), 1fr);
grid-template-columns: repeat(var(--bs-columns, 12), 1fr);
gap: var(--bs-gap, 3.125rem);
column-gap: 0;
row-gap: 0;
}
.grid .g-col-lg-4 {
grid-column: auto / span 4;
}
.grid .g-start-lg-5 {
grid-column-start: 5;
}
.grid {
width: 100%;
}
.item {
padding: 50px 0;
outline: 1px solid red;
outline-offset: .012rem;
}
/*
.grid .item:first-child{
grid-column: 1/2;
}
*/<div class="grid">
<div class="item g-col-12 g-col-lg-4">Item 1 full height</div>
<div class="item g-col-12 g-col-lg-4">Item 2</div>
<div class="item g-col-12 g-col-lg-4">Item 3</div>
<div class="item g-col-12 g-col-lg-4 g-start-lg-5">Item 4</div>
<div class="item g-col-12 g-col-lg-4">Item 5</div>
</div>You can see the first box should span the height of the entire grid area.
Looking at this article, I tried the following but without any luck. On reflection perhaps the grid-column-start method on lg devices is not the best approach to push the div over to make space for the first div?
.grid .item:first-child{
grid-column: 1/2;
}