22.12.15

---

CSS(Grid +)

---

Flex와 Grid의 가장 큰 차이?
Flex는 한 방향 레이아웃 시스템이고, Grid는 두 방향 레이아웃 시스템이다.

*Grid 레이아웃을 만들기위한 HTML 구조

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
	<div class="item">G</div>
	<div class="item">H</div>
	<div class="item">I</div>
</div>

.container {
	display: grid;
}

*Grid 용어 정리

• Grid Container(그리드 컨테이너)
  display:grid를 적용하는 grid의 전체영역. Grid Container 안 요소들이 grid규칙의 영향을 받아 정렬된다고 생각하면 된다.
• Grid Item(그리드 아이템)
  Grid Container의 자식 요소들.
• Grid Track(그리드 트랙)
  Grid의 행렬
• Grid Cell(그리드 셀)
  Grid 한 칸을 의미한다.
• Grid Line(그리드 라인)
  Grid 셀을 구분하는 선이다.
• Grid Number(그리드 번호)
  Grid 라인의 각 번호
• Grid Gap(그리드 갭)
  Grid 셀 사이 간격
• Grid Area(그리드 영역)
  Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀 집합이다.

Grid속성들은 Flex와 마찬가지로 컨테이너에 적용하는 속성, 아이템에 적용하는 속성 이 있다.

display: grid

.container {
	display: grid;
	/* display: inline-grid; */
}
/* 그리고 아무 일도 일어나지 않았다 */
/* 아이템들이 block 요소라면 이 한 줄 만으로는 딱히 변화는 없다. */
/* inline-grid도 있는데 inline-block과 비슷하다 */

Grid 형태 정의

grid-template-row, grid-template-columns

컨테이너에 Grid 트랙 크기를 지정해주는 속성이다. 여러가지 단위를 사용할 수 있고, 섞어서 쓸 수 있다.

.container {
	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: 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 */
}

/* grid-template-columns: 200px 200px 500px; 는
   column을 200px, 200px, 500px로 만들겠다는 의미이다.
*/

/* grid-template-columns: 1fr 1fr 1fr; 는
   1:1:1 비율로 column을 만들겠다는 의미이다.
*/

grid-template-columns: 100px 2fr 1fr;
// 1st columns 100px, 2nd 3rd columns 2:1 비율 설정

*값에 따른 변화

repeat 함수

repeat(반복함수, 반복값)

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

minmax 함수

최솟값,최댓값을 지정할 수 있는 함수이다.
minmax(100px,auto)의 의미는 최소한 100px, 최대는 자동으로 늘어나게 라는 뜻

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

auto-fill, auto-fit

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

.container {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

간격만들기

row-gap, column-gap

그리드 셀 사이의 간격을 설정한다

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

.container {
	gap: 10px 20px;
	/* row-gap: 10px; column-gap: 20px; */
}

.container {
	gap: 20px;
	/* row-gap: 20px; column-gap: 20px; */
}

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

grid-auto-columns, grid-auto-rows

만약 우리가 row의 개수를 미리 알 수 없는 상황이라면?

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

이렇게, grid-auto-rows를 써주면 횟수를 지정하지 않아도 알아서 처리해준다.

각 셀 영역 지정

grid-column, grid-row

Grid-line 번호를 통해서 column과 row의 범위를 결정할 수 있다.

.item:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
    
    /* 시작번호 / 끝번호 */
}

reference: 1분코딩
https://studiomeal.com/archives/533

1분코딩: Grid carrot game
https://cssgridgarden.com/#k
Grid carrot game 해설
https://www.youtube.com/watch?v=QHK53Y-7oRU