그리드 레이아웃을 설정하기 위해 display 속성값은 2가지가 있습니다.
grid : 컨테이너 안의 항목을 블록 레벨 요소로 배치합니다.(블록레벨요소에 대한 설명은 블로그에 적어두었습니다.)
inline-grid: 컨테이너 안의 항목을 인라인 레벨 요소로 배치합니다.
여기서 칼럼과 줄을 지정하는
grid-template-columns와 grid-template-rows 속성을 사용합니다.
예를 들어 보겠습니다.
<style>
#wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px;
}
</style>이런 식으로 display 속성값을 grid로 설정해주시오
columns값을 3개를 넣어 주었습니다. 그러면 세로 줄 3개가 생기고
아래 row값은 한개 넣어주시면 가로 줄이 하나 추가 될때마다 100px의 높이를 가진 가로줄을 만드는 것입니다.
여기서 상대적인 크기를 지정하는 fr 단위가 있는데요.
만일 px값으로 입력한다면 항상 크기가 고정되므로 반응형 웹 디자인에는 적당하지 않습니다.
그러므로 fr 단위를 사용합니다.
ex)
grid-template-columns: 1fr 1fr 1fr;
이런 식으로 적는다면 너비가 같은 칼럼 3개를 배치 하는 것이고
grid-template-columns: 2fr 1fr 2fr;
로 적으시면 2:1:2의 크기로 칼럼이 배치되는 것입니다.
첫번째 예시를 줄이는 방법으로 repeat() 함수를 사용하는 것인데요
첫번째 예시를 보면 1fr이 3번 반복되있습니다.
이럴 때
grid-template-columns: repeat(3, 1fr);
이런식으로 적어주시면 됩니다.
<style>
#wrapper {
display: grid;
grid-template-columns: 200px 200px 200px;
grid-template-rows: 100px;
}
</style>
근데 만일 위 소스코드 처럼 작성하였을 때
grid-template-rows 가 100px 이므로 100px 이 넘어가면은 내용이 보이지가 않습니다.
이럴때 minmax() 함수를 사용 해주는데요
최소 100px의 높이를 가지며 그 이상이 되었을때 크기가 늘어나도록 설정을 하려면
grid-template-rows: minmax(100px, auto);
이런식으로 적어주시면 되겠습니다.