Create square divs using susy-grid

Question

Is it possible to have @include span(3 of 12) return in pixels instead of a %?

I'm trying to create square elements, and I want the height of this element to be equal to its width.

.myElement {
  width: span(3 of 12)
  height: span(3 of 12)
}

Of course this causes height to be a %, which is really a % of its parent container, so it is not equal to the width! Any ideas?

Actually I bet this is impossible, since it would be like a dynamic stylesheet... — Don P, Jun 08 '14 at 05:04
possible duplicate of [Responsively change div size keeping aspect ratio](http://stackoverflow.com/questions/12121090/responsively-change-div-size-keeping-aspect-ratio) — cimmanon, Jun 08 '14 at 12:36

score 1 · Accepted Answer · answered Jun 08 '14 at 06:20

Not impossible at all — just tricky (if you want a fluid square).

// Static width/height is simple
.square-a {
  @include span(2 static);
  height: span(2 static);
}

// Fluid takes a bit more work
.square-b {
  @include span(2);
  height: 0;
  // %-Padding is always relative to parent width
  padding-top: span(2);
  position: relative;

  // Inner element positioned to fit space
  span {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

Here's a demo of both.

Create square divs using susy-grid

1 Answers1