[CSS] Grid

Grid?

CSS 레이아웃 중 하나로,행과 열로 구성되어 있어 별도의 위치 지정 없이도 더 많은 레이아웃을 구현할 수 있게 만들어졌다.

 

🔎 Table vs Grid vs Flex

	Table	Grid	Flex
행과 열이 있는가?	⭕️	⭕️	❌
유동적인 레이아웃이 가능한가?	❌	⭕️	⭕️

---

1. 그리드 용어

출처 - 위니북스 HTML/CSS 베이스 캠프

 

1. Grid Container

display:grid;를 적용하는 Grid의 전체 영역으로, 이 안의 요소들이 Grid의 영향을 받아 정렬된다.

해당 컨테이너 안에 있는 모든 자식 요소가 Grid Item이 된다.

 

2. Grid Track

그리드에 그려진 두 라인 사이의 공간이다.

공간이 세로일 때는 columns(행), 가로일 때는 row(열)이다.

3. Grid Cell

Grid의 가장 작은 단위로, Grid Item을 가지고 있는 개념적인 공간이다.

4. Grid Line

그리드를 구분하는 선

5. Grid Number

그리드 라인에 붙여지는 번호

 

6. Grid Gap

Grid Cell 간의 간격

 

7. Grid Area

그리드 셀의 집합

---

2. 자주 쓰는 속성

2-1.  그리드 형태 정의 - gird-template

그리드 트랙의 크기를 지정해주는 속성으로 다양한 단위를 섞어 사용할 수 있다.

• grid-template-columns : 행(세로) 부분의 트랙 크기를 지정
• grid-template-rows: 열(가로) 부분의 트랙 크기를 지정

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

 

🔎 fr? 

fraction(분수)라는 뜻으로, 숫자의 비율대로 그리드 셀을 나눠주는 단위이다.

 

2-2. 간격 만들기 - Gap

셀과 셀 사이의 간격을 설정한다.

• column-gap: 세로 간격을 설정
• row-gap: 가로 간격을 설정
• gap: 가로, 세로를 모두 한 번에 설정

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

---

3. 함수

3-1.  repeat

repeat(반복횟수, 반복값)

반복되는 값을 자동으로 처리해줄 수 있는 함수이다.

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

 

3-2.  minmax

minmax( 최소값, 최대값)

최소값,최대값을 정하는 함수이다.

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

❓auto를 사용할 경우 자동으로 최대로 늘어난다.

 

 

---

출처
위니북스 HTML/CSS 에센셜 - https://www.books.weniv.co.kr/essentials-html-css
Mdn web Docs -https://developer.mozilla.org/ko/