ZS/powergrid

IE11 doesn't support auto placement of grid items

MikeVaz opened this issue · 1 comments

MikeVaz commented

A work around we use in the powegrid is to automatically place items based on their order in the container.

<div class="pg-grid">
    <div>Cell-1-1</div>
    <div>Cell-1-2</div>
    <div class="pg-col-2">Cell-2-4</div>
</div>

In this example "Cell 1-1" will be placed in the first column of the first row, "Cell-1-2" in second column in first row. But "Cell-2-4" would be explicitly placed in the second column of the second row instead of being in the first column.

image

To do that we generate the following CSS code.

/* Auto placement of grid items based on the order */
.pg-grid > :nth-child(2n+1) {
  grid-column-start: 1;
  -ms-grid-column: 1;
}

.pg-grid > :nth-child(2n+2) {
  grid-column-start: 2;
  -ms-grid-column: 2;
}

.pg-grid > :nth-child(n+1) {
  grid-row-start: 1;
  -ms-grid-row: 1;
}

.pg-grid > :nth-child(n+3) {
  grid-row-start: 2;
  -ms-grid-row: 2;
}

Example

The limitation of this approach is when you start span several grid cells. Use explicit placement in such case.