CSSグリッドレイアウト（grid）に画像を配置してタイル状に表示する例

gridを使えば要素をタイル状に配置するのなんて簡単！と思っていたんですが、gridに画像を含めたときに指定した割合で表示されず悩んだので実装例をおいておきます。

※JSX + Chakra UIで書いていますがそのままHTML/CSSとして見てもらえれば

実装例

コード（JSX部分だけを抜粋）

<chakra.div
  display="grid"
  // 直感的にレイアウトが理解しやすいようgridTemplateAreasを使う
  gridTemplateAreas={`
    'a a c c c'
    'b b c c c'
    'b b d d d'
    'e f f f g'`}
  // 各行の割合（高さ）
  gridTemplateRows="1.6fr 1fr 2fr 1.4fr"
  // 各列の割合（幅）
  gridTemplateColumns="1fr 1fr 0.2fr 4fr 1fr"
  height="100vh"
  width="100vw"
  gap="12px"
  boxSizing="border-box"
  padding="12px"
>
  <chakra.img
    src="https://placedog.net/800/600?id=1"
    objectFit="cover"
    width="100%"
    height="100%"
    gridArea="a"
    overflow="hidden"
  />
  <chakra.img
    src="https://placedog.net/800/600?id=2"
    objectFit="cover"
    width="100%"
    height="100%"
    gridArea="b"
    overflow="hidden"
  />
  <chakra.img
    src="https://placedog.net/800/600?id=3"
    objectFit="cover"
    width="100%"
    height="100%"
    gridArea="c"
    overflow="hidden"
  />
  <chakra.img
    src="https://placedog.net/800/600?id=4"
    objectFit="cover"
    width="100%"
    height="100%"
    gridArea="d"
    overflow="hidden"
  />
  <chakra.img
    src="https://placedog.net/800/600?id=5"
    objectFit="cover"
    width="100%"
    height="100%"
    gridArea="e"
    overflow="hidden"
  />
  <chakra.img
    src="https://placedog.net/800/600?id=6"
    objectFit="cover"
    width="100%"
    height="100%"
    gridArea="f"
    overflow="hidden"
  />
  <chakra.img
    src="https://placedog.net/800/600?id=7"
    objectFit="cover"
    width="100%"
    height="100%"
    gridArea="g"
    overflow="hidden"
  />
</chakra.div>

悩んだこと

各imgにoverflow="hidden"を設定しているのですが、これを設定していないと指定したrowやcolumnの割合が崩れてしまうんですよね。
width/heightとobject-fit: coverだけで事足りそうなんですがうまくいかず、hiddenを設定してようやく指定したレイアウトで画像を表示することができました。