gridbox

flexbox가 1차원으로 레이아웃을 설계하는 거였다면 gridbox는 2차원으로 레이아웃을 설계한다.

flexbox와 마찬가지로 grid container에 display: grid를 set해준다.

.container {
	display: grid;
}

grid-template-rows, grid-template-columns

grid-template-rows는 행(row)의 배치

grid-template-columns는 열(column)의 배치

grid-template-columns: 200px 200px 500px;
grid-template-columns: 1fr 1fr 1fr;

/*위 예제는 아이템들이 3개의 열을 형성한다고 가정한 것이다.*/
/*fr은 fraction으로 1:1:1로 나누겠다는 뜻. 플러터에서 Flex위젯과 비슷하다고 생각이 든다.*/

grid-template-columns: 100px 2fr 1fr;
/*이렇게도 사용 가능하다.*/

repeat

반복되는 값을 자동으로 처리할 수 있는 함수

.container {
	grid-template-columns: repeat(5, 1fr);
	/* grid-template-columns: 1fr 1fr 1fr 1fr 1fr */
    /*repeat(반복횟수, 반복값)*/
}

minmax

최솟값과 최댓값을 지정 가능한 함수

.container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, minmax(100px, auto));
    /*최소 100px 최대는 자동으로 늘어나게*/
}

row-gap, column-gap, gap

그리드 셀 사이의 간격을 설정하는 속성

.container {
	row-gap: 10px;
	/* row의 간격을 10px로 */
	column-gap: 20px;
	/* column의 간격을 20px로 */
}

.container {
	row-gap: 1rem;
	column-gap: 2rem;
}

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

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

align-items, justify-items, place-items

align-items는 아이템들을 세로방향으로 정렬, justify-items는 아이템들을 가로방향으로 정렬하는 방식을 지정할 수 있다. place-items는 이들의 단축속성이다.

'컨테이너'에 적용한다.

.container {
	align-items: stretch;
	/* align-items: start; */
	/* align-items: center; */
	/* align-items: end; */
    
    justify-items: stretch;
	/* justify-items: start; */
	/* justify-items: center; */
	/* justify-items: end; */
}

.container {
	place-items: center start;
}

align-self, justify-self, place-self

위가 모든 아이템들을 정렬했다면 이는 개별의 아이템들을 정렬할 수 있는것.

.item {
	align-self: stretch;
	/* align-self: start; */
	/* align-self: center; */
	/* align-self: end; */
    
    justify-self: stretch;
	/* justify-self: start; */
	/* justify-self: center; */
	/* justify-self: end; */
}

.item {
	place-self: start center;
}

grid-template-areas

각 영역에 이름을 붙이고, 그 이름을 이용해서 배치하는 방법. 정말 직관적이다!

.container {
	grid-template-areas:
		"header header header"
		"   a    main    b   "
		"   .     .      .   "
		"footer footer footer";
        /* 빈칸은 마침표 또는 “none”을 사용하면 되고, 마침표의 개수는 여러개를 써도 상관 없다*/
}
.header { grid-area: header; }
.sidebar-a { grid-area: a; }
.main-content { grid-area: main; }
.sidebar-b { grid-area: b; }
.footer { grid-area: footer; }
/* 이름 값에 따옴표가 없는 것에 주의*/

grid-row, grid-column,

grid 아이템에 적용하는 속성으로, 각 셀의 영역을 지정한다.

grid 넘버는 개발자 도구를 통해 자세하게 확인할 수 있다.

.item:nth-child(1) {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
}

.item:nth-child(1) {
	grid-column: 1 / 3;
	grid-row: 1 / 2;
}

위 코드들은 같은 코드이다.

출처
https://studiomeal.com/archives/533
https://www.youtube.com/watch?v=uBSbPq_bJFs&list=PL-eeIUD86IjTH1qT8qdHXDm-FfOnm7a_U&index=24