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
162 lines
2.8 KiB
CSS
162 lines
2.8 KiB
CSS
/*****************\
|
|
AREAS ALGORITHM
|
|
\*****************/
|
|
|
|
.grid-template-areas {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"a-conflict a-conflict"
|
|
"b-conflict b-conflict";
|
|
}
|
|
|
|
.grid-template-areas.conflict {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
grid-template-areas:
|
|
"a-conflict"
|
|
"b-conflict";
|
|
}
|
|
|
|
.a {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 2;
|
|
grid-area: a-conflict;
|
|
}
|
|
|
|
.grid-template-areas.conflict > .a {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 1;
|
|
}
|
|
|
|
.b {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 2;
|
|
grid-area: b-conflict;
|
|
}
|
|
|
|
.grid-template-areas.conflict > .b {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 1;
|
|
}
|
|
|
|
.grid-template {
|
|
-ms-grid-rows: 30px 1fr 30px;
|
|
-ms-grid-columns: 120px (250px 10px)[4];
|
|
grid-template:
|
|
[header-left] "head head" 30px [header-right]
|
|
[main-left] "nav main" 1fr [main-right]
|
|
[footer-left] "nav foot" 30px [footer-right]
|
|
/ 120px repeat(4, 250px 10px);
|
|
}
|
|
|
|
@media (min-width: 1000px) {
|
|
.grid-template {
|
|
-ms-grid-rows: 30px auto 1fr 30px;
|
|
-ms-grid-columns: 1fr;
|
|
grid-template:
|
|
[header-left] "head" 30px [header-right]
|
|
[nav-left] "nav" auto [nav-right]
|
|
[main-left] "main" 1fr [main-right]
|
|
[footer-left] "foot" 30px [footer-right]
|
|
/ 1fr;
|
|
}
|
|
}
|
|
|
|
.grid-template.conflict {
|
|
-ms-grid-rows: auto 20px auto;
|
|
-ms-grid-columns: 1fr 1fr;
|
|
grid-template:
|
|
"head head"
|
|
"nav main" 20px
|
|
"nav foot"
|
|
/ 1fr 1fr;
|
|
}
|
|
|
|
.head {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 2;
|
|
grid-area: head;
|
|
}
|
|
|
|
.grid-template.conflict > .head {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 2;
|
|
}
|
|
|
|
.main {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 2;
|
|
grid-area: main;
|
|
}
|
|
|
|
.grid-template.conflict > .main {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-column: 2;
|
|
}
|
|
|
|
.nav {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-row-span: 2;
|
|
-ms-grid-column: 1;
|
|
grid-area: nav;
|
|
}
|
|
|
|
.grid-template.conflict > .nav {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-row-span: 2;
|
|
-ms-grid-column: 1;
|
|
}
|
|
|
|
.foot {
|
|
-ms-grid-row: 3;
|
|
-ms-grid-column: 2;
|
|
grid-area: foot;
|
|
}
|
|
|
|
.grid-template.conflict > .foot {
|
|
-ms-grid-row: 3;
|
|
-ms-grid-column: 2;
|
|
}
|
|
|
|
@media (min-width: 1000px) {
|
|
.head {
|
|
-ms-grid-row: 1;
|
|
-ms-grid-column: 1;
|
|
-ms-grid-column-span: 1;
|
|
}
|
|
.main {
|
|
-ms-grid-row: 3;
|
|
-ms-grid-column: 1;
|
|
}
|
|
.nav {
|
|
-ms-grid-row: 2;
|
|
-ms-grid-row-span: 1;
|
|
-ms-grid-column: 1;
|
|
}
|
|
.foot {
|
|
-ms-grid-row: 4;
|
|
-ms-grid-column: 1;
|
|
}
|
|
}
|
|
|
|
/*********************\
|
|
AUTOPLACE ALGORITHM
|
|
\*********************/
|
|
|
|
.grid-autoplace {
|
|
display: -ms-grid;
|
|
display: grid;
|
|
-ms-grid-columns: 1fr 1fr 1fr;
|
|
grid-template-columns: 1fr 1fr 1fr;
|
|
-ms-grid-rows: auto;
|
|
grid-template-rows: auto;
|
|
grid-gap: 30px;
|
|
}
|