How to draw a simple repeating grid layout

[leesiongchan]

.wrapper {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-gap: 10px;
  background-color: #fff;
  color: #444;
}

http://codepen.io/rachelandrew/pen/BNXyQa

In most cases we want it to be repeating without designing the grid-area, can we do that with grid-kiss?

[sylvainpolletvillard]

Not at the moment, no. Grid-kiss is intended for fixed, predictable layouts, so all the zones have to be defined explicitly.

[sylvainpolletvillard]

Note that it's totally fine to use both grid-kiss and standard grid declarations in your projects. See, your example code is very simple, grid-template-columns is easy and readable here. I don't think it is useful to add a custom syntax for it. But I am always open to suggestions.

[leesiongchan]

Well, it simply because your fallback looks so cool :) Would you mind to split it into another package?

[sylvainpolletvillard]

Lots of people are looking for a pure CSS fallback for Grid layout but I want to be clear: it is impossible to make a pure CSS fallback that is fully compliant with the Grid spec, because it let you do things that were not possible before.

The only reason my fallback works is precisely because of the limitations and constraints I have set for grid-kiss layouts. Implicit grid definition would not work for example, without JavaScript and DOM knowledge.