grid는 flex와 비교해
flex는 col이나 row 중 하나를 주요 축으로 하여 구성하는 방식이라면
grid는 좀 더 복잡한 2차원 레이아웃을 구성할 수 있는 시스템이다.
백번 듣는 것보다 직접 보는 게 훨씬 좋다.
직접 해보자.
위와 같은 레이아웃을 그리드로 구현한 css는 아래와 같다.
.video-wrapper {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-row-gap: 7px;
grid-column-gap: 4px;
}
직계자식
에게 적용된다.
display: grid;
grid-template-columns: repeat(4, 1fr);
여기서 repeat(4, 1fr)
은 1fr 1fr 1fr 1fr
과 같다.
그리고 fr은 그리드 내부를 일정한 비율로 분할하는 단위이다.
위 예제의 1fr 1fr 1fr 1fr
는 1fr이 4개가 있기 때문에
1/4, 1/4, 1/4, 1/4
과 같다.
그럼 2fr 1fr 1fr 은 뭘까?
2/4, 1/4, 1/4
이렇게 이해하면 된다.
다른 단위와 혼용도 가능한데
100px 1fr 1fr
은 첫번째 그리드를 100px을 할당하고 남은 공간을 기준으로 1/2 씩 할당한다고 보면된다.
grid-row-gap: 7px;
row 간 간격이 7px으로 설정되어있다.
grid-column-gap: 4px;
col 간 간격이 4px으로 설정되어있다.