tachyons grid: cell spanning two rows (of defined and absolute proportions)

Community Help
1

I have a grid working with tachyons that shifts 9 cells around so that, on large screens, the first cell spans two rows and on medium screens it spans one:

<div class="dt-row">
<div class="cf-ns nl2 nr2">
  <div class="fl h2-l w-100 w-33-m w-50-l ph2">100/50</div>
  <div class="fl w-50 w-33-m w-25-l ph2">50/25</div>
  <div class="fl w-50 w-33-m w-25-l ph2">50/25</div>
  <div class="fl w-50 w-33-m w-25-l ph2">50/25</div>
  <div class="fl w-50 w-33-m w-25-l ph2">50/25</div>
  <div class="fl w-50 w-33-m w-25-l ph2">50/25</div>
  <div class="fl w-50 w-33-m w-25-l ph2">50/25</div>
  <div class="fl w-50 w-33-m w-25-l ph2">50/25</div>
  <div class="fl w-50 w-33-m w-25-l ph2">50/25</div>
</div>
</div>

And this grid works just fine with the short bits of text I use to identify each cell.

When I try to plug in some images, however, I can’t seem to avoid the image size affecting the wrapping, such that the responsive breakpoints get buggy and the first cell ends up spanning three columns rather than two:

I’ve tried different approaches with the height scale, including setting proportions of the first cell at 100 and other cells at 50 (the closet things to a solution; as reflected in the notebook linked above), as well as trying to use the height scale (totally incorrect) and trying to explicitly set image heights (which just distorts image proportions).

Also, I’ve looked at border box, which sounds promising from the description in the tachyons docs:

The benefit of border-box as opposed to content-box (which is the default per the css spec) is that when you declare a width, that is the width of the element, regardless of how much border or padding you add to the element.

… Yet I still haven’t managed to get this technique working correctly.

I would really like to avoid having to crop images to identical sizes, and instead hope to be able to make a grid of images with equal heights and widths, where the proportions of each cell are defined programatically and always adhere to the specified proportions.

Any tips or tricks for accomplishing this using tachyons.css or JS?

For full disclosure: In 2017 I tried to help my wife make a lookbook for her work and got this same concept working using this theme [as really the site appearance is not my work, but that of the theme author], bootstrap, tons of reading [for the few tweeks I made], and some headaches. The result looks OK on desktop (and breakpoints work ok), but it badly needs an update, so I thought I’d try learning tachyons and giving it a facelift. Here’s the original:

Thanks in advance for any help!

2

Getting closer using aspect ratios. More soon.

3

Ok… so the issue appears to be with my use of horizontal padding – ph1 – is the culprit in causing the poor alignments and odd breakpoint issues. Trouble is, however, that as I try to subtract values from the defined image widths (like making an image occupy 48 width – w-33 – rather than 50 percent), the result is more wonky still. [EDIT: Turns out this is the wrong approach. Changing ph1 (horizontal padding) to pa1 (padding for all sides) uniformly applies padding and gets the table to look correctly.]

Anyway - in case this helps anyone reading this now or in the future, I have updated the notebook with a version of the grid that works (no padding). I’ll continue to hack away until I figure the padding situation out and will post an update.

Of course - if anyone has any sage advice, I would be more than happy to hear it!

4

Ok… Here it is:

<article class="cf">
    <div class="fl w-100 w-33-m w-50-l pa1">
    <a class="db aspect-ratio aspect-ratio--1x1">
      <span role="img" style="background-image:url(http://umni.design/img/sample-thumb.png);" class="bg-center cover aspect-ratio--object"></span>
    </a>
  </div>
  <div class="fl w-50 w-33-m w-25-l pa1">
    <a class="db aspect-ratio aspect-ratio--1x1">
      <span role="img" style="background-image:url(http://umni.design/img/sarc-cabaret_square_3_473-473.jpg);" class="bg-center cover aspect-ratio--object"></span>
    </a>
  </div>
  <div class="fl w-50 w-33-m w-25-l pa1">
    <a class="db aspect-ratio aspect-ratio--1x1">
      <span role="img" style="background-image:url(http://umni.design/img/ybts_square1.jpg);" class="bg-center cover aspect-ratio--object"></span>
    </a>
  </div>
  <div class="fl w-50 w-33-m w-25-l pa1">
    <a class="db aspect-ratio aspect-ratio--1x1">
      <span role="img" style="background-image:url(http://umni.design/img/ybts_square5.jpg);" class="bg-center cover aspect-ratio--object"></span>
    </a>
  </div>
  <div class="fl w-50 w-33-m w-25-l pa1">
    <a class="db aspect-ratio aspect-ratio--1x1">
      <span role="img" style="background-image:url(http://umni.design/img/leningrad-illusio_square1.jpg);" class="bg-center cover aspect-ratio--object"></span>
    </a>
  </div>
  <div class="fl w-50 w-33-m w-25-l pa1">
    <a class="db aspect-ratio aspect-ratio--1x1">
      <span role="img" style="background-image:url(http://umni.design/img/leningrad-center_carmen-electra_20_square.jpg);" class="bg-center cover aspect-ratio--object"></span>
    </a>
  </div>
  <div class="fl w-50 w-33-m w-25-l pa1">
    <a class="db aspect-ratio aspect-ratio--1x1">
      <span role="img" style="background-image:url(http://umni.design/img/leningrad_lights.jpg);" class="bg-center cover aspect-ratio--object"></span>
    </a>
  </div>
  <div class="fl w-50 w-33-m w-25-l pa1">
    <a class="db aspect-ratio aspect-ratio--1x1">
      <span role="img" style="background-image:url(http://umni.design/img/urbo2_square_473-473.jpg);" class="bg-center cover aspect-ratio--object"></span>
    </a>
  </div>
  <div class="fl w-50 w-33-m w-25-l pa1">
    <a class="db aspect-ratio aspect-ratio--1x1">
      <span role="img" style="background-image:url(http://umni.design/img/cccs-unpfii_square4.jpg);" class="bg-center cover aspect-ratio--object"></span>
    </a>
  </div>
</article>

This approach differs from my original attempt in that it uses spans to create the image areas. Doing so allows me to substitute in- and out- images with text (or anything else) while still reserving a defined grid space. Hence, I eliminate the need to worry too much about pixel-perfect cropping of images – as long as the image proportions are more or less the same as the allocated space, they should appear correctly (though I haven’t really tested this much).

Hope this helps someone (and that I’m not just cluttering up the forum)!