CODEPEN Layout Example
Trying to achieve a GridCSS layout similar to this:
https://i.sstatic.net/hJgIt.png
Challenges:
Struggling to make child elements overflow their parent grid when using grid-column: span 4;.
Note:
- Children will peak on mobile
- The grid will have scroll bars if children overflow
- Children perfectly align with the grid.
Question:
Is it possible for CSS Grid Items to overflow with a scroll bar while aligning children to the grid using grid-column? If so, what properties are missing? If not, what workarounds can be used to achieve these layouts shown above when utilizing CSS Grid?
HTML:
<section>
<div class="container">
<div class="grid">
<div class="element">
<img src="https://placebear.com/400/500" alt="">
<div class="copy">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
</div>
</div>
<div class="element">
<img src="https://placebear.com/400/500" alt="">
<div class="copy">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
</div>
</div>
<div class="element">
<img src="https://placebear.com/400/500" alt="">
<div class="copy">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
</div>
</div>
<!-- UNCOMMENT BELOW -->
<!-- <div class="element">
<img src="https://placebear.com/400/500" alt="">
<div class="copy">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sint, eveniet commodi?
</div>
</div> -->
</div>
</div>
</section>
CSS:
section {
width: 100%;
display: block;
box-sizing: border-box;
padding: 64px 48px;
background: green;
}
.container {
margin: 0 auto;
max-width: 1032px;
background: rgba(244,244,244, .25);
}
.grid {
display: grid;
grid-auto-flow: column;
grid-gap: 10px;
overflow: auto;
grid-template-columns: repeat(12, 1fr);
grid-gap: 48px;
}
.element {
padding:30px 0;
text-align: center;
background: papayawhip;
grid-column: span 4;
}