Attempting to revamp someone else's messy, yet effective, CSS3 template into a more organized format. The transition to bourbon/neat has been smooth, but I'm facing a roadblock when it comes to creating a responsive image grid.
<section class="page-content">
{% for post in site.posts reversed %}
<div class="myevent" style="background-image:url({{post.cover}});">
{% endfor %}
</section>
Within an outer-container, I have a series of dynamically generated divs (thanks to Jekyll's tempting). On larger screens, I want each div to occupy span-columns(4) [with media queries adjusting the columns to 8 or 4 based on screen width].
Each div contains an image as a background and a header text label. If the screen was a fixed size without side borders (each div being 33% width), making them square would be straightforward with a height of 33vw. However, the challenge lies in achieving square divs when the layout variables are uncertain - screen width, padding, column count, gutters, etc.
.page-content {
@include outer-container;
}
.myevent {
@include span-columns(4);
@include omega;
//
// Need to make these divs square, struggling with the calculation
//
}
.nth-element {
// Clear gutter every third element
@include omega(3n);
}
// Additional breakpoints for 8 and 4 columns with corresponding omega changes
Unable to determine the width of the .myevent divs and establish their height to match the width, seeking guidance on this issue.