115 lines
2.7 KiB
CSS
115 lines
2.7 KiB
CSS
/* quotes */
|
|
div {
|
|
grid-template-areas:
|
|
'header header'
|
|
'main sidebar'
|
|
'footer footer';
|
|
}
|
|
|
|
/* numbers */
|
|
div {
|
|
grid-template-columns:
|
|
[full-start] minmax(1.50em, 1fr)
|
|
[main-start] minmax(.40ch, 75ch)
|
|
[main-end] minmax(1em, 1.000fr)
|
|
[full-end];
|
|
}
|
|
|
|
/* casing */
|
|
div {
|
|
GRID:
|
|
[top] 1fr
|
|
[middle] 1fr
|
|
bottom;
|
|
|
|
grid-TEMPLATE:
|
|
"a a a" 200px
|
|
"b b b" 200px
|
|
/ 200px 200px auto;
|
|
}
|
|
|
|
/* break before first line if there are any breaks */
|
|
div {
|
|
grid-template-columns:
|
|
1fr 100px 3em;
|
|
grid: [wide-start] "header header header" 200px [wide-end]
|
|
"footer footer footer" 25px
|
|
/ auto 50px auto;
|
|
}
|
|
|
|
/**
|
|
* https://github.com/prettier/prettier/issues/2703#issuecomment-341188126
|
|
*/
|
|
.container {
|
|
display: grid;
|
|
|
|
/* basic template rows/columns */
|
|
grid-template-columns: 1fr 100px 3em;
|
|
grid-template-rows: 1fr 100px 3em;
|
|
/* template rows/columns with named grid lines */
|
|
grid-template-columns:
|
|
[wide-start] 1fr
|
|
[main-start] 500px
|
|
[main-end] 1fr
|
|
[wide-end];
|
|
grid-template-rows:
|
|
[top] 1fr
|
|
[middle] 1fr
|
|
[bottom];
|
|
/* template rows/columns with functions */
|
|
grid-template-columns: minmax(1em, 1fr) minmax(1em, 80ch) minmax(1em, 1fr);
|
|
/* getting really busy with named lines + functions */
|
|
grid-template-columns:
|
|
[full-start] minmax(1em, 1fr)
|
|
[main-start] minmax(1em, 80ch)
|
|
[main-end] minmax(1em, 1fr)
|
|
[full-end];
|
|
|
|
grid-template-areas:
|
|
"header header header"
|
|
"main main sidebar"
|
|
"main main sidebar2"
|
|
"footer footer footer";
|
|
|
|
/* Shorthand for grid-template-rows, grid-template-columns, and grid-template
|
|
areas. In one. This can get really crazy. */
|
|
grid-template:
|
|
[row1-start] "header header header" 25px [row1-end]
|
|
[row2-start] "footer footer footer" 25px [row2-end]
|
|
/ auto 50px auto;
|
|
|
|
/* The. Worst. This one is shorthand for like everything here smashed into one. But rarely will you actually specify EVERYTHING. */
|
|
grid:
|
|
[row1-start] "header header header" 25px [row1-end]
|
|
[row2-start] "footer footer footer" 25px [row2-end]
|
|
/ auto 50px auto;
|
|
/* simpler use case: */
|
|
grid: 200px auto / 1fr auto 1fr;
|
|
|
|
/* Okay, the the worst of it. The simpler syntaxes: */
|
|
|
|
grid-row-gap: 2em;
|
|
grid-column-gap: 1em;
|
|
/* shorthand for grid-row-gap + grid-column-gap: */
|
|
grid-gap: 2em 1em;
|
|
|
|
grid-auto-columns: 1fr;
|
|
grid-auto-rows: 1fr;
|
|
}
|
|
|
|
.container > .item {
|
|
grid-column-start: 1;
|
|
grid-column-end: 2;
|
|
grid-row-start: -2;
|
|
grid-row-end: -1;
|
|
|
|
/* shorthands for the above: */
|
|
grid-column: 1 / 2;
|
|
grid-column: main;
|
|
grid-row: -2 / span 1;
|
|
grid-row: footer;
|
|
|
|
grid-area: main;
|
|
grid-area: 1 / main-start / 3 / main-end;
|
|
}
|