[Tailwindcss] grid-row-숫자 분석

메인 페이지를 만들긴 했는데 생각해보니 레이아웃 구분이 안되어있었다.. 그래서 부랴부랴 검색해서 레이아웃 구분하려고 하는데 엄청 애를 먹었다..

<div className="grid grid-rows-3 grid-col-12">
    <header className="row-span-3 col-span-12">
    </header>
    
    <main className="row-span-3 col-span-12">
    </main>
    
    <footer className="row-span-3 col-span-12">
	</footer>
</div>

완벽히 완성한건 아니지만.. 대충 이렇다

gird-col-12 는 완벽히 이해했다 하지만 grid-rows-3 는 대체 어떻게 써먹는지 모르겠다..

 

[grid-rows-숫자]에 관한 나의 생각

 

<div class="grid grid-rows-3 grid-flow-col gap-4">
  <div class="row-span-3 ...">01</div>
  <div class="col-span-2 ...">02</div>
  <div class="row-span-2 col-span-2 ...">03</div>
</div>

 

col이 1개의 열을 뜻한다면 row는 1개의 행을 뜻하는 것이겠지 당연히?

그렇다면 grid-rows-3은 1개의 row의 크기가 3으로 정의한다는 뜻 같다. row-span-2 에 해당하는 03 부분이 옆의 01부분에 비해서 약간 작게 한 행을 먹은 것을 보고 그렇게 생각하게 됐다

맞겠지..? (아니면 태클 걸어주세요..)

일단 여기까지 정리!

기초가 부족해서 모르는게 투성이다 더 공부해야지..

 

사진,코드 출처 : https://tailwindcss.com/docs/grid-row