Grid 网格布局

[TOC] ## grid布局 | Class | Properties | | --- | --- | | grid-cols-1 | grid-template-columns: repeat(1, minmax(0, 1fr)); | | grid-cols-2 | grid-template-columns: repeat(2, minmax(0, 1fr)); | | grid-cols-3 | grid-template-columns: repeat(3, minmax(0, 1fr)); | |...|...| |grid-cols-12 |grid-template-columns: repeat(12, minmax(0, 1fr));| |grid-cols-none| grid-template-columns: none;| ### 实例 ``` ``` 相应式 ``` ``` ## Grid Column Start / End 用于控制在网格列中元素的大小和放置方式的功能类 | Class | Properties | | --- | --- | | col-auto | grid-column: auto; | | col-span-1 | grid-column: span 1 / span 1; | | col-span-2 | grid-column: span 2 / span 2; | |...|...| |col-span-12 | grid-column: span 12 / span 12; | | col-span-full |grid-column: 1 / -1; | |col-end-1| grid-column-end: 1;| |col-end-2| grid-column-end: 2;| |...|...| |col-end-12 |grid-column-end: 12;| |col-end-13 |grid-column-end: 13;| |col-end-auto |grid-column-end: auto;| ### 实例 ``` ``` 平移 ``` ``` ## Grid Row Start / End 用于控制在网格行中元素的大小和放置方式的功能类 | Class | Properties | | --- | --- | | row-auto | grid-row: auto; | | row-span-1 | grid-row: span 1 / span 1; | | row-span-2 | grid-row: span 2 / span 2; | |...|...| | row-span-6 | grid-row: span 6 / span 6; | | row-span-full | grid-row: 1 / -1; | | row-start-1 | grid-row-start: 1; | | row-start-2 | grid-row-start: 2; | |...|...| | row-start-7 | grid-row-start: 7; | | row-start-auto | grid-row-start: auto; | | row-end-1 | grid-row-end: 1; | | row-end-2 | grid-row-end: 2; | |...|...| | row-end-7 | grid-row-end: 7; | | row-end-auto | grid-row-end: auto; | ### 实例 跨行 ``` ```  ### Gap 用于控制网格行和列之间的间隔的功能类。 | Class | Properties | | --- | --- | | gap-0 | gap: 0px; | | gap-x-0 | column-gap: 0px; | | gap-y-0 | row-gap: 0px; | | gap-0.5 | gap: 0.125rem; | | gap-x-0.5 | column-gap: 0.125rem; | | gap-y-0.5 | row-gap: 0.125rem; |