Autoprefixer の grid オプションの true
は、 no-autoplace
の別名です。しかし、 true
という表記は廃止予定になっているため、今後 Autoprefixer を導入する場合、使用するべきではありません。
Function autoprefixer(options)
returns a new PostCSS plugin. See [PostCSS API] for plugin usage documentation.
grid
(false|"autoplace"|"no-autoplace"): should Autoprefixer add IE 10-11 prefixes for Grid Layout properties?
"no-autoplace"
: enable Autoprefixer grid translations but exclude autoplacement support. You can also use /* autoprefixer grid: no-autoplace */
in your CSS. (alias for the deprecated true
value)
また、グリッドの自動配置を行なうにもかかわらず、 grid オプションに no-autoplace
と同等の役割を持つ true
を設定することは不適切です。そのため、今回 grid オプションに設定するべき値は autoplace
です。
autoprefixer({
grid: "autoplace",
browsers: ["ie >= 11"]
})
次に、グリッドの自動配置は grid-template-rows
プロパティ、 grid-template-columns
プロパティの両方が設定されていなければ動作しません。
If the grid
option is set to "autoplace"
, limited autoplacement support is added to Autoprefixers grid translations. You can also use the /* autoprefixer grid: autoplace */
control comment to enable autoplacement
Autoprefixer will only autoplace grid cells if both grid-template-rows
and grid-template-columns
has been set. If grid-template
or grid-template-areas
has been set, Autoprefixer will use area based cell placement instead.
Autoprefixer supports autoplacement by using nth-child
CSS selectors. It creates [number of columns] x [number of rows] nth-child
selectors. For this reason Autoplacement is only supported within the explicit grid.
grid-template
プロパティ、もしくは grid-template-areas
プロパティなどを使用するのでなければ、前述した 2 つのプロパティを設定してください。
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: auto auto auto;
grid-gap: 1em;
}