[속성] grid

grid

- 획일적인 레이아웃을 구성하기 위해 사용한다.

- 그리드 컨테이너가 가지는 자식의 크기가 같거나 최소 크기의 배수 일때 사용한다.

(주로) 가령, 유튜브나 에르메스 사이트.

- 주의 : 데이터를 담기 위해 그리드를 사용하면 안되며, 레이아웃을 구성하기 위해 테이블을 사용하여서는 안된다. 그리드와 테이블의 역할은 다름.

- 그리드화 할 부모 요소의 'display' 속성 값을 'grid'로 지정하면 된다.

 

---

[속성] grid-template-columns

- 그리드 컨테이너에 부여하는 속성으로, 열 크기의 비율을 지정한다. (개수도 동시에 지정함)

- 열 크기의 비율은 fr(fraction) 단위를 이용한다.

- 가령, 크기가 같은 두 개의 열을 지정하기 위해 아래와 같이 사용한다.

- grid-template-colums: 1fr 1fr;

- 다만, 열의 개수가 많다면 repeat() 함수를 이용하여 아래와 같이 사용한다.

- grid-template-colums: repeat(8, 1fr); /* 1fr을 8번 반복함 */

- 위와 같이 적는 것은 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 라고 적는 것과 같다.

 

---

[속성] gap

- 그리드 컨테이너에 부여하는 속성으로, 이가 가지는 자식들 간의 여유 공간을 지정한다.

- 그리드 컨테이너의 자식들 간의 여유 공간을 주기 위해서 'margin'을 사용하지 않는다.

- 속성 값을 하나만 주면 위/아래, 좌/우 여백을 설정한다. 가령 gap: 1rem; 을 지정하면 모든 여백을

1rem으로 설정한다.

- 속성 값을 공백으로 구분하여 두개 주면 각 값은 상/하, 좌/우 순서대로 적용된다.

가령 gap: 1rem 2rem; 을 지정하면 상/하 여벽이 1rem, 좌/우 여백이 2rem이 된다.

 

---

[속성] grid-column-start, grid-column-end

- 'grid-column-start' 속성은 해당 그리드가 시작할 인덱스 번호를 지정한다.

- 'grid-column-end' 속성은 해당 그리드가 끝날 열 인덱스 번호를 지정한다.

 

---

[속성] grid-row-start, grid-row-end 속성

- 그리드 컨테이너 자식에게 부여한다.

- 'grid-row-start' 속성은 해당 그리드가 시작할 행 인덱스 번호를 지정한다.

- 'grid-row-end' 속성은 해당 그리드가 끝날 행 인덱스 번호를 지정한다.

 

---

[기타] 미디어 쿼리(Media Query) - (항상 최하단에 작성한다)

- 여러 조건에 따른 선택자 분기를 위해 사용한다.

- 주로 (브라우저) 화면의 최대 가로 크기의 변화에 따른 선택자를 적용하고자 할 때 사용한다.

다음과 같이 작성한다.

@media screen and (max-width: [원하는 화면 최대 가로 크기]){

...

}

- 위 미디어 쿼리는 스크린(Screen)의 최대 가로 크기가 설정한 [원하는 화면 최대 가로 크기] 이하 일 때

중괄호({, })안의 선택자를 적용하겠다는 뜻.

​