Autoprefixer

When grid is set to "autoplace" (via environment variable, the grid: "autoplace" option, or the /* autoprefixer grid: autoplace */ control comment), Autoprefixer adds limited autoplacement support for IE 10-11.

Requirements for Autoplacement:

• Both grid-template-rows and grid-template-columns must be explicitly set.
• If grid-template or grid-template-areas are used, Autoprefixer uses area-based placement instead of autoplacement.
• Autoplacement is only supported within an explicit grid using nth-child selectors.

Limitations:

• repeat(auto-fit, ...) and repeat(auto-fill, ...) are not supported and will not be IE-friendly.
• Manual cell placement (e.g., grid-column, grid-row) or column/row spans are not allowed inside an autoplacement grid; doing so will break the layout in IE.
• Avoid using ::before and ::after pseudo-elements inside an autoplacement grid, as IE will place them in the first grid cell, potentially displacing actual content.
• If you change grid-gap values via media queries or classes, you must redeclare the grid columns and rows to ensure it works in IE.

/* autoprefixer grid: autoplace */

.autoplacement-example {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-gap: 20px;
}

You can selectively disable Autoprefixer in your CSS using special comments:

• /* autoprefixer: off */: Disables all translations for the entire block (before and after the comment).
• /* autoprefixer: ignore next */: Disables Autoprefixer only for the next property, rule selector, or at-rule parameter.
• /* autoprefixer grid: (autoplace|no-autoplace|off) */: Controls Grid translation behavior for the block.

Example:

.b {
  /* autoprefixer: off */
  transition: 1s; /* will not be prefixed */
}

.c {
  /* autoprefixer: ignore next */
  transition: 1s; /* will not be prefixed */
  mask: url(image.png); /* will be prefixed */
}

.a {
  transition: 1s; /* will be prefixed */
}

.b {
  /* autoprefixer: off */
  transition: 1s; /* will not be prefixed */
}

.c {
  /* autoprefixer: ignore next */
  transition: 1s; /* will not be prefixed */
  mask: url(image.png); /* will be prefixed */
}

Autoprefixer can translate modern CSS Grid syntax into IE 10 and IE 11 syntax, but this is disabled by default because it does not work in 100% of cases. If you choose to use it, you must manually enable it and test your layout thoroughly in IE.

How to enable Grid prefixes

You can enable this feature using one of three methods:

1. Option: Set the grid: "autoplace" option in your Autoprefixer configuration.
2. Control Comment: Add /* autoprefixer grid: autoplace */ to your CSS.
3. Environment Variable: Use AUTOPREFIXER_GRID=autoplace when running your build command (e.g., AUTOPREFIXER_GRID=autoplace npm build).

Limitations and Best Practices

• Autoplacement: Support is limited. For better results, use grid-template or grid-template-areas instead of relying on implicit autoplacement.
• Avoid: Do not use repeat(auto-fit, ...) or repeat(auto-fill, ...) as they are not supported in the IE polyfill.
• Manual Placement: Manual cell placement or column/row spans are not allowed inside an autoplacement grid.
• Pseudo-elements: Do not create ::before and ::after pseudo-elements within an autoplacement grid.
• Grid Gap: When changing grid-gap, columns and rows must be re-declared.

.page {
  display: grid;
  grid-gap: 33px;
  grid-template:
    'head head  head' 1fr
    'nav  main  main' minmax(100px, 1fr)
    'nav  foot  foot' 2fr /
    1fr 100px 1fr;
}
.page__head {
  grid-area: head;
}
.page__nav {
  grid-area: nav;
}
.page__main {
  grid-area: main;
}
.page__footer {
  grid-area: foot;
}

Enabling autoplacement in established projects can break existing layouts. The safest way to integrate it is to keep it disabled by default and use control comments to enable it only for new, compatible code.

Option 1: Disable for specific rules Use /* autoprefixer grid: no-autoplace */ to prevent Autoprefixer from attempting to autoplace elements in a specific container.

Option 2: Enable for new code (Recommended) Keep the global setting or project default as no-autoplace, and use /* autoprefixer grid: autoplace */ only on new grid containers that follow the autoplacement requirements.

/* Disable autoplacement to fix the issue */
.grid {
  /* autoprefixer grid: no-autoplace */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

/* Enable autoplacement when you want to use it in new code */
.new-autoplace-friendly-grid {
  /* autoprefixer grid: autoplace */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, auto);
}

To support CSS Grid prefixes in a Create React App project, follow these steps:

1. Install autoprefixer and cross-env:

npm install autoprefixer@latest cross-env --save-dev

2. Update your package.json to include last 1 ie version in the browserslist development settings:

"browserslist": {
  "production": [
    ">0.2%",
    "not dead",
    "not op_mini all"
  ],
  "development": [
    "last 1 chrome version",
    "last 1 firefox version",
    "last 1 safari version",
    "last 1 ie version"
  ]
}

3. Prefix your scripts with cross-env AUTOPREFIXER_GRID=autoplace:

"scripts": {
  "start": "cross-env AUTOPREFIXER_GRID=autoplace react-scripts start",
  "build": "cross-env AUTOPREFIXER_GRID=autoplace react-scripts build",
  "test": "cross-env AUTOPREFIXER_GRID=autoplace react-scripts test",
  "eject": "react-scripts eject"
}

Use no-autoplace instead of autoplace if you wish to disable autoplacement support.