css grid

권세진·2021년 3월 4일
0

css

목록 보기
2/2

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;
}

🧶 한 줄씩 풀어보기

1. 그리드 레이아웃을 설정.

직계자식에게 적용된다.

display: grid;

2. col 추가하기

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 씩 할당한다고 보면된다.

3. row 간 간격 조절하기

grid-row-gap: 7px;

row 간 간격이 7px으로 설정되어있다.

4. col 간 간격 조절하기

grid-column-gap: 4px;

col 간 간격이 4px으로 설정되어있다.

profile
상상을 현실로 꺼내길 좋아하는 프론트엔드 개발자입니다.

0개의 댓글