Autoprefixer 9.4.0 brings limited autoplacement support to the IE CSS Grid.
Grid Autoplacement
If the grid
option is set to "autoplace"
, limited autoplacement support is now added to the Autoprefixer CSS Grid translations. You can also use the /* autoprefixer grid: autoplace */
control comment to enable autoplacement directly in your CSS.
In order to use the new autoplacement feature, you must define both rows and columns when declaring the grid template.
/* Input CSS */
/* autoprefixer grid: autoplace */
.autoplacement-example {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
grid-gap: 20px;
}
/* Output CSS */
/* autoprefixer grid: autoplace */
.autoplacement-example {
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 20px 1fr;
grid-template-columns: 1fr 1fr;
-ms-grid-rows: auto 20px auto;
grid-template-rows: auto auto;
grid-gap: 20px;
}
.autoplacement-example > *:nth-child(1) {
-ms-grid-row: 1;
-ms-grid-column: 1;
}
.autoplacement-example > *:nth-child(2) {
-ms-grid-row: 1;
-ms-grid-column: 3;
}
.autoplacement-example > *:nth-child(3) {
-ms-grid-row: 3;
-ms-grid-column: 1;
}
.autoplacement-example > *:nth-child(4) {
-ms-grid-row: 3;
-ms-grid-column: 3;
}
Autoplacement support in Autoprefixer is currently very limited in what it can do. Please read the Grid Autoplacement support in IE section before using this new feature.
Thanks to @bogdan0083 for implementing the new feature, @Dan503 for documenting it, and @evandiamond for coming up with the initial idea.
Other Changes
- Remove some unnecessary warnings for Grid (by @fanich37).