[CSS] grid 그리드 배우기

*grid와 flex 차이점

flexbox는 한 방향 레이아웃 시스템(1차원)

grid는 두 방향 레이아웃 시스템(2차원)

-> grid는 flexbox보다 더 복합적인 레이아웃 표현이 가능!

 

 

 

그리드 사용

display

 

grid 레이아웃을 위한 html의 기본 구조는 container(부모)와 item(자식)으로 이루어져 있음.

flex와 마찬가지로 container에 display : grid; 를 입력해줌으로 시작!

 

.container {
  display: grid;
}

 

 

 

그리드 형태 정의

>각 row (행) 높이  / column (열) 넓이 지정하기

 

.container {
	grid-template-columns: 200px 200px 500px;
	grid-template-columns: 1fr 1fr 1fr; /* 균일하게 1:1:1 비율인 3개의 row를 만든다. */
	grid-template-columns: repeat(3, 1fr); /* 1fr 1fr 1fr */
	grid-template-columns: 200px 1fr;
	grid-template-columns: 100px 200px auto;
}

- grid-template-rows는 행(row)의 배치

- grid-template-column는 열(column)의 배치

(+ fr = fration, 숫자 비율대로 트랙의 크기를 나눔)

 

 

 

repeat 함수

.container {
	grid-template-columns: repeat(5, 1fr);
	/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
}

repeat는 반복되는 값을 자동으로 처리할 수 있는 함수

repeat(반복횟수, 반복값)

 

 

 

minmax 함수

column,row의 최소 / 최대 크기를 지정합니다.

minmax(100px, auto)의 의미는 최소한 100px, 최대는 자동으로(auto) 늘어나게 입니다.

(+ 최소한 높이 100px은 확보하고, 내용이 많아 100px이 넘어가면 알아아서 늘어나도록 처리한 예)

 

 

 

auto-fill과 auto-fit

column,row의 개수를 컨테이너에 맞게 자동적으로 조절해 줍니다. 따라서 쉽게 반응형을 만들 수 있습니다.

repeat() 함수와 minmax() 함수와 궁합이 잘 맞아요.

 

auto-fill 먼저 살펴볼게요.

.container {
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

 

화면 크기를 조절하면 컨테이너 너비에 따라 아이템이 자동 줄바꿈 되는 걸 볼 수 있어요.

 

 

auto-fill과 auto-fit의 차이점은

container가 하나의 track(행,열)에 모든 아이템을 수용하고 남는 공간이 있을 때 발생함.

fill은 남는 공간(빈 track)을 그대로 유지하고, fit은 남은 공간을 축소하는 것.

grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

 

grid-template-columns: repeat(auto-fit, minmax(120px,1fr));

 

 

 

 

그리드 간격 정의

 

row-gap

column-gap

gap

 

그리드 셀 사이의 간격을 설정합니다.

.container {
    row-gap: 10px; /* row의 간격을 10px로 */
    column-gap: 20px; /* column의 간격을 20px로 */
    gap : 10px 20px; /* row-gap: 10px; column-gap: 20px; */
    gap : 20px; /* row-gap: 20px; column-gap: 20px; */
}

 

 

 

 

그리드 내 아이템 배치하기

이 속성들은 Grid 아이템에 적용하는 속성으로, 각 셀의 영역을 지정합니다.

 

grid-column-start

grid-column-end

grid-column (위 두 속성 축약형)

grid-row-start

grid-row-end

grid-row (위 두 속성 축약형)

 

.item:nth-child(1) {
    grid-column-start : 1;
    grid-column-end : 4;
}

.item:nth-child(1) {
    grid-column: 1 / 4;
}

첫번째 아이템에 그리드 라인(Grid Line)의 1에서 시작하여 4에서 끝나도록 설정했습니다.

위 두 코드는 같은 영역을 지정합니다.(나오는 결과값이 같아요.)

 

 

그 외에 몇 개의 셀을 차지하게 할 것인지 지정해 줄 수도 있어요!

.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.item1 {
    /* 1번 라인에서 2칸 */
    grid-column: span 2;
}
    
.item6 {
    /* 1번 라인에서 3칸 */
    grid-column: span 3;
}

 

 

 

grid-area

grid-area를 써서 column과 row 모두 한 번에 지정하는 것도 가능합니다. 총 4개의 값이 들어가며,

순서대로 (grid-row-start / grid-column-start / grid-row-end / grid-column-end)를 지정

 

.item:nth-child(6){
    grid-area: 1 / 2 / 4 / 4;
 }

 

 

영역 이름으로 grid 정의

grid-area

grid-column-areas

 

각 area에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법(아주 직관적)

.container {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"footer footer footer";
}

위의 형태로 각자 차지하는 셀의 개수만큼 해당 위치에 이름을 써주면 됩니다.

header 와 footer는 세 개의 column을 차지하니 3번 쓴 것.

 

각 영역의 이름은 어떻게 매칭할까요?

해당 아이템 요소에 grid-area 속성으로 이름을 정해주면 됩니다!

.header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
.footer { grid-area: footer; }

결과값

 

 

 

그리드 형태를 자동으로 정의

grid-auto-column

grid-auto-rows

 

세팅해둔 그리드 행보다 더 많은 데이터를 불러 올 경우 사용
row 개수가 3개 x - > row 개수가 많아 셀 수 가 없을 때

.container {
  grid-auto-rows: minmax(150px, auto);
}

grid-auto-rows를 쓰면 횟수를 지정해서 반복할 필요 없이 알아서 처리됩니다!

 

 

 

 

자동배치

grid-auto-flow

 

아이템이 자동 배치되는 흐름을 결정하는 속성

.container {
	grid-auto-flow: row;
}

grid-auto-flow: row방향

 

.container {
	grid-auto-flow: column;
}

grid-auto-flow: column방향

grid-auto-flow가 row와 column 따라 기준이 달라지는 걸 볼 수 있습니다.

 

 

 

 

그리드 정렬

/* container에 적용함 */

place-items : align-items justify-items

place-items는 align-items(세로축)와 justify-items(가로축)를 같이 쓸 수 있는 단축 속성

속성 중에 stretch는 기본값입니다.

 

먼저, align-items 부터 살펴볼까요?

.container {
	align-items: stretch;
	/* align-items: start; */
	/* align-items: center; */
	/* align-items: end; */
}

(왼쪽)align-items: center 와 (오른쪽) end 적용한 예시

align-items는 지정한 그리드내에서 item들이 세로축기준으로 정렬됩니다.

마찬가지로 justify-items는 가로축방향으로 item들이 정렬됩니다.

.container {
	justify-items: stretch;
	/* justify-items: start; */
	/* justify-items: center; */
	/* justify-items: end; */
}

(왼쪽)justify-items: start 와 (오른쪽) center 적용한 예시

 

단축속성의 순서는 align-items, justify-items 순서로 작성하고, 하나의 값만 쓰면 두 속성 모두에게 적용됩니다.

.container {
	place-items: center start; /* align-items justify-items*/
}

 

 

 

 

그리드 아이템그룹 정렬

/* container에 적용함 */

place-content : align-content와 justify-content

place-content는 align-content(세로축)와 justify-content(가로축)를 같이 쓸 수 있는 단축 속성

.container {
	place-content: space-between center;
}

 

 

 

1. 아이템 그룹 세로 정렬 : align-content

Grid 아이템들의 너비를 모두 합한 값이 Grid 컨테이너의 너비보다 작을 때 Grid 아이템들을 통째로 정렬합니다.

.container {
	align-content: stretch;
	/* align-content: start; */
	/* align-content: center; */
	/* align-content: end; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
}

(왼쪽)center (가운데)end (오른쪽)space-around 적용한 예시

(왼쪽)space-between (가운데)space-evenly (오른쪽)start 적용한 예시

 

 

 

2. 아이템 그룹 가로 정렬 : justify-content

Grid 아이템들의 너비를 모두 합한 값이 Grid 컨테이너의 너비보다 작을 때 Grid 아이템들을 통째로 정렬합니다.

.container {
	justify-content: stretch;
	/* justify-content: start; */
	/* justify-content: center; */
	/* justify-content: end; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

(왼쪽)start (가운데)center (오른쪽)end 적용한 예시

 

(왼쪽)space-between (가운데)space-around (오른쪽)space-evenly 적용한 예시

 

 

 

 

개별 아이템 정렬

/* item들에 적용함 */

 

* align-self

개별 아이템 세로 정렬

- stretch(defalut), start, center, end

​

* justify-self

​개별 아이템 가로 정렬

- stretch(defalut), start, center, end

​

* place-self

위 두 속성을 함께 쓸 수 있는 shorthand key

 

 

 

 

배치순서 : order

각 아이템들의 나열 순서를 결정 (단순히 '시각적' 순서이며, html 자체 구조를 바꾸는 것은 x)

숫자가 작을 수록 먼저 배치됨

.item:nth-child(1) { order: 3; }
.item:nth-child(2) { order: 1; }
.item:nth-child(3) { order: 2; }