CSS

[CSS] 구글링 안하려고 정리하는 그리드(grid) 레이아웃

ejunyang 2024. 8. 19. 17:55

 

flex로 대부분 다 해결이되어서 잘 사용하지 않아 해도해도 적응 안되는 grid.. 최종 프로젝트를 진행하면서 grid 공부를 많이 했다. 여러 포스팅 글과 MDN을 참고해서 포스팅해보려고한다! 구글링하지 않도록 여기에 최대한 모든 정보를 담아놔야지

 

 

CSS 그리드 레이아웃

그리드 레이아웃은 가로와 세로 두 방향의 2차원 레이아웃 시스템이다. flex는 1차원 레이아웃 시스템으로 차이점이 있다.

flex보다는 더 복합적인 레이아웃 디자인이 가능하다는 장점이 있고, MDN에 따르면 페이지에서 페이지로 이동할 때 요소가 널뛰거나 너비가 바뀌지 않는 디자인 생성에 도움을 주어 웹 사이트의 일관성을 높여준다는 장점이 있다고 한다.

 

크롬 개발자 도구에서 grid를 명확하게 보여주는 기능이 생겼다고한다! 이번 프로젝트 때 아주 잘 활용했다

 

 

 

CSS 그리드 생성

부모요소 👉🏻 그리드 컨테이너로 감싸고 있어야한다. 부모요소에 grid 속성을 주면 컨테이너는 그리드의 영향을 받는 전체의 영역이 된다.

자식요소 👉🏻 그리드 아이템들은 그리드 속성에 따라 자유롭게 배치된다.

 

 

 

CSS 그리드 용어

 

container 
gird 속성을 적용하는 부모 요소. grid 속성이 영향을 미치는 전체 영역이다.
item
컨테이너의 자식 요소들. 아이템들이 Grid 규칙에 의해 배치
cell
grid의 한칸
gap
셀 사이의 간격
column
행
row
열
line
그리드를 그리는 가로 세로의 선
area
그리드 유닛이 묶인 영역으로 고유한 식별자를 가지며, 식별자를 통해 요소를 배치
track
그리드 라인 사이의 행 또는 열

 

 

 

CSS 그리드 형태 정의

컨테이너에 Grid 트랙의 크기들을 지정해주는 속성이다.

grid-template-columns

grid-template-columns: 200px 200px 500px
grid-template-columns: 1fr 1fr 1fr 
grid-template-columns: repeat(3, 1fr) 
grid-template-columns: 200px 1fr 
grid-template-columns: 100px 200px auto

 

 

grid-template-rows

grid-template-rows: 200px 200px 500px
grid-template-rows: 1fr 1fr 1fr 
grid-template-rows: repeat(3, 1fr) 
grid-template-rows: 200px 1fr
grid-template-rows: 100px 200px auto

 

Tailwind CSS

/* col */
grid-cols-1	grid-template-columns: repeat(1, minmax(0, 1fr));
grid-cols-2	grid-template-columns: repeat(2, minmax(0, 1fr));
grid-cols-3	grid-template-columns: repeat(3, minmax(0, 1fr));
grid-cols-4	grid-template-columns: repeat(4, minmax(0, 1fr));
grid-cols-5	grid-template-columns: repeat(5, minmax(0, 1fr));


/* row */
grid-rows-1	grid-template-rows: repeat(1, minmax(0, 1fr));
grid-rows-2	grid-template-rows: repeat(2, minmax(0, 1fr));
grid-rows-3	grid-template-rows: repeat(3, minmax(0, 1fr));
grid-rows-4	grid-template-rows: repeat(4, minmax(0, 1fr));
grid-rows-5	grid-template-rows: repeat(5, minmax(0, 1fr));

 

grid-template-columns: repeat(3, 1fr)

repeat(반복횟수, 반복값)

grid-template-columns: 1fr 1fr 1fr 이 코드와 같은 뜻이다.

 

grid-template-columns: 1fr 1fr 1fr은 아래와 같다. fr은 fraction이라고하는데 잘모르겠다. 똑같은 비율로 주고싶을 때 이렇게 사용하면된다. 1:1:1 비율의 컬럼 3개라는 뜻. 여기서 위 코드를 더욱 간단하게 만들 수 있다.

 

 

auto-fill / auto-fit

auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.

 

최소 너비는 20%로 지정, 그 이상일 경우 auto

auto-fill의 크기를 20%로 설정했으므로, 1개의 row에는 5개의 셀이 들어간다.

grid-template-columns: repeat(auto-fill, minmax(20%, auto));

 

auto-fill인 경우 row에 셀이 5개보다 적으면 공간을 남기고, auto-fit은 빈 공간을 모두 채운다는 차이점이 있다.

 

 

 

CSS 그리드 간격 Gap

Tailwind CSS

gap-0	    gap: 0px;
gap-x-0	    column-gap: 0px;
gap-y-0	    row-gap: 0px;
gap-px	    gap: 1px;
gap-x-px    column-gap: 1px;
gap-y-px    row-gap: 1px;
gap-0.5	    gap: 0.125rem; /* 2px */
gap-x-0.5   column-gap: 0.125rem; /* 2px */
gap-y-0.5   row-gap: 0.125rem; /* 2px */
gap-1	    gap: 0.25rem; /* 4px */
gap-x-1	    column-gap: 0.25rem; /* 4px */
gap-y-1	    row-gap: 0.25rem; /* 4px */

 

 

셀 영역 지정

  • grid-column-start
  • grid-column-end
  • grid-column
  • grid-row-start
  • grid-row-end
  • grid-row

Grid 아이템에 적용하는 속성으로, 각 셀의 영역을 지정

 

Tailwind CSS

col-start-1	grid-column-start: 1;
col-start-2	grid-column-start: 2;
col-start-3	grid-column-start: 3;
col-start-4	grid-column-start: 4;
col-start-5	grid-column-start: 5;

col-end-1	grid-column-end: 1;
col-end-2	grid-column-end: 2;
col-end-3	grid-column-end: 3;
col-end-4	grid-column-end: 4;
col-end-5	grid-column-end: 5;

col-auto	grid-column: auto;
col-span-1	grid-column: span 1 / span 1;
col-span-2	grid-column: span 2 / span 2;
col-span-3	grid-column: span 3 / span 3;
col-span-4	grid-column: span 4 / span 4;
col-span-5	grid-column: span 5 / span 5;

 

 

item  부터 보면 컬럼 그리드 라인 1부터 2까지 차지하고, 로우 1부터 5까지 차지해서 해당 컨테이너에서 왼쪽에 배치할 수 있다.

item  는 컬럼 2부터 5까지, 로우 4부터 5까지 차지해서 우측 아래 배치할 수 있다.

item  는 컬럼 3부터 5까지, 로우 2부터 4까지 차지해서 우측 중간에 배치할 수 있다.