mirror of
https://github.com/hanzoai/autoprefixer.git
synced 2026-09-24 16:55:58 +00:00
Bogdan DolinandAndrey Sitnik
9948f25978
* [css-grid] Implement Autoplacement feature * [css-grid] Add test cases for autoplacement * [css-grid] fix grid-template-rows/columns values * [css-grid] add support for 'grid-auto-flow' property in autoplacement * [refactor] move part of functionality to grid-rows-columns hack * [css-grid] Add test cases for grid-auto-flow and for rows warning * update size limit * [css-grid] Comment out grid-auto-flow warning (at least for now) * [css-grid] Show warning when grid-auto-flow: dense is used * [css-grid] add FIXME about commented out warning * update size limit again to make CI pass * [css-grid] Show grid-auto-flow warning only if grid template is present * [css-grid] Fix warnings * [refactor] Add comments * [css-grid] Add support for grid: 'autoplace' * [css-grid] Remove the unneeded output Now as we support grid: 'autoplace' option, autoplacement works only where defined, so autoplacement won't work in grid-status.css now. * update size limit value * [css-grid] Add autoplace conditional comment * [css-grid] Add test cases with autoplace conditional comments * [playground] Add support for grid autoplacement * [refactor] Remove todo comment * [css-grid] Change autoplace conditional comment and fix test cases * update size limit value * update readme.md * update readme 2 * Adding a table of contents (install this VS Code extension to easily keep it up to date: https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one#overview) * Fixing FAQ heading levels The TOC wasn't generating correctly because the FAQ heading levels were incorrect * Grid autoplacement readme updates * (alias for deprecated value `on`) text in readme * [css-grid] fix grid areas algorithm * [css-grid] Add test to check the output for different grid options * Updating readme with "no-autoplace" grid setting. * Readme "Do not create `::before` and `::after` pseudo elements" section * Fixing ::before/::after example in readme * Removed word "both" (there are 3 items) * Minor readme fixes * [css-grid] Add warning when grid-gap is used without template or autoplacement * [css-grid] fix grid-gap warnings * update size limit * Added section about changing the grid-gap value to the Autoplacement guide * Adding note about the lack of auto-fit and auto-fill support I think we need to point this out specifically since people will get excited when they here auto-placement support is coming and think _all_ of auto-placement support is coming. * Fixing inconsistent indentation in Readme I'm used to having an indent size of 2 spaces. The rest of the readme uses an indent size of 4 spaces though so I've increased any 2 space indents to 4 spaces. * [css-grid] fix rows/columns values * [css-grid] Add warning for grid-template-columns property
82 lines
1.6 KiB
CSS
82 lines
1.6 KiB
CSS
/* autoprefixer grid: on */
|
|
/* autoprefixer grid: off */
|
|
|
|
.grid-disabled {
|
|
/* autoprefixer: off */
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
}
|
|
|
|
.grid {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-columns: 1fr 1fr 1fr;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
-ms-grid-rows: 100px 100px;
|
|
grid-template-rows: 100px 100px;
|
|
/* autoprefixer: ignore next */
|
|
grid-auto-flow: column;
|
|
}
|
|
|
|
.grid-status-off {
|
|
/* autoprefixer grid: off */
|
|
/* autoprefixer grid: off */
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: 100px 100px;
|
|
}
|
|
|
|
.grid-2 {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
}
|
|
|
|
@supports (grid-auto-rows: 100px) {
|
|
.disabled {
|
|
display: grid;
|
|
grid-auto-rows: 100px;
|
|
}
|
|
}
|
|
|
|
.grid-autoplace-enabled {
|
|
/* autoprefixer grid: autoplace */
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-columns: 1fr 30px 1fr 30px 1fr;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
-ms-grid-rows: auto;
|
|
grid-template-rows: auto;
|
|
grid-gap: 30px;
|
|
}
|
|
|
|
.grid-autoplace-enabled > *:nth-child(1) {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
}
|
|
|
|
.grid-autoplace-enabled > *:nth-child(2) {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 3;
|
|
}
|
|
|
|
.grid-autoplace-enabled > *:nth-child(3) {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 5;
|
|
}
|
|
|
|
.grid-autoplace-disabled {
|
|
/* autoprefixer grid: off */
|
|
/* autoprefixer grid: autoplace */
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: auto;
|
|
grid-gap: 30px;
|
|
}
|
|
|
|
.grid-autoplace-disabled-2 {
|
|
/* autoprefixer grid: no-autoplace */
|
|
-ms-grid-columns: 1fr 1fr 1fr;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
-ms-grid-rows: auto;
|
|
grid-template-rows: auto;
|
|
}
|