Releases: postcss/autoprefixer
9.4.6
9.4.5
9.4.4
9.4.3
9.4.2
9.4.1
9.4 “Advance Australia”
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).
9.3.1
- Fix Grid prefixes with
repeat()
value (by @bogdan0083).
9.3 “Labor omnia vincit”
Autoprefixer 9.3 brings place-self
support for Grid Layout
place-self
@Dan503 and @bogdan0083 found a way to impement support for another Grid property
.grid > .center {
place-self: center;
}
.grid > .center {
-ms-grid-row-align: center;
-ms-grid-column-align: center;
place-self: center;
}
Other Changes
@Dan503 and @bogdan0083 also detected and fixed issue with Grid row/column span inheritance.