이 블로그 포스트에서는 flex-wrap으로 아이템들을 묶음 처리한 후 오른쪽에 나타나는 여분의 공백을 제거하는 방법과 동시에 아이템들 사이에 동일한 간격을 유지하는 방법에 대해 논의하겠습니다. 이 문제는 작은 화면에서 아이템들이 줄바꿈되어야하지만 다른 특정한 간격을 유지해야하는 다른 아이템이 있는 경우에 흔히 발생합니다. 특히 8px입니다. 모든 아이템, 줄바꿈되지 않는 아이템을 포함하여 모든 아이템들 사이에 8px 간격을 유지하고 줄바꿈이 발생할 때 공백이 남지 않도록하는 것이 문제입니다.
CSS Grid 사용하기
이 문제에 대한 간단한 해결책은 flexbox 대신 CSS grid를 사용하는 것입니다. CSS grid는 열 배치와 크기 조정에 대해 더 많은 제어권을 제공하여 원하는 결과를 쉽게 얻을 수 있게 해줍니다. CSS grid를 사용하여 코드를 수정하는 예제를 살펴보겠습니다:
.container {
display: grid;
grid-template-columns: 1fr 80px;
gap: 8px;
max-width: 500px;
}
.wrap-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 8px;
}
.item {
height: 80px;
background-color: blue;
color: white;
}
.non-wrap-item {
height: 80px;
background-color: green;
color: white;
}
CSS grid를 이용하여 열 너비와 간격을 정확하게 정의할 수 있습니다. container 클래스는 두 개의 열로 구성된 그리드 레이아웃을 설정하는데, 첫 번째 열은 사용 가능한 공간에 따라 유연한 너비를 가지며 최대 너비는 500px입니다. wrap-container 클래스는 repeat() 함수를 사용하여 최소 너비 80px과 남은 공간을 채우는 유연한 너비를 가진 열을 자동으로 생성합니다. 이렇게 하면 아이템들이 올바르게 줄바뀌면서 8px 간격을 유지할 수 있습니다. .non-wrap-item 클래스는 줄바꿈되지 않는 아이템의 스타일을 정의하며 너비는 항상 80px입니다.
대체 CSS Grid 접근 방식
열에 대한 명시적인 너비를 지정하지 않은 대체 CSS grid 접근 방식을 선호한다면, 마지막 열을 제외한 모든 열을 포함하도록 grid-column 속성을 사용하여 줄바꿈되지 않는 아이템을 확장시킬 수 있습니다. 코드를 수정하는 예제를 살펴보겠습니다:
.container {
display: grid;
max-width: 600px;
grid-template-columns: repeat(auto-fit, 80px);
column-gap: 8px;
}
.wrap-container {
display: grid;
grid-column: 1 / -2;
grid-template-columns: inherit;
column-gap: inherit;
grid-template-rows: 80px;
grid-auto-rows: 0;
overflow: hidden;
outline: 1px solid red;
}
.item {
background-color: blue;
color: white;
}
.non-wrap-item {
background-color: green;
color: white;
}
이 접근 방식은 wrap-container 클래스에 grid-column 속성을 할당하여 첫 번째 열부터 마지막 열에서 하나 앞까지 확장되도록 합니다. 이렇게 하면 마지막 열은 줄바꿈되지 않는 아이템에 예약되며, 너비는 80px로 고정됩니다.
결론
요약하면, 아이템들 사이에 동일한 간격을 유지하고 줄바꿈하는 동안 그들의 위치를 유지하는 것은 어려울 수 있습니다. CSS grid를 이용하여 유연한 열 너비와 간격을 정의하여 올바른 줄바꿈과 간격을 유지할 수 있습니다. 이 블로그 포스트에서 제공된 예제를 참고하여 이 해결책을 자신의 코드에 구현하세요. CSS 클래스와 속성을 사용자의 상황과 스타일링 요구에 맞게 적절히 조정하는 것을 잊지 마세요.
CSS grid를 사용하면 아이템을 줄바꿈한 후 오른쪽에 나타나는 여분의 공백을 손쉽게 제거하면서 줄바꿈되지 않는 아이템을 포함한 모든 아이템들 사이에 동일한 간격을 유지할 수 있습니다.
CSS grid의 강력한 기능을 활용하여 레이아웃을 완전히 제어하고 원하는 간격을 석역하는 것은 디자인의 무결성을 해치지 않으면서 가능합니다. 그러니 이 기능을 사용해 보고 아이템의 줄바꿈으로 인한 빈 공백에 대한 작별인사를 해보세요.
참고 자료 :
같은 카테고리의 다른 글 보기 :
