CODEWITHSUNDEEP
csssassbourbonneat
user37166
user37166

Reputation: 101

bourbon neat square grid

trying to re-write another's template (which works well and is written in raw css3 – but is very messy).

Most stuff is easily translated to bourbon/neat but I'm stuck on getting up 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>

inside an outer-container I have a set of dynamically generated divs (using jekyll's tempting) and on large screens I have each div taking up span-columns(4) [I have media queries that change columns to 8 and 4 depending on width].

Each div has an image as a background and a header text label. If this was a fixed screen with no side borders (i.e. each div was 33% of the width it would be simple to add 33vw as the div height to go square My problem is getting the div to be square. As I do not know in advance what screen width, how much side padding the outer-container gets, how many columns, if there is a gutter (yes normally but no in single column) ..... 

.page-content {
  @include outer-container;
}

.myevent {
  @include span-columns(4);
  @include omega;
  //
  // has to be square - can't figure out how to calculate this
  //
}

.nth-element {
  // clear gutter every third
  @include omega(3n);
}

// I also have new-breakpoints at certain widths dropping to 8 and 4 columns automatically with corresponding omega(2n) and omega(1n) changes as the column totals change.

I am at a loss how to calculate the actual width of the .myevent and setup the height of these divs to equal to the width

Upvotes: 0

Views: 162

Answers (1)

whmii
whmii

Reputation: 440

One possible answer for this (and the solution I would probably use) is to relatively position the span-column object and absolutely position the content inside of it. Then I would add something like:

.my-cool-column {
  position: relative;

  &::before {
    content: "";
    display: block
    padding-top: 100%;
  }
}

This'll cause the padding top to be equal to the width of the parent element. That should work.

Upvotes: 0

Related Questions