Open2022/12/30にコメント追加1

tailwind CSSの困りごと

Tailwind CSS

daisyUI

haru256 2022/12/30に更新

contentsをgrid上に並べたい。windowサイズに応じて柔軟に列数を変化させたい

前提

container をdefaultにcenteringしている状況

やること

containerで最大幅を確定させる(max-w-screen-...)。これが最大の列幅となる。
flex flex-wrap justify-center でflex-wrapで列幅いっぱいに並べて、wrapさせる

<div className="container max-w-screen-xl">
   <div className="flex flex-col content-center items-center self-center">
      <div className="mb-5 mt-14 flex ">
         <button
            className="btn text-3xl font-bold"
            onClick={onClick}
         >
         HOGE
         </button>
      </div>
      <div className="flex flex-wrap justify-center gap-12">
         <!-- UserCardコンポーネント(`div`)をいっぱい配置 -->
         {users.map((user: any) => (
         <UserCard key={user.id} name={user.name} avatar={user.avatar} />
         ))}
      </div>
   </div>
</div>

注意

今の感じだと、コンテンツ数が列数で割り切れない場合は以下のように、左に整列しない