【Tailwind CSS】mapで配列を展開した際に、子コンポーネントでGridで並べる際の注意点 【Next.js】

Next.jsでTailwind CSSのGrid Systemを利用し、SPではgrid-cols-1, PCではgrid-cols-3にしたかったが、PC/SP両方ともgrid-cols-1でCSSが効かずに、色々と試したいた所、原因が判明した為備忘録として残す。

https://tailwindcss.com/docs/display#grid

こう並べたい

こうなってしまう

*Next, TailwindCSSはlatest version.

＜改善前＞

*コードは簡略化しています

親

return (
  <>
    {posts.map((post) => (
      <Post
       key={...}
       caption={...}
       name={...}
      />
    )}
  </>
)

子

return (
  <div className="grid grid-cols-1 lg:grid-cols-3">
   <p>{caption}</p>
   <p>{name}</p>
  </div>
)

このようにすると、PCではgrid-cols-3が動作せず、縦に一列(=cols-1)で表示されてしまっていた。
これではSP画面ではよいがPCでは見栄えが悪いし意図していないデザインになる。

＜改善後＞

親

return (
+ <div className="grid grid-cols-1 lg:grid-cols-3">
   {posts.map((post) => (
      <Post
　　　　　　　　　　　　　　　key={...}
       　caption={...}
       　　name={...}
       />
    ))}
  </div>
)

子

return (
  <>
   <p>{caption}</p>
   <p>{name}</p>
  </>
)

grid, grid-cols...を、親の方でmapの外で指定することにより、意図しているデザイン(=PCでは横に３列、SPでは1列)で表示することができた。

よく考えると、gridシステムなので、配列の外でgrid指定しないと正常に動作しない。

今回、子の方の指定方法が誤っていると考えていて時間がかかってしまったので、次回以降は親と子両方を疑って指定する。