grid layout 属性和属性值
整理自 chrome & MDN
grid-area: grid-row-start / grid-column-start /grid-row-end/ grid-column-end
/* Keyword values */grid-area: auto;grid-area: auto / auto;grid-area: auto / auto / auto;grid-area: auto / auto / auto / auto;/* <custom-ident> values */grid-area: some-grid-area;grid-area: some-grid-area / another-grid-area;/* <integer> && <custom-ident>? values */grid-area: some-grid-area 4;grid-area: some-grid-area 4 / 2 another-grid-area;/* span && [ <integer> || <custom-ident> ] values */grid-area: span 3;grid-area: span 3 / span some-grid-area;grid-area: 2 span / another-grid-area span;/* Global values */grid-area: inherit;grid-area: initial;grid-area: unset;
gird-auto-rows:
/* Keyword values */grid-auto-rows: min-content;grid-auto-rows: max-content;grid-auto-rows: auto;/* <length> values */grid-auto-rows: 100px;grid-auto-rows: 20cm;grid-auto-rows: 50vmax;/* <percentage> values */grid-auto-rows: 10%;grid-auto-rows: 33.3%;/* <flex> values */grid-auto-rows: 0.5fr;grid-auto-rows: 3fr;/* minmax() values */grid-auto-rows: minmax(100px, auto);grid-auto-rows: minmax(max-content, 2fr);grid-auto-rows: minmax(20%, 80vmax);/* multiple track-size values */grid-auto-rows: min-content max-content auto;grid-auto-rows: 100px 150px 390px;grid-auto-rows: 10% 33.3%;grid-auto-rows: 0.5fr 3fr 1fr;grid-auto-rows: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);grid-auto-rows: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);/* Global values */grid-auto-rows: inherit;grid-auto-rows: initial;grid-auto-rows: unset;
gird-auto-columns:
/* Keyword values */grid-auto-columns: min-content;grid-auto-columns: max-content;grid-auto-columns: auto;/* <length> values */grid-auto-columns: 100px;grid-auto-columns: 20cm;grid-auto-columns: 50vmax;/* <percentage> values */grid-auto-columns: 10%;grid-auto-columns: 33.3%;/* <flex> values */grid-auto-columns: 0.5fr;grid-auto-columns: 3fr;/* minmax() values */grid-auto-columns: minmax(100px, auto);grid-auto-columns: minmax(max-content, 2fr);grid-auto-columns: minmax(20%, 80vmax);/* fit-content() values */grid-auto-columns: fit-content(400px);grid-auto-columns: fit-content(5cm);grid-auto-columns: fit-content(20%);/* multiple track-size values */grid-auto-columns: min-content max-content auto;grid-auto-columns: 100px 150px 390px;grid-auto-columns: 10% 33.3%;grid-auto-columns: 0.5fr 3fr 1fr;grid-auto-columns: minmax(100px, auto) minmax(max-content, 2fr) minmax(20%, 80vmax);grid-auto-columns: 100px minmax(100px, auto) 10% 0.5fr fit-content(400px);/* Global values */grid-auto-columns: inherit;grid-auto-columns: initial;grid-auto-columns: unset;
grid-auto-flow
/* Keyword values */grid-auto-flow: row;grid-auto-flow: column;grid-auto-flow: dense;grid-auto-flow: row dense;grid-auto-flow: column dense;/* Global values */grid-auto-flow: inherit;grid-auto-flow: initial;grid-auto-flow: unset;
grid-row : grid-row-start / grid-row-end
/* Keyword values */grid-row: auto;grid-row: auto / auto;/* <custom-ident> values */grid-row: somegridarea;grid-row: somegridarea / someothergridarea;/* <integer> + <custom-ident> values */grid-row: somegridarea 4;grid-row: 4 somegridarea / 6;/* span + <integer> + <custom-ident> values */grid-row: span 3;grid-row: span somegridarea;grid-row: 5 somegridarea span;grid-row: span 3 / 6;grid-row: span somegridarea / span someothergridarea;grid-row: 5 somegridarea span / 2 span;/* Global values */grid-row: inherit;grid-row: initial;grid-row: unset;
grid-row-start
/* Keyword value */grid-row-start: auto;/* <custom-ident> values */grid-row-start: somegridarea;/* <integer> + <custom-ident> values */grid-row-start: 2;grid-row-start: somegridarea 4;/* span + <integer> + <custom-ident> values */grid-row-start: span 3;grid-row-start: span somegridarea;grid-row-start: 5 somegridarea span;/* Global values */grid-row-start: inherit;grid-row-start: initial;grid-row-start: unset;grid-row-end/* Keyword value */grid-row-end: auto;/* <custom-ident> values */grid-row-end: somegridarea;/* <integer> + <custom-ident> values */grid-row-end: 2;grid-row-end: somegridarea 4;/* span + <integer> + <custom-ident> values */grid-row-end: span 3;grid-row-end: span somegridarea;grid-row-end: 5 somegridarea span;/* Global values */grid-row-end: inherit;grid-row-end: initial;grid-row-end: unset;
grid-gap: grid-row-gap / grid-column-gap
grid-row-gap
/* <length> values */grid-row-gap: 20px;grid-row-gap: 1em;grid-row-gap: 3vmin;grid-row-gap: 0.5cm;/* <percentage> value */grid-row-gap: 10%;/* Global values */grid-row-gap: inherit;grid-row-gap: initial;grid-row-gap: unset;
grid-column: grid-column-start / grid-column-end
grid-column-start
/* Keyword value */grid-column-start: auto;/* <custom-ident> value */grid-column-start: somegridarea;/* <integer> + <custom-ident> values */grid-column-start: 2;grid-column-start: somegridarea 4;/* span + <integer> + <custom-ident> values */grid-column-start: span 3;grid-column-start: span somegridarea;grid-column-start: 5 somegridarea span;/* Global values */grid-column-start: inherit;grid-column-start: initial;grid-column-start: unset;
grid-column-end
/* Keyword value */grid-column-end: auto;/* <custom-ident> values */grid-column-end: somegridarea;/* <integer> + <custom-ident> values */grid-column-end: 2;grid-column-end: somegridarea 4;/* span + <integer> + <custom-ident> values */grid-column-end: span 3;grid-column-end: span somegridarea;grid-column-end: 5 somegridarea span;/* Global values */grid-column-end: inherit;grid-column-end: initial;grid-column-end: unset;
grid-column-gap
/* <length> values */grid-column-gap: 20px;grid-column-gap: 1em;grid-column-gap: 3vmin;grid-column-gap: 0.5cm;/* <percentage> value */grid-column-gap: 10%;/* Global values */grid-column-gap: inherit;grid-column-gap: initial;grid-column-gap: unset;
grid-template: grid-template-rows / grid-template-columns / template-areas
/* Keyword value */grid-template: none;/* grid-template-rows / grid-template-columns values */grid-template: 100px 1fr / 50px 1fr;grid-template: auto 1fr / auto 1fr auto;grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;grid-template: fit-content(100px) / fit-content(40%);/* grid-template-areas grid-template-rows / grid-template-column values */grid-template: "a a a"
               "b b b";grid-template: "a a a" 20%
               "b b b" auto;grid-template: [header-top] "a a a"     [header-bottom]
                 [main-top] "b b b" 1fr [main-bottom]
                            / auto 1fr auto;/* Global values */grid-template: inherit;grid-template: initial;grid-template: unset;
grid-template-rows
/* Keyword value */grid-template-rows: none;/* <track-list> values */grid-template-rows: 100px 1fr;grid-template-rows: [linename] 100px;grid-template-rows: [linename1] 100px [linename2 linename3];grid-template-rows: minmax(100px, 1fr);grid-template-rows: fit-content(40%);grid-template-rows: repeat(3, 200px);/* <auto-track-list> values */grid-template-rows: 200px repeat(auto-fill, 100px) 300px;grid-template-rows: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;grid-template-rows: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;grid-template-rows: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];/* Global values */grid-template-rows: inherit;grid-template-rows: initial;grid-template-rows: unset;
grid-template-columns
/* Keyword value */grid-template-columns: none;/* <track-list> values */grid-template-columns: 100px 1fr;grid-template-columns: [linename] 100px;grid-template-columns: [linename1] 100px [linename2 linename3];grid-template-columns: minmax(100px, 1fr);grid-template-columns: fit-content(40%);grid-template-columns: repeat(3, 200px);/* <auto-track-list> values */grid-template-columns: 200px repeat(auto-fill, 100px) 300px;grid-template-columns: minmax(100px, max-content)
                       repeat(auto-fill, 200px) 20%;grid-template-columns: [linename1] 100px [linename2]
                       repeat(auto-fit, [linename3 linename4] 300px)
                       100px;grid-template-columns: [linename1 linename2] 100px
                       repeat(auto-fit, [linename1] 300px) [linename3];/* Global values */grid-template-columns: inherit;grid-template-columns: initial;grid-template-columns: unset;
grid-template-areas
/* Keyword value */grid-template-areas: none;/* <string> values */grid-template-areas: "a b";grid-template-areas: "a b b"
                     "a c d";/* Global values */grid-template-areas: inherit;grid-template-areas: initial;grid-template-areas: unset;

grid_layout.md