【React】Chakra-UIのGridで要素の位置を揃える

はじめに

ヘッダーに配置した文字列と、コンテンツに配置した要素の位置を揃えたいです。

これを

こうしたい

flexではなくgridを使う

修正前のコード

  return (
    <Box bg="#95BFEA" height="50px" display="flex" alignItems="center">
        <Flex align="center" justify="space-between" width="100%" marginX="auto">
        <Text textAlign="center" flex="1">{title}</Text>
        {showSettingIcon && <Icon mr="4px" as={SettingsIcon} boxSize={6} />}
        </Flex>
    </Box>
  )

文字列とアイコンをflexで横並びにしているだけです。
この状態で文字列を中央寄せにしても、
画面の横幅からアイコンを除いたスペースに対して中央寄せになるので、コンテンツの文字列やアイコンと位置がずれてしまいます。

そのため、flexではなくgridを用いて文字列やアイコンの配置を細かく決めてあげます。

• Gridタグで全体のサイズを指定
• gridに割り当てる要素はGridItemタグで囲み、割り当てる縦横のスペースをrowSpan/colSpanで指定

今回は全体のサイズを12にし、
左配置用のアイコン：文字列：右配置用のアイコンを4:4:4で割り当てます。

修正後のコード

(戻るアイコンやメールアイコンなども追加していますが、気にしないでください)

  return (
    <Box bg="#95BFEA" height="50px" display="flex" alignItems="center">
      <Grid
        w='100%'
        templateColumns='repeat(12, 1fr)'
        gap={4}
      >
        <GridItem rowSpan={1} colSpan={4} >
          {showBackIcon && <Icon as={ArrowBackIcon} boxSize={6} onClick={handleBackIconClick} />}
        </GridItem>
        <GridItem colSpan={4} >
          <Text textAlign="center" >{title}</Text>
        </GridItem>
        <GridItem colSpan={4} >
        <Box w="100%" display="flex" justifyContent="end">
          {showSettingIcon && <Icon mr="4px" as={SettingsIcon} boxSize={6} />}
          {showEmailIcon && <Icon mr="4px" as={EmailIcon} boxSize={6} onClick={handleEmailIconClick}/>}
          </Box>
        </GridItem>
      </Grid>
    </Box>
  )

よしなにできました！

おわりに

かゆいところに手が届くと気持ちがいいです。