칼럼과 줄을 지정하는 grid-template-columns, grid-template-rows 속성 - grid-template-columns 속성 ▷ 그리드 컨테이너 안에 항목을 배치할 때 칼럼의 크기와 개수를 지정 (몇 개의 칼럼으로 배치할지, 각 칼럼의 너비를 얼마로 할지 지정) - grid-template-rows 속성 ▷ 그리드 컨테이너 안에 항목을 배치할 때 줄의 크기와 개수를 지정
#wrapper{
display:grid;
grid-template-columns: 200px 200px 200px; // 너비가 200px인 칼럼 3개
grid-template-rows:100px; // 줄 높이 100px
}
상대적인 크기를 지정하는 fr 단위 - 그리드 레이아웃에서는 상대적 크기를 지정할 수 있도록 fr(fraction) 단위를 사용한다.
grid-template-columns:1fr 1fr 1fr; // 너비가 같은 칼럼을 3개 배치
grid-template-columns:2fr 1fr 2fr; // 너비가 2:1:2로 배치
값이 반복될 때 줄여서 표현할 수 있는 repeat( )함수 - px이나 fr 단위를 사용하면 똑같은 값을 여러 번 반복해야 한다. - CSS 그리드 레이아웃에는 내장된 repeat( )이라는 함수를 사용하면 반복하지 않고 간단하게 표현할 수 있다.
최솟값과 최댓값을 지정하는 minmax( ) 함수 - minmax() 함수를 사용하면 줄 높이를 고정하지 않고 최솟값과 최댓값을 사용해서 유연하게 지정할 수 있다.
#wrapper{
width:600px;
display:grid; /* 그리드 컨테이너 지정 */
grid-template-columns:repeat(3, 1fr); /* 너비가 같은 칼럼 3개 */
grid-template-rows: minmax(100px, auto); /* 줄 높이 최소 100px */
}
자동으로 칼럼 개수를 조절하는 auto-fill, auto-fit 값 - 칼럼의 너빗값과 함께 auto-fill이나 auto-fill을 지정하면 화면 너비에 따라 칼럼 개수를 조절할 수 있다.
grid-template-columns: repeat(auto-fit, 200px);
- auto-fit이나 auto-fill 모두 칼럼 개수를 자동으로 조절해 주므로 화면이 넓어지면 칼럼 개수가 많아지고 반대로 화면이 좁아지면 칼럼 개수가 줄어든다. - 두 값의 차이점은 남는 공간을 채울지 말지 여부에 달려있다. - auto-fit을 사용하면 화면이 넓을 때에는 남은 공간 없이 꽉 채워서 칼럼을 표시하고, auto-fill을 사용하면 칼럼의 최소 너비만 표시하고 남는 공간은 그대로 둔다.
#wrapper1 {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
/* 화면을 꽉 채울만큼 칼럼 너비를 늘려서 표시 */
margin-bottom: 20px;
}
#wrapper2 {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
/* 칼럼 최소 너비만큼 채워서 표시 */
}
- 항목을 배치할 때 칼럼이나 줄을 하나만 차지할 경우에는 grid-column-start나 grid-row-start 속성을 이용해서 시작 번호만 지정하고 끝 번호는 지정하지 않아도 된다.
템플릿 영역을 만들어 배치하기 - 템플릿 영역으로 항목을 배치하면 그리드 레이아웃을 만드는 것보다 더 쉽다. - 방법 1. grid-area 속성을 사용해서 각 영역에 템플릿 이름을 지정해준다. 2. 컨테이너 영역에서 grid-template-areas 속성을 사용해 템플릿 영역을 어떻게 배치할지 지정한다. (템플릿 영역을 비워 두려면 그 자리에 마침표(.)를 넣는다.) 3. 한 줄에 들어갈 템플릿 영역을 큰따옴표("")로 묶어준다.
