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
66 lines
1.3 KiB
CSS
66 lines
1.3 KiB
CSS
|
|
.grid-basic {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: auto;
|
|
grid-gap: 30px;
|
|
}
|
|
|
|
/* Must work with repeat function */
|
|
.grid-repeat {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr 2fr);
|
|
grid-template-rows: repeat(2, auto);
|
|
grid-gap: 30px;
|
|
}
|
|
|
|
/* Complex case */
|
|
.grid-complex {
|
|
display: grid;
|
|
grid-template-columns: 1fr repeat(2, minmax(100px, 200px)) 1fr;
|
|
grid-template-rows: 100px repeat(2, auto);
|
|
grid-gap: 30px 5px;
|
|
}
|
|
|
|
/* Must work inside media */
|
|
@media (min-width: 400px) {
|
|
.grid-media {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: auto;
|
|
grid-gap: 30px;
|
|
}
|
|
}
|
|
|
|
/* Must consider autoflow value */
|
|
.grid-flow-column {
|
|
display: grid;
|
|
grid-auto-flow: column;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: auto auto;
|
|
grid-gap: 30px;
|
|
}
|
|
|
|
/* Show warning if rows are not defined
|
|
and dense value is used */
|
|
.grid-warning-dense {
|
|
grid-auto-flow: column dense;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
}
|
|
|
|
/* Show warning autoflow used without rows/columns */
|
|
.grid-warning-autoflow {
|
|
grid-auto-flow: column;
|
|
}
|
|
|
|
.grid-autoplace-disabled {
|
|
/* autoprefixer grid: no-autoplace */
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-template-rows: auto;
|
|
grid-gap: 30px;
|
|
}
|
|
|
|
.grid-autoplace-gap-warn {
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
grid-gap: 30px;
|
|
} |