3

So you I want grid like this:

+-----------------------+
|          A            |
-------|--------|-------+
|  B   |  C     |   D   |
|      |        |       |
+------+--------+-------+

I can do something like this (scss syntax): 

grid-template-areas: "a-block a-block a-block" "b-block c-block d-block";

So question: how can I not repeat, "a-block" three times? Can I do something like repeat("a_block", 3) or whatever? Is there a more compact way to span grid-area columns (in sass)?

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
iLemming
  • 34,477
  • 60
  • 195
  • 309

2 Answers2

2

No, there is no other way to declare these string values (at the plain CSS level).

Every string must have the same number of columns, as defined in the Grid spec.

More details here:

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
  • no, I guess you can't do it in vanilla CSS. That's too bad. This forces you to keep the names short, but I'd like to keep names longer - to match classes of the elements sitting in those areas. – iLemming Mar 07 '18 at 07:03
2

This sass function should do the trick. Not sure if this is the best way of writing it, but it seems to work.

@function repeat-str($str, $times) {
  @if $times > 0 {
    @return $str + repeat-str($str, $times - 1);
  }
  @return "";
}

.grid {
  grid-template-areas: repeat-str("a-block ", 3) "b-block c-block d-block";
  // output: grid-template-areas: "a-block a-block a-block " "b-block c-block d-block";
}
kingdaro
  • 11,528
  • 3
  • 34
  • 38
  • gosh, SASS can be really ugly sometimes ;) Well, it might be ugly but it works. – iLemming Mar 07 '18 at 06:58
  • I agree, haha. Might even opt for just writing out the repeated names myself, but maybe the function can be reused somewhere. Who knows ¯\\_(ツ)_/¯ – kingdaro Mar 07 '18 at 06:59
  • For simple grids repeating names is a way to go. But in a real app it's really nice to give grid-areas same names as classes of the elements that would be placed in there. And if you use BEM, names can get pretty long. And if you need to span like 20 of them... you can imagine – iLemming Mar 07 '18 at 07:08