Grid

요약

Grid

• 2차원 레이아웃: CSS 그리드는 행(row)과 열(column)을 사용하여 2차원 레이아웃을 생성합니다. 이를 통해 요소를 수평 및 수직 방향으로 자유롭게 배치할 수 있습니다.

• 유연한 크기 조정: 그리드 컨테이너와 그리드 아이템에 대해 크기를 유연하게 조정할 수 있습니다. fr 단위를 사용하여 각 열 또는 행이 가질 비율을 지정할 수 있으며, px, %, auto 등 다양한 단위를 사용하여 크기를 조정할 수 있습니다.

• 정렬 기능: 그리드 아이템을 수평 및 수직으로 정렬할 수 있습니다. justify-items 및 align-items 속성을 사용하여 아이템의 정렬 방향을 지정할 수 있으며, justify-content 및 align-content 속성을 사용하여 그리드 컨테이너 내의 아이템을 정렬할 수 있습니다.

• 간격 제어: 그리드 간의 간격을 제어할 수 있습니다. grid-gap 속성을 사용하여 그리드 아이템 사이의 간격을 설정할 수 있으며, grid-row-gap 및 grid-column-gap 속성을 사용하여 행과 열 간의 간격을 개별적으로 설정할 수도 있습니다.

• 반응형 레이아웃: CSS 그리드는 반응형 웹 디자인에 매우 유용합니다. 미디어 쿼리와 함께 사용하여 그리드 컨테이너 및 그리드 아이템의 배치를 다양한 화면 크기에 따라 조정할 수 있습니다.

• 격자 라인 제어: 그리드 라인을 사용하여 그리드 아이템의 위치를 정확하게 제어할 수 있습니다. grid-column-start, grid-column-end, grid-row-start, grid-row-end 등의 속성을 사용하여 그리드 아이템이 건너뛰거나 여러 개의 셀을 차지할 수 있습니다.

• 중첩 그리드: 그리드 내에 다른 그리드를 중첩하여 복잡한 레이아웃을 생성할 수 있습니다. 그리드 아이템 안에 또 다른 그리드 컨테이너를 만들어 중첩된 그리드를 구성할 수 있습니다.

Grid 용어

• 그리드 컨테이너 (Grid Container) : display: grid를 적용하는, Grid의 전체 영역입니다.

• 그리드 아이템 (Grid Item) : Grid 규칙에 의해 배치되는 Grid 컨테이너의 자식 요소들입니다. 코드에서 <div class=”item”></div>들이 Grid 아이템입니다.

• 그리드 트랙 (Grid Track) : Grid의 행(Row) 또는 열(Column)

• 그리드 셀 (Grid Cell) : Grid의 한 칸을 가리키는 말입니다. <div>같은 실제 html 요소는 그리드 아이템이고, 이런 Grid 아이템 하나가 들어가는 “가상의 칸(틀)”이라고 생각하면 됩니다.

• 그리드 라인(Grid Line) : Grid 셀을 구분하는 선입니다.

• 그리드 번호(Grid Number) : Grid 라인의 각 번호입니다.

• 그리드 갭(Grid Gap) : Grid 셀 사이의 간격입니다.

• 그리드 영역(Grid Area) : Grid 라인으로 둘러싸인 사각형 영역으로, 그리드 셀의 집합이에요.

Grid 속성

1. display: grid
• 컨테이너로 사용할 요소에 사용합니다.

2. 그리드 형태 정의
• 컨테이너에 Grid 트랙의 크기들을 지정해주는 속성입니다.
• grid-template-rows : 행(row)의 배치
• grid-template-columns : 열(column)의 배치

/* 
고정크기
column을 200px, 200px, 500px로 만듬 
*/
grid-template-columns: 200px 200px 500px;

/* 
가변크기 : fr은 숫자 비율대로 트랙의 크기를 나눕니다.
1fr 1fr 1fr의 경우 균일하게 1:1:1 비율인 3개의 column을 만듬
 */
grid-template-columns: 1fr 1fr 1fr;

/* 
고정과 가변 섞어 사용
첫번째 column은 100px로 고정, 나머지 두번째 세번째 column은 2:1의 비율로 유연하게 만들어짐
*/
grid-template-columns: 100px 2fr 1fr;

/* 
repeat(반복횟수, 반복값)
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 과 동일한 의미 
*/
grid-template-columns: repeat(5, 1fr);

/*
minmax : 최솟값과 최댓값을 지정할 수 있는 함수
minmax(100px, auto)의 의미는 최소한 100px, 최대는 자동으로(auto) 늘어납니다. 
최소한 높이 100px은 확보하고, 내용이 많아 100px이 넘어가면 알아서 늘어나도록 처리
*/
grid-template-rows: repeat(3, minmax(100px, auto));

/*
auto-fill과 auto-fit
column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채웁니다.
auto-fill은 셀의 개수가 모자라서 공간이 남으면 비워두지만, auto-fit은 남은 공간을 채움
*/
grid-template-columns: repeat(auto-fill, minmax(20%, auto));

3. 간격 만들기
• 그리드 셀 사이의 간격을 설정합니다.
• row-gap : 행 간격 / column-gap : 열 간격 / gap : 행과 열 간격

/* row의 간격을 10px로 */
row-gap: 10px;

/* column의 간격을 20px로 */
column-gap: 20px;

/* row-gap: 10px; column-gap: 20px; */
gap: 10px 20px;

/* row-gap: 20px; column-gap: 20px; */
gap: 20px;

4. 그리드 형태를 자동으로 정의
• grid-template-columns / grid-template-rows의 통제를 벗어난 위치에 있는 트랙의 크기를 지정하는 속성(통제를 벗어난 : repeat 사용시 row의 개수를 미리 알 수 없는 경우 등의 문제)
• grid-template-rows로 미리 세팅해 둔 것이 없는 경우 모든 row들은 grid-template-rows의 통제를 벗어난 row가 되는 것이고, 바로 grid-auto-rows가 처리된다.
• grid-auto-rows / grid-auto-columns

/*
통제를 벗어난 경우 각 셀마다 최소 100px의 높이를 확보하고, 
컨텐츠가 높이 100px을 넘어가면 알아서 자동으로 늘어나도록 함
*/
grid-auto-rows: minmax(100px, auto);

5. 각 셀의 영역 지정
• Grid 아이템에 적용하는 속성으로, 각 셀의 영역을 지정합니다.
• Grid 라인 번호를 이용해 column과 row의 범위를 결정합니다.

• grid-column-start / grid-column-end / grid-column grid-row-start / grid-row-end / grid-row

/* 1. 시작번호 / 끝번호를 지정하는 방법 */
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;

/* 위 코드와 아래 코드는 같은 의미이다 */
grid-column: 1 / 3;
grid-row: 1 / 2;


/* 2. 몇 개의 셀을 차지하게 할 것인지 정하는 방법 */
/* 1번 라인에서 2칸 */
grid-column: 1 / span 2;
/* 1번 라인에서 3칸 */
grid-row: 1 / span 3;

6. 영역 이름으로 그리드 정의
• 각 영역(Grid Area)에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법
• grid-template-areas



.container {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
}

7. 자동배치
• 아이템이 자동 배치되는 흐름을 결정하는 속성
• grid-auto-flow

8. 세로/가로 방향 정렬
• 아이템을 세로(column)축 / 가로(row)측 방향으로 정렬
• align-items(세로 방향) / justify-items(가로 방향) / place-items(세로와 가로 방향을 동시에, align justify 순서로 작성한다)

9. 아이템 그룹 정렬
• Grid 아이템들의 높이나 너비를 모두 합한 값이 Grid 컨테이너의 높이나 너비보다 작을 때 Grid 아이템들을 통째로 정렬합니다.
• align-content(세로 정렬) / justify-content(가로 정렬) / place-content(세로와 가로 방향을 동시에, align justify 순서로 작성한다)

10. 개별 아이템 정렬
• 해당 아이템을 세로(column)축 / 가로(row)측 방향으로 정렬합니다. 아이템에 적용합니다.
• align-self(세로 정렬) / justify-self(가로 정렬) / place-self(세로와 가로 방향을 동시에, align justify 순서로 작성한다)

11. 배치 순서
• 각 아이템들의 시각적 나열 순서를 결정하는 속성
• 숫자값이 들어가며, 작은 숫자일 수록 먼저 배치됩니다. "시각적" 순서일 뿐, HTML 자체의 구조를 바꾸는 것은 아니므로 접근성 측면에서 사용에 주의하셔야 합니다.
• order / z-index(z축 정렬)

참고한 사이트