tailwind 의 layout w/ grid

note1) col-start-2 col-end-3 을 이용하여 multi column 을 span 하게 할 수 있다.

<div className="h-screen text-white Parent bg-slate-900">
    <div className="container mx-auto">
      <div className="grid grid-cols-6 gap-4">
        <div className="p-6 rounded-lg bg-sky-500 col-start-2 col-span-4 ...">01</div>
        <div className="p-6 rounded-lg bg-sky-500 col-start-1 col-end-3 ...">02</div>
        <div className="p-6 rounded-lg bg-sky-500 col-end-7 col-span-2 ...">03</div>
        <div className="p-6 rounded-lg bg-sky-500 col-start-1 col-end-7 ...">04</div>
      </div>
    </div>
  </div>

 

note2)  grid-flow-col 은 가로 방향으로 우선 grid 가 채워지는 방식임

 <div className="h-screen text-white Parent bg-slate-900">
    <div className="container mx-auto">
      <div className="grid grid-flow-col auto-cols-max">
        <div className="p-6 rounded-lg bg-sky-500">01</div>
        <div className="p-6 rounded-lg bg-sky-500">02</div>
        <div className="p-6 rounded-lg bg-sky-500">03</div>
      </div>
    </div>
  </div>

 

note3)  auto-cols-max content size 에 따라  column with 가 조절이 된다 column 이 많으면 wrop 이 되지 않고 scroll bar가 만들어 지면서 옆으로 붙는다  grid-flow-col : element 를 옆으로 차례로 붙인다

    <div className="grid grid-flow-col auto-cols-max bg-slate-900">
      <div className="p-6 rounded-lg bg-sky-500">first item</div>
      <div className="p-6 rounded-lg bg-sky-500">02</div>
      <div className="p-6 rounded-lg bg-sky-500">03</div>
      <div className="p-6 rounded-lg bg-sky-500">04</div>
      <div className="p-6 rounded-lg bg-sky-500">05</div>
      <div className="p-6 rounded-lg bg-sky-500">06</div>
      <div className="p-6 rounded-lg bg-sky-500">07</div>
      <div className="p-6 rounded-lg bg-sky-500">08</div>
      <div className="p-6 rounded-lg bg-sky-500">09</div>
      <div className="p-6 rounded-lg bg-sky-500">10</div>
      <div className="p-6 rounded-lg bg-sky-500">11</div>
      <div className="p-6 rounded-lg bg-sky-500">12</div>
      <div className="p-6 rounded-lg bg-sky-500">13</div>
      <div className="p-6 rounded-lg bg-sky-500">14</div>
      <div className="p-6 rounded-lg bg-sky-500">15</div>
      <div className="p-6 rounded-lg bg-sky-500">16</div>
      <div className="p-6 rounded-lg bg-sky-500">17</div>
    </div>

 

note4) grid-rows-4  vertical 방향으로 4 item 을 먼저 채우고 다음 column 으로 넘어간다. grid-flow-col 은 4 row 가 모두 채워 졌을 때  다음 column 으로  가리는 의미이므로 없으면 않된다.

    <div className="grid grid-rows-4 grid-flow-col gap-4 bg-slate-900">
      <div className="p-6 rounded-lg bg-sky-500">01</div>
      <div className="p-6 rounded-lg bg-sky-500">02</div>
      <div className="p-6 rounded-lg bg-sky-500">03</div>
      <div className="p-6 rounded-lg bg-sky-500">04</div>
      <div className="p-6 rounded-lg bg-sky-500">05</div>
      <div className="p-6 rounded-lg bg-sky-500">06</div>
      <div className="p-6 rounded-lg bg-sky-500">07</div>
      <div className="p-6 rounded-lg bg-sky-500">08</div>
      <div className="p-6 rounded-lg bg-sky-500">09</div>
    </div>

 

note5) col-span-2 은 two column 을 spanning 하는 것임 .  column 이 모두 차면 grid-flow-row-dense 에 따라 다음 row 로 넘어간다.

    <div className="grid grid-flow-row-dense grid-rows-3 grid-cols-3 gap-4 bg-slate-900">
      <div className="col-span-2 p-6 rounded-lg bg-sky-500">01</div>
      <div className="p-6 rounded-lg bg-sky-500">02</div>
      <div className="p-6 rounded-lg bg-sky-500">03</div>
      <div className="p-6 rounded-lg bg-sky-500">04</div>
      <div className="col-span-2 p-6 rounded-lg bg-sky-500">05</div>
    </div>

 

note) row 로 채워가면서 빈 column이 있으면  빈곳을 채우면서 간다.

    <div className="h-screen text-white Parent bg-slate-900">
      <div className="container mx-auto">
        <div className="grid grid-flow-row-dense grid-cols-3 grid-rows-3 gap-4 bg-slate-900">
          <div className="col-span-2 p-6 rounded-lg bg-sky-500">01</div>
          <div className="col-span-2 p-6 rounded-lg bg-sky-500">02</div>
          <div className="p-6 rounded-lg bg-sky-500">03</div>
          <div className="p-6 rounded-lg bg-sky-500">04</div>
          <div className="p-6 rounded-lg bg-sky-500">05</div>
          <div className="col-span-2 p-6 rounded-lg bg-sky-500">06</div>
          <div className="p-6 rounded-lg bg-sky-500">07</div>
          <div className="p-6 rounded-lg bg-sky-500">08</div>
          <div className="p-6 rounded-lg bg-sky-500">09</div>
          <div className="col-span-2 p-6 rounded-lg bg-sky-500">10</div>
          <div className="p-6 rounded-lg bg-sky-500">11</div>
          <div className="p-6 rounded-lg bg-sky-500">12</div>
        </div>
      </div>
    </div>