[CSS] Grid

🥸 Grid

그리드 레이아웃은 세로 열과 가로 행을 기준으로 요소를 정렬할 수 있습니다.

flex: 한 방향 레이아웃 시스템(1차원) VS grid: 두 방향(가로-세로) 레이아웃 시스템(2차원)

---

display: grid

column은 (세로) ,row는(가로)

grid-template-columns: 만들고 싶은 칼럼 수에 맞게 너비를 지정합니다.

grid-template-rows: 만들고 싶은 행 수에 맞게 높이를 지정합니다.

높이 지정을 안 할 경우에는 안에 들어가는 텍스트와 이미지 크기로 자동으로 설정됩니다.

 

repeat() 함수와 fr 단위

fraction(분수)라는 이름에 맞춰, 이 단위는 사용 가능한 공간의 일정 비율을 나타냅니다.

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

이러한 코드가 주어진다면 세 개의 열이 있고 각 열이 동일한 너비로 설정된 그리드를 만들고 각 열은 컨테이너의 너비를 동일한 비율로 차지하게 됩니다.

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

이러한 코드가 주어진다면 첫번째 열은 나머지 두 개의 열보다 2배 너비를 차지하게 됩니다.