22/08/24 [모각코] 11일차

오늘은 grid 를 써봤습니다

css 중 제가 자주 쓰는 flex는 한 방향 레이아웃 시스템이고 

grid는 두 방향 레이아웃 시스템입니다. 그래서 grid는 flex보다 복잡한 구현이 가능합니다.

.container {
	display: grid;
}

grid-template-rows -  행에서의 배치

grid-template-colunms - 열에서의 배치

예를 들면

grid-template-columns: 100px 100px 200px;

이면 열이 100px , 100px, 200px 로 만들겠다는 것이고

grid-template-rows: 1fr 1fr 1fr

이면 행이 1:1:1 비율을 차지한다는 것입니다.

1:2 비율로 열을 지정한 모습