CSS) Grid 레이아웃

 

Grid 레이아웃

Grid 레이아웃은 페이지를 여러 주요 영역으로 나누거나, 크기와 위치 및 문서 계층 구조의 관점에서 관계를 정의하는데 유용하다.

 

 

 

그리드의 형태 정의

- grid-template-row와 grid-template-columns 로 Grid트랙의 크기들을 지정해주는 속성이다.

- 여러가지 단위를 사용할 수 있고 섞어서 쓰기도 가능하다.

- gird-template-row는 행의 배치를 grid-template-column은 열의 배치를 결정한다.

        .container{
            display: grid;
            grid-template-columns: 200px 200px 500px;
            grid-template-rows: 200px 200px 500px;
            background-color: aqua;
        }

 

 

   .container{
            display: grid;
 	     	grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            back-ground-color : aqua;
        }

    .container{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 1fr);
            background-color: aqua;
        }

repeat

- repeat은 반복되는 값을 자동으로 처리할 수 있는 함수이다

- repeat(반복횟수, 반복값)으로 정의한다.

 

minmax 함수

- 최솟값과 최댓값을 지정할 수 있는 함수이다.

- minmax(최솟값, 최댓값)으로 정의한다.

 

auto-fill과 auto-fit

- auto-fill과 auto-fit은 column의 개수를 미리 정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.

.container {
		grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

- auto-fill의 크기를 20%로 설정하여, 하나의 행에는 5개의 셀이 들어간다.

- 셀의 개수가 5개보다 모자라면 캡쳐본과 같이 공간이 남는다.

- auto-fill 대신 auto-fit을 사용하면, 남는 공간을 채운다.

 

간격 만들기 : row-gap, column-gap, gap

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

 

- margin을 없애고 gap을 하나도 주지 않은 상태

 

- row의 간격을 10px로 column의 간격을 20px로 

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

 

 

 

참조 : https://studiomeal.com/archives/533