I want to achive a grid where a block of n elements is splitted by a 100% width banner. For example, a 100% width banner appears every 8 elements on a desktop. For tablets, a 100% width banner appears after 6 elements. For this requirement, CSS Grid seems the perfect tool.
Here is an example for the tablet:
I implemented this layout with the following code:
#gridWrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: minmax(0, 50px);
gap: 10px;
}
.element {
background-color: #ccc;
text-align: center;
}
.banner1 {
background-color: rebeccapurple;
grid-column: 1/4;
grid-row: 3/3;
}
.banner2 {
background-color: orange;
grid-column: 1/4;
grid-row: 6/6;
}<div id="gridWrapper">
<div class="element element-1">1</div>
<div class="element element-2">2</div>
<div class="element element-3">3</div>
<div class="element element-4">4</div>
<div class="element element-5">5</div>
<div class="element element-6">6</div>
<div class="element element-7">7</div>
<div class="element element-8">8</div>
<div class="element element-9">9</div>
<div class="element element-10">10</div>
<div class="element element-11">11</div>
<div class="element element-12">12</div>
<div class="element element-13">13</div>
<div class="element element-14">14</div>
<div class="element element-15">15</div>
<div class="element element-16">16</div>
<div class="element element-17">17</div>
<div class="element element-18">18</div>
<div class="banner1">banner1</div>
<div class="banner2">banner2</div>
</div>But here comes the problem: When there are not enough elements, the banner is hanging in the air:
I originally thought that I could "skip" empty rows with grid-auto-rows: minmax(0, 50px), but it does not work. Is there any option to "auto-dock" the 100% width banner to the next empty row?
