CSS-Grid网格布局学习心得

CSS-grid属性：

value（可选值）：

<'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'> / <'grid-template-columns'>

1、<'grid-template'>（可选值）：

none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?

2、<'grid-template-columns'>，<'grid-template-rows'>（可选值）：

none | <track-list> | <auto-track-list> | subgrid <line-name-list>?

3、<'grid-auto-columns'>，<'grid-auto-rows'>（可选值）：

<track-size>+

4、<'track-size'>（可选值）：

<'length-percentage [0,∞]'>(非负长度或百分比)，<'flex [0,∞]'>(一个非负尺寸，单位为fr)，minmax()，'max-content'，'min-content'，'auto'等

注：CSS属性符号说明：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Value_definition_syntax#double_bar