Skip to main content
Go to Latest
File
.a { display: -ms-grid; display: grid; -ms-grid-columns: auto 1fr; grid-template-columns: auto 1fr; -ms-grid-column-align: stretch; justify-self: stretch; -ms-grid-row-align: stretch; align-self: stretch; -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 3; grid-column-end: span 3;}
.b { display: -ms-inline-grid; display: inline-grid; -ms-grid-rows: 10px (250px 10px)[4] 20px; grid-template-rows: 10px repeat(4, 250px 10px) 20px; -ms-grid-column-align: stretch; justify-self: stretch; -ms-grid-row-align: stretch; align-self: stretch; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 3; grid-row-end: span 3;}
.c { -ms-grid-column: 1; -ms-grid-column-span: 3; grid-column: 1 / span 3;}
.d { -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1 / 3; -ms-grid-row: 3; -ms-grid-row-span: 2; grid-row: span 2 / 5;}
.e { -ms-grid-column: 1; grid-column-start: 1; -ms-grid-column-span: 2; grid-column-end: 3; -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-span: 3; grid-row-end: 4;}
.warn { -ms-grid-column-span: 3; grid-column-end: 3; grid: subgrid; grid-gap: 1rem; grid-template-areas: "head head" "nav main" "foot ....";}
.no-warn { /* autoprefixer grid: off */ grid-column-end: 3; grid: subgrid; grid-gap: 1rem; grid-template-areas: "head head" "nav main" "foot ....";}
.warn-gap-rows { grid-gap: 1rem; -ms-grid-rows: 1fr 1rem 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "a a" "a a";}
.warn-gap-rows { grid-column-gap: 1rem; -ms-grid-rows: 1fr 1fr; grid-template-rows: 1fr 1fr; grid-template-areas: "b b" "b b";}
.warn-gap-columns { grid-gap: 1rem; -ms-grid-columns: 1fr 1rem 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: auto 1rem auto; grid-template-areas: "c c" "c c";}
.warn-gap-columns { grid-row-gap: 1rem; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; -ms-grid-rows: auto 1rem auto; grid-template-areas: "d d" "d d";}
.unknown { -ms-grid-column-align: start; justify-self: start; -webkit-align-self: start; -ms-flex-item-align: start; -ms-grid-row-align: start; align-self: start;}
.flex { justify-self: flex-end; -webkit-align-self: flex-end; -ms-flex-item-align: end; align-self: flex-end;}
/* should add grid prefixes because a flex container can be a grid item */.align-justify-grid-flex { display: -webkit-flex; display: -ms-flexbox; display: flex; -ms-grid-column-align: start; justify-self: start; -webkit-align-self: end; -ms-flex-item-align: end; -ms-grid-row-align: end; align-self: end;}
@supports ((display: -ms-grid) or (display: grid)) { .foo { display: -ms-grid; display: grid; }}
@supports (justify-items: start) { .foo { justify-items: start; }}
.warn { grid-column-span: 2; grid-row-span: 2; grid-auto-columns: 100px; grid-auto-rows: 100px; grid-auto-flow: column; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); grid-template-rows: repeat(auto-fit, minmax(400px, 1fr));}
.baz { -ms-grid-column-span: 3; grid-column: span 3;}
.bar { -ms-grid-row-span: 3; grid-row: span 3;}
.warn-display-contents { display: -ms-grid; display: grid;}/* Emit warning if grid enabled */.warn-display-contents .grid { display: contents;}
.warn_ie_align { -webkit-align-items: center; -ms-flex-align: center; align-items: center; display: -ms-grid; display: grid;}
.warn_ie_justify { justify-items: center; display: -ms-grid; display: grid;}
.warn_ie_justify_content { -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; display: -ms-grid; display: grid;}
.warn_place_items { place-items: start end; display: -ms-grid; display: grid;}
.place-self-a { -ms-grid-row-align: center; -ms-grid-column-align: center; place-self: center;}
.place-self-b { -ms-grid-row-align: start; -ms-grid-column-align: end; place-self: start end;}
/* must have correct -ms-grid-rows/columns values */.grid-correct-rows-columns { display: -ms-grid; display: grid; -ms-grid-columns: 50px 20px 1fr 20px 2fr 20px 1fr 20px 2fr 20px 50px; grid-template-columns: 50px repeat(2, 1fr 2fr) 50px; -ms-grid-rows: auto 20px 100px; grid-template-rows: repeat(1, auto 100px); grid-gap: 20px; grid-template-areas: ". . . . . ." ". . . . . .";}
.warn-auto-flow { grid-auto-flow: column; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; grid-template-areas: ". ." ". .";}
.center-wrapper { display: -ms-grid; display: grid; -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); grid-template-areas: ". z z ." ". z z .";}.center-item { -ms-grid-row: 1; -ms-grid-row-span: 2; -ms-grid-column: 2; -ms-grid-column-span: 2; grid-area: z; -ms-grid-row-align: center; align-self: center; -ms-grid-column-align: center; justify-self: center;}
.named { -ms-grid-rows: 1fr; grid-template-rows: 1fr; -ms-grid-columns: [content] 1fr; grid-template-columns: [content] 1fr;}
.named > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1;}
.named > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2;}
/** https://github.com/postcss/autoprefixer/issues/1446 */.issue-1446 { grid-row-start: span 3; grid-row-end: 5;}