CSS Grid Polyfill playground

Usecases for François Remy's Grid Polyfill, made by Raphaël @goetter.

test 1 : simple grid

.container {
  display: grid;
  grid-template-columns: 200px 40% 10em;
}
1
2
3
4

test 2 : simple inline-grid

.container {
  display: inline-grid;
  grid-template-columns: 200px 10em;
}
1
2
3
4

FAILS on : IE11, Edge

test 3 : grid-gap

.container {
  display: grid;
  grid-template-columns: 200px 40% 10em;
  grid-gap: 2rem;
}
1
2
3
4

FAILS on : IE11, Edge

test 4 : fr unit

.container {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
}
1
2
3
4
5
6
7

test 5 : repeat() function

.container {
  display: grid;
  grid-template-columns: repeat(3, 300px 50px);
}
1
2
3
4
5
6
7

test 6 : repeat() auto-fit minmax()

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
1
2
3
4
5
6
7

FAILS on : IE11, Edge

test 7 : pseudo-elements

.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}
.container::before {
  content: "::before";
}
.container::after {
  content: "::after";
}
1

FAILS on : IE11, Edge

test 8 : auto-flow: column

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 100px 100px 100px;
  grid-auto-flow: column;
}
1
2
3
4
5
6

test 9 : span

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.three {
  grid-column: span 2;
}
.four {
  grid-row: span 2;
}
1
2
3
4
5
6

FAILS on : IE11, Edge

test 10 : grid-areas

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-template-areas: "a b" "c d";
}
..header {
  grid-area: a;
}
..nav {
  grid-area: c;
}
..article {
  grid-area: b;
}
..footer {
  grid-area: d;
}
header
article

test 11 : alignments

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 200px 200px;
  grid-template-areas: "a b" "c d";
}
..header {
  grid-area: a;
  justify-self: center;
}
..nav {
  grid-area: c;
  align-self: center;
}
..article {
  grid-area: b;
  justify-self: center;
  align-self: center;
}
..footer {
  grid-area: d;
}
header
article

FAILS on : IE11, Edge