Looking for a way to create a grid layout that adjusts row sizes based on adjacent siblings. Interested in SCSS or CSS solutions using grid, flexbox, or other techniques.
https://i.sstatic.net/Ump5U.png
I am working with a dynamically generated list based on configurations. The length, number, and order of items are unknown. There are certain rules like item-type-a always taking up a full row and item-type-b should stretch across the row with a maximum of 3 per row.
Is it possible to achieve this solely through CSS?
<div class="container">
<div class="item item-type-a">Type A</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-a">Type A</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-b">Type B</div>
<div class="item item-type-a">Type A</div>
</div>
To recreate the layout pictured, I used the following CSS but need to find a way to exclude item-type-c and item-type-d.
<style>
.container {
background: white;
border: dashed red 1px;
padding: 24px;
max-width: 1080px;
display: grid;
gap: 2rem 2rem;
grid-template-columns: repeat(12, 1fr);
}
.item {
background: lightgray;
min-width: 200px;
min-height: 100px;
display: grid;
place-items: center;
text-align: center;
font-size: 24px;
font-family: 'Helvetica';
}
.item-type-a {
grid-column: auto / span 12;
}
.item-type-b {
grid-column: auto / span 6;
}
.item-type-c {
grid-column: auto / span 4;
}
.item-type-d {
grid-column: auto / span 12;
}
</style>