[CSS] Grid

그리드^^

https://studiomeal.com/archives/533 블로그가 본 글을 작성하는 데 큰 도움(거의 100의 지분)이 되었음

flex와 마찬가지로 우선 큰 박스가 하나 필요하다.

.container {
	display: grid;
}   

column과 row 설정

몇 줄씩?

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
}

• 1fr 는 같은 비율로 1fr의 개수만큼 칸을 형성한다.
  repeat(3, 1fr) 와 동일함
• 200px 1fr 1fr : 맨 왼쪽 칼럼은 200px 유지, 나머지 화면은 1대1로 사이좋게 두 개의 칼럼으로 나눔

minmax 함수

.container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(100px, auto));
}

• row 를 세 줄로 나눌 건데, 아무리 내용이 적어도 최소 100px, 내용이 늘어나면 알아서 커져라.

auto-fill, auto-fit

개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채움.
후에 필요해지면 다시 찾아서 공부하기. 지금은 패스

row-gap, column-gap

gap: 10px 20px;  >>> row-gap 10px column-gap 20px
gap: 20px;  >>> row-gap 20px column-gap 20px

브라우저 호환 범위를 넓히기 위해 예전에 사용하던 방식인, gap 앞에 grid를 붙이는 것도 함께 쓰기도 한다.

.container {
	grid-gap: 20px;
	gap: 20px;
}

grid-auto- : 몇 줄이 될 것인지 자동으로 정의

.container {
	grid-template-rows: repeat(3, minmax(100px, auto));
}

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

template 으로 지정해 준 줄의 개수가 없으면, auto가 알아서 처리를 해준다.

자 이제 누가 어디에 들어갈 건지

개발자 도구의 grid display settings(FireFox기준) 에서 체크박스를 선택하면 볼 수 있다.

.item:nth-child(1) {
	grid-column: 1 / 3;  >>> 1번에서 start, 3에서 end(총 두 칸)
	grid-row: 1 / 2;  >>> 1번에서 start, 2에서 end(총 한 칸)
}

• 시작과 끝 라인을 지정하는 방식으로 요소를 원하는 칸에 집어넣을 수 있다.

.item:nth-child(1) {
	/* 1번 라인에서 시작해서 2칸 */
	grid-column: 1 / span 2;
	/* 1번 라인에서 시작해서 3칸 */
	grid-row: 1 / span 3;
}

• 시작과 끝 지정 이외에, 이것처럼 칸 수를 지정하는 방법도 있음

영역 이름으로 그리드 정의

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

• 직관적으로 칸 각각의 위치에 이름을 부여.

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

• 그리고 각 그리드 아이템을 그 이름을 이용하여 위치 지정

이후엔 공부하면서 그때 그때 작성