격자를 통제하는 법, display: grid;

요약

1. display: grid;를 설정하면 정해진 행렬 너비 높이대로 격자를 만든다.
2. 자식 요소들은 할당 받은 한 칸 안에서 배치되거나 크기가 조절된다.

사용법

div#container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 8px;
    background-color: dimgray;
    width: 600px;
    height: 600px;
    margin: 48px;
}

div#container div {
    background-color: lightsalmon;
}

부모의 가로 세로 너비와, 열 간격이 정해지고 나면 행은 자동으로 나눠진다.

각 자식 요소는 자기에게 할당된 한 칸 내에서 크기를 조절하고 배치를 바꿀 수 있다.

div#container div:nth-child(5) {
    width: 100px;
    height: 100px;
}

flex-wrap vs grid

flex-wrap: 여전히 같은 줄, 행들의 개별 조작 어려움
flex-wrap은 한 줄이 넘칠 때 줄을 바꾸는 것이다. 기본적으로는 한 줄이다. 때문에 줄을 바꿔도 각 줄의 높이를 독립적으로 조절하기 어렵다. 아래의 예에서는 줄이 바뀌어 세 줄이 되었지만, 남는 세로 여백을 모든 줄이 나눠가져 각 줄의 아래에 여백이 발생한다.

div#container {
    display: flex;
    flex-wrap: wrap;
    /* ... */
}

div#container div:nth-child(5) {
    width: 300px;
    height: 300px;
}

grid: 각 행은 별도의 행, 높이도 다르게 설정 가능
반면 grid에서는 grid-template-rows를 통해 각 행의 높이를 원하는 대로 설정할 수 있다.

div#container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 2fr 3fr 1fr;
    /*...*/
}