Skip to main content
Go to Latest
File
.a { display: grid; grid-template-columns: auto 1fr; justify-self: stretch; align-self: stretch; grid-column-start: 1; grid-column-end: span 3;}
.b { display: inline-grid; grid-template-rows: 10px repeat(4, 250px 10px) 20px; justify-self: stretch; align-self: stretch; grid-row-start: 1; grid-row-end: span 3;}
.c { grid-column: 1 / span 3;}
.d { grid-column: 1 / 3; grid-row: span 2 / 5;}
.e { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 4;}
.warn { 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; grid-template-rows: 1fr 1fr; grid-template-areas: "a a" "a a";}
.warn-gap-rows { grid-column-gap: 1rem; grid-template-rows: 1fr 1fr; grid-template-areas: "b b" "b b";}
.warn-gap-columns { grid-gap: 1rem; grid-template-columns: 1fr 1fr; grid-template-areas: "c c" "c c";}
.warn-gap-columns { grid-row-gap: 1rem; grid-template-columns: 1fr 1fr; grid-template-areas: "d d" "d d";}
.unknown { justify-self: start; -ms-flex-item-align: start; align-self: start;}
.flex { justify-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: -ms-flexbox; display: flex; justify-self: start; -ms-flex-item-align: end; align-self: end;}
@supports (display: grid) { .foo { 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 { grid-column: span 3;}
.bar { grid-row: span 3;}
.warn-display-contents { display: grid;}/* Emit warning if grid enabled */.warn-display-contents .grid { display: contents;}
.warn_ie_align { -ms-flex-align: center; align-items: center; display: grid;}
.warn_ie_justify { justify-items: center; display: grid;}
.warn_ie_justify_content { -ms-flex-pack: center; justify-content: center; display: grid;}
.warn_place_items { place-items: start end; display: grid;}
.place-self-a { place-self: center;}
.place-self-b { place-self: start end;}
/* must have correct -ms-grid-rows/columns values */.grid-correct-rows-columns { display: grid; grid-template-columns: 50px repeat(2, 1fr 2fr) 50px; grid-template-rows: repeat(1, auto 100px); grid-gap: 20px; grid-template-areas: ". . . . . ." ". . . . . .";}
.warn-auto-flow { grid-auto-flow: column; grid-template-columns: 1fr 1fr; grid-template-areas: ". ." ". .";}
.center-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-areas: ". z z ." ". z z .";}.center-item { grid-area: z; align-self: center; justify-self: center;}
.named { grid-template-rows: 1fr; grid-template-columns: [content] 1fr;}
/** https://github.com/postcss/autoprefixer/issues/1446 */.issue-1446 { grid-row-start: span 3; grid-row-end: 5;}