[CSS] 자식 div 동일하게 나누기

Web

Jet Grow 2023. 7. 22. 19:35

UI를 만들다보면, 아이템을 동일한 넓이로 나눠야할 경우가 있다.

내가 기존에 쓰던 방식이 2가지가 있다.

width를 직접 지정하지 않아도 된다는 점은 좋다.

하지만, 아이템 개수가 달라질때마다 분모의 숫자를 일일이 바꿔야 한다.

flex를 이용한 방식으로, 일반적인 상황에서는 문제가 없다.

하지만, flex는 content-size를 기준으로 넓이를 설정하기 때문에

아이템의 padding이 동일하지 않은 상황에서는 각각의 width가 달라지게 된다.

해결방법

간단하다. 그냥

부모에 grid를 적용하면 된다.

display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;