Grid、GridItem

熟悉 CSS gird 屬性，應該會熟知 display grid 屬性，不過語法較為複雜，Chakra UI 提供許多簡略的方式，我會介紹我常使用的。Grid 裡要搭配使用 GridItem。

Template columns
是原本 css grid-template-columns 語法，用來規劃網格線
在排版上會經常使用 templateColumns 規劃好有幾欄，gap 來安排 grid 之間的空間

<Grid templateColumns='repeat(3, 1fr)' gap="24px">
  <GridItem w='100%' h='10' bg='blue.500' />
  <GridItem w='100%' h='10' bg='blue.500' />
  <GridItem w='100%' h='10' bg='blue.500' />
</Grid>

搭配 RWD 的語法來改變不同螢幕尺寸 templateColumns 就可以完成 RWD 變化

<Grid templateColumns={{base:'repeat(1, 1fr)',lg:'repeat(3, 1fr)'}} gap="24px">
  <GridItem w='100%' h='10' bg='blue.500' />
  <GridItem w='100%' h='10' bg='blue.500' />
  <GridItem w='100%' h='10' bg='blue.500' />
</Grid>

SimpleGrid

一樣是 Gird 的性質但簡化的許多，更方便使用。
規劃欄位不用再使用 templateColumns 較為複雜語法，直接使用簡化後的 column 便可指定欄位數量。
children 的搭配也可以直接使用任意的像是Flex、Box 等

<SimpleGrid columns={3} spacing="24px">
  <Box bg='tomato' height='80px'></Box>
  <Box bg='tomato' height='80px'></Box>
  <Box bg='tomato' height='80px'></Box>
</SimpleGrid>

spacingX、spacingY
SimpleGrid 除了 space 可以來安排 grid 間距外，另外可以使用 spacingX、spacingY 來分別規劃水平間距和垂直間距。

Auto-responsive
CSS Grid 語法 auto-fit、minmax() 可以達成自動的響應式。
而在 SimpleGrid 讓我可以更簡單寫下子元素最小寬度就可以達成一樣的效果 minChildWidth

<SimpleGrid minChildWidth='300px' spacing='40px'>
  <Box bg='tomato' height='80px'></Box>
  <Box bg='tomato' height='80px'></Box>
  <Box bg='tomato' height='80px'></Box>
</SimpleGrid>

Box 的排列會是盡量最多欄，但會保持在不小於 300 大小的最多的排列方式。當螢幕變小而導致無法維持 300px 時，便會變更排列的欄數。