FlexとGridのContainerが広がって伸びる

下記コードでは、左側(①)が伸びてしまっている

https://gyazo.com/7f0880657b002c1bc016b8a1d5fd0dcc

code:tsx

export default function App() {

return (

<div className="grid grid-cols-2 gap-2 h-64 bg-green-200">

{/* ① */}

<div className="grid">

<Child />

</div>

{/* ② */}

<div className="grid">

<div> // divを挟むことで伸びるのを防止

<Child />

</div>

</div>

</div>

);

}

const Child: React.FC = () => (

<div className="grid gap-2 bg-blue-200">

<div className="bg-red-100 h-16">aaa</div>

<div className="bg-red-100 h-16">bbb</div>

<div className="bg-red-100 h-16">ccc</div>

</div>

);

ボトムアップにコードを見ていくと

これをGridを使った親の中で使ったときに、①のように直接置くと伸びてしまう

②のようにdivを挟むと伸びるのを止められる

こういう挙動になるのは当然のこと

Childの高さを誰が指定するかという話

①の場合は、親であるGrid Containerからレイアウトの指示を受けるため、親のGrid Containerに合わせて伸びている

②の場合は、誰もheightを指定していないので、autoの挙動になる

②のようなハックが必要になる状況を考えると

上のコード例では表現できてないが、親目線ではレイアウトを指定するためにgridを指定している

本来の目的としては、レイアウトを指定しつつ、伸びないようにしたい、というもの

Child内のアイテムにheightを指定している場合、伸びるとgapが無視されてしまう

他の解決策

たぶんこれがただしい

items-start

code:tsx

<div className="grid items-start">

<Child />

</div>

これも微妙ではある

いや、挙動が謎だな

例示のコードがおかしいか

gridにheight指定することないし

divを増やすのは変な気がするが、いまいち他の解決策がわからんな