tailwind 의 layout w/ grid(inc setup)

Practice 환경 준비

어래 link의 instruction 과 같이 project 를 setup 한다 (따라하기 쉬움)

 

https://tailwindcss.com/docs/guides/nextjs  

Install Tailwind CSS with Next.js - Tailwind CSS

npx create-next-app@latest tailwind-next --typescript --eslint
cd my-project

global.css 에서 모두 지우고 아래만 추가한다

@tailwind base;

@tailwind components;

@tailwind utilities;

 

 

project 에서  default 로 만들어준  page.tsx 에 아래 작성한 heml file 을 copy 하여  tailwind css  효과를 확인할 수 있다.

 

 

Practice

ex1)  grid-cols-4  :  한줄에 4 colum씩 배치하고, 한줄이 넘어가는 것은 그 다음 줄에 배치한다.

 

 <div className="h-screen text-white Parent bg-slate-900">
    <div className="container mx-auto">
      <div className="grid grid-cols-4 gap-4">
        <div className="p-6 rounded-lg bg-sky-500">1</div>
        <div className="p-6 rounded-lg bg-sky-500">2</div>
        <div className="p-6 rounded-lg bg-sky-500">3</div>
        <div className="p-6 rounded-lg bg-sky-500">4</div>
        <div className="p-6 rounded-lg bg-sky-500">5</div>
        <div className="p-6 rounded-lg bg-sky-500">6</div>
      </div>
    </div>
  </div>

ex2)  md:grid-cols-2 lg:grid-cols-4 :  media query 에 따라 column 갯수가 4에서 2로 줄어든다. md 보다 더 줄어들면 one column 이 표시된다.

<div className="h-screen text-white Parent bg-slate-900">
    <div className="container mx-auto">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
        <div className="p-6 rounded-lg bg-sky-500">1</div>
        <div className="p-6 rounded-lg bg-sky-500">2</div>
        <div className="p-6 rounded-lg bg-sky-500">3</div>
        <div className="p-6 rounded-lg bg-sky-500">4</div>
        <div className="p-6 rounded-lg bg-sky-500">5</div>
        <div className="p-6 rounded-lg bg-sky-500">6</div>
      </div>
    </div>
  </div>

 

ex 3)  col-span-2 :  2개의 column 으로 span 된 element 를 만들어 준다

 <div className="h-screen text-white Parent bg-slate-900">
    <div className="container mx-auto">
      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div className="p-6 rounded-lg bg-sky-500">1</div>
        <div className="p-6 rounded-lg bg-sky-500">2</div>
        <div className="p-6 rounded-lg bg-sky-500">3</div>
        <div className="p-6 rounded-lg bg-red-500 col-span-2">4</div>
        <div className="p-6 rounded-lg bg-sky-500">5</div>
        <div className="p-6 rounded-lg bg-sky-500">6</div>
        <div className="p-6 rounded-lg bg-red-500 col-span-2">7</div>
      </div>
    </div>
  </div>