Flex-box와 마찬가지로, 대부분 부모 태그에서 컨트롤 한다.
Flex-box도 매우 유용하지만, Grid가 더 필요한 경우도 있을 수 있다.
많이 사용하는 속성으로만 간단 요약하여 정리한다.
1) grid-template-columns / grid-template-rows
가장 중요한 속성이라고 생각한다.
그리드의 형태를 정의하는 속성 및 방식들이 여러가지 있고, 속성들 또한 다양하지만
기본적으로 이 속성을 사용하여 정의하는 것이 직관적이라고 생각한다.
display: grid;
grid-template-columns: 100px 100px;
grid-template-rows: 100px 100px 100px 100px;
각 행과 열에 대해 너비와 높이를 직접 지정해주는 방식이 기본 방식이다.
Grid는 창 크기가 작아져도 다음 줄로 넘어가지 않고 형태를 유지한다.
grid를 정의하는데 유용한 함수와 단위가 있다.
repeat 이라는 함수와 fr 이라는 단위다.
repeat 함수는 'repeat( 셀 개수, 셀 너비 )' 로 사용한다. (셀은 요소가 들어가는 한 칸을 의미)
fr 은 셀의 너비 및 높이를 그리드 컨테이너의 크기에 맞게 비율로 계산하여 적용시켜주는 방식이다.
위 코드처럼, 4개의 요소를 repeat으로 반복하여 1fr(fraction)으로 설정하면
모든 요소가 1:1:1:1의 비율로 그리드를 차지하게 된다.
창의 크기를 늘리거나 줄여도 그 비율이 일정하게 유지된다.
단, row에 fr을 적용하려면 셀 안에 contents가 있거나, 없다면 grid의 높이를 초기에 설정해야 한다. (grid 높이에 대한 비율로 정하는 것이기 때문)
(참고로, grid-template: column수 row수 로 정의할 수도 있지만, 비추천.)
부모 컨테이너에 선언한다.
2) gap (column-gap / row-gap)
셀 사이의 공간을 gap 이라고 하는데, column이나 row 사이 간격을 따로 지정하거나
gap으로 동시에 크기를 정할 수 있다.
gap 속성은 column-gap 과 row-gap을 합쳐놓은 속성이다.
gap: 20px 40px; // column-gap:20px , row-gap:40px
gap: 20px; // column-gap:20px , row-gap:20px
부모 컨테이너에 선언한다.
3) grid-column / grid-row
자식(요소)에 직접 셀을 어떤 형태로 취할 것인지 지정해주는 방식이다.
예제로 빠르게 살펴본다.
grid-column: 시작 column line / 끝 column line 과 같은 방식으로 정의한다.
라인의 번호는 위 그림으로 표현했다.
마이너스 값으로 하면 거꾸로 셀 수도 있다.
위처럼, grid를 정의해놓고 특정 요소를 원하는 위치와 너비로 배치할 수 있는 것이 큰 장점이다.
또한, span 을 활용하여 몇 칸을 차지할 것인지를 정하는 방식도 있다.
시작점이나 끝 지점을 설정해야 한다.
그리드의 범위를 벗어나도 셀이 생성되긴 하지만, 지정한 크기로 생성되지 않는다.
그리드의 규칙을 깨면서 생성된다.
자식 요소에 선언한다.
4) place-content (align-content / justify-content)
그리드 전체의 위치를 선정한다.
그리드의 높이와 너비를 설정했는데 요소들이 해당 높이, 너비를 모두 채우지 못하는 경우에 적용된다.
즉, 설정한 그리드의 높이, 너비보다 실제 셀들이 채워지며 생성된 그리드가 작은 경우에 쓸 수 있는 것이다.
이 때문에 fr을 이용하여 그리드의 높이 또는 너비를 비율로 계산하여 셀을 채운다면 사용할 수 없다.
place-content: center end; // 수직, 수평 순서
place-content도 역시 justify-content 와 align-content가 결합된 shortcut이다.
사용 방식은 'place-content: align-content값 justify-content값;' 이다.
(하나로 합쳐진 속성들은 전부 'cross-axis, main-axis' 순서이다.)
추가로, 속성 값을 하나로만 선언하면 2개의 축 모두 그 값으로 결정된다.
부모 컨테이너에 선언한다.
5) grid-auto-flow
지정한 그리드의 양식에서 벗어나, 셀이 추가로 생성되야하는 상황에서 사용하는 속성이다.
row 쪽으로 새로운 줄을 생성할지, column쪽으로 새로운 줄을 생성할지 정한다.
default는 row이며, column으로 값을 주면 기존 그리드의 방향(셀이 채워지는 순서)도 바뀐다.
주로 그리드의 방향을 바꾸는 용도로 사용한다.
grid-auto-flow: column;
부모 컨테이너에 선언한다.
6) grid-auto-rows / grid-auto-column
셀이 추가로 필요하게 되어 그리드의 행 또는 열이 새로 생성돼야 하는 상황에서, 어떤 방향으로 얼만큼의 높이 또는 너비를 갖고 라인을 생성하는지 결정한다.
예를 들면, grid-auto-rows: 100px 값을 선언한다고 하자.
지정한 그리드 셀의 개수를 넘어 요소가 추가로 생성되면, 한 행이 100px 높이로 생성된다.
grid-auto-column은 grid-auto-flow로 column을 선언하여 그리드의 방향을 column으로 바꾼 경우에만 사용할 수 있다.
부모 컨테이너에 선언한다.
그 외 속성들)
* place-items (align-items / justify-items)
... 그리드 전체의 셀들 안에 있는 요소의 배치를 결정한다. 부모 컨테이너에 선언한다.
* place-self
... 특정 셀 하나 안에 있는 요소의 배치를 결정한다. 자식 요소에 선언한다.
* grid-template-areas
... 각 요소에 대해 naming을 하고, 이를 직접 "A A B C" 와 같은 방식을 사용하여 그리드 형태로 정의한다. 비추천
* grea-area
... grid-template-areas의 각 요소 naming 방식.
또는, 각 요소가 어떤 셀을 차지할지를 row와 column 라인 번호로 직접 지정한다.
(이 방식은 grid-column, grid-row의 기능과 같다. 비추천)
* grid-template
... grid-template-areas의 방식에 너비와 높이를 지정하는 방식. "A A B C" 1fr 로 한 행의 배치 및 높이를 선언하고, 마지막에는 행 선언과 구분하여 / 1fr 1fr 2fr 1fr 같은 방식으로 너비를 선언한다. 너무 난잡하므로 비추천.
참고)
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Auto-placement_in_CSS_Grid_Layout
'Front-end > CSS' 카테고리의 다른 글
| CSS) [Grid] 반응형 웹 사이트를 위한 minmax, min/max-content, auto-fill/fit (0) | 2022.10.10 |
|---|---|
| CSS) [Flex-Box] 주요 속성 및 사용 방법 ... 간단 정리 (0) | 2022.10.09 |
| CSS) position 속성 5가지 ... static, fixed, relative, absolute, sticky (1) | 2022.10.08 |
| CSS) [Media Query] 간단 사용법 및 실습 (0) | 2022.10.08 |
| CSS) [Block / Inline] 기본 개념과 구분 방법 (0) | 2022.10.08 |