[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;| ### 實例 ``` <div class="grid grid-cols-3 gap-4"> <div>1</div> <!-- ... --> <div>9</div> </div> ``` 相應式 ``` <div class="grid grid-cols-1 md:grid-cols-6"> <!-- ... --> </div> ``` ## 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;| ### 實例 ``` <div class="grid grid-cols-3 gap-4"> <div class="...">1</div> <div class="...">2</div> <div class="...">3</div> <div class="col-span-2 ...">4</div> <div class="...">5</div> <div class="...">6</div> <div class="col-span-2 ...">7</div> </div> ``` 平移 ``` <div class="grid grid-cols-6 gap-4"> <div class="col-start-2 col-span-4 ...">1</div> <div class="col-start-1 col-end-3 ...">2</div> <div class="col-end-7 col-span-2 ...">3</div> <div class="col-start-1 col-end-7 ...">4</div> </div> ``` ## 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; | ### 實例 跨行 ``` <div class="grid grid-rows-3 grid-flow-col gap-4"> <div class="row-span-3 ...">1</div> <div class="col-span-2 ...">2</div> <div class="row-span-2 col-span-2 ...">3</div> </div> ```  ### 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; |