CSS Gap은 Flex와 Grid의 여백에 대한 밝은 미래를 만듭니다.

** 빠른 경고: Gap for Flex는 현재 Firefox에서만 작동합니다. **

CSS 그리드 사양에서 내가 가장 좋아하는 부분 중 하나는 grid-gap 입니다. 내 그리드에 "내부 여백"을 훨씬 쉽게 만들 수 있습니다.

여백과 다양한 맥락에서 여백을 지우기 위해 우리가 수행하는 해킹은 오랫동안 CSS에 대한 나의 주요 골칫거리 중 하나였습니다. Grid의 격차는 정말 의미가 있습니다.

결과적으로 그것은 다른 사람들에게도 많은 의미가 있었습니다. W3C는 grid-gap를 단순히 gap로 전환하고 Flexbox 및 다중 열에서 허용하도록 권장했습니다.

이 자습서에서는 과거에 Flex를 사용하여 여백을 추가한 방법과 해킹 없이 이러한 내부 여백을 가질 수 있도록 만드는 방법gap을 살펴보겠습니다.

간단한 Flexbox 그리드의 여백

이 예에서는 일련의 상자를 선택하고 Flexbox를 사용하여 그리드 스타일을 만든 다음 여백을 통해 상자를 구분합니다.

기본 HTML부터 시작하겠습니다. Aflex-container 및 다중flex-item s.

<div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
</div>

flex 의 작은 대시를 추가하여 모든 콘텐츠를 나란히 배치하고 width 계산을 약간 넣어 항목 크기를 조정한 다음 flex-wrap 로 래핑할 수 있습니다.

.flex-item {
    width: calc(100% / 3);
    margin-right: 1rem;
    margin-bottom: 1rem;
}

이것은 컨테이너 너비의 1/3인 완벽한 크기의 상자를 제공합니다. 각 항목 사이에 세로 및 가로로 여백을 추가해 보겠습니다.

.flex-item { width: calc(100% / 3); margin-right: 1rem; margin-bottom: 1rem;}

어 오! 완벽한 크기의 3분의 1은 이제 더 이상 플렉스 레이아웃에 3개에 맞지 않습니다! 그래도 행 사이에 좋은 여백이 있습니다!

추가 여백 공간을 처리하기 위해 너비 계산을 조정해야 합니다. 또한 세 번째 항목마다 margin-right를 지워야 합니다.

이제 두 개의 여백1rem이 있고 세 항목 모두의 너비에서 동일하게 여백2rem을 빼야 합니다.

flex-item {
    // width: calc(100% / 3);
    width: calc((100% / 3) - (2rem / 3)); // one-third - two margins divided equally among 3 items
    margin-right: 1rem;
    margin-bottom: 1rem;
}
.flex-item:nth-child(3n) {
    margin-right: 0;
}

너무 복잡해 보입니까? 그것은 나에게 않습니다. 이 작업을 수행하는 더 쉬운 방법이 있지만 열 사이에 완벽한 간격1rem을 제공하지 않습니다. 이 복잡한 코드는 또한 반응형 디자인을 훨씬 더 복잡하게 만듭니다.

모든 브라우저의 Flexbox에서 gap 속성을 사용할 수 있게 되면 코드가 훨씬 깔끔해집니다. 또한 항목의 너비 설정(Grid 세계에서 약간의 코드 냄새)에서 flex-grow , flex-shrink 및 flex-basis 속성을 사용하는 것으로 마이그레이션할 수 있습니다.

Flex에서 내부 여백을 설정하는 Gap 방식

간격을 활용하면 대부분의 너비 해킹을 수행할 필요가 없습니다. 이것은 또한 우리가 플렉스 증가/축소 값을 사용하는 것으로 돌아갈 수 있게 합니다.

이 경우 컨테이너에는 여전히 display: flex 및 flex-wrap: wrap가 있지만 이제 gap 값도 추가합니다. 이것은 행과 열 간격을 모두 나타내는 줄임말입니다. Check Mozilla Developer Network's documentation for all the different methods .

거기에서 각 플렉스 항목에 너비를 설정하는 대신 플렉스 증가, 축소 및 기본 값을 설정합니다. flex-basis는 브라우저가 생성할 열 수를 결정하는 방법입니다. 이를 위해 여전히 calc()를 사용하지만 결과 코드는 훨씬 깔끔합니다.

.flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
.flex-item {
    flex: 1 1 calc((100% / 3) - 2rem);
}

분별력 있는 눈은 또한 이것이 항목이 충분하지 않은 행의 공간을 채우기 위해 마지막 항목이 늘어나도록 허용한다는 것을 알아차릴 것입니다. Grid는 우리에게 적합하지 않으며 너비 기반 Flex 예제는 적합하지 않습니다.

보너스: Gap을 사용하면 응답성을 더 쉽게 얻을 수 있습니다.

원래 예에서 서로 다른 중단점의 열 수를 변경하려면 너비를 다시 계산하고 nth-child 선택기를 변경하여 여백을 지워야 합니다.

우리의 gap 예에서 우리가 해야 할 일은 flex-basis 를 재설정하는 것뿐입니다.

.flex-item {
    flex: 1 1 100%; // 1 across at mobile
}
@media (min-width: 640px) {
    .flex-item {
        flex-basis: calc((100% / 2) - 1rem); // 2 across at tabletish
    }
}
@media (min-width: 1024px) {
    .flex-item {
        flex-basis: calc((100% / 3) - 2rem); // 3 across at desktop
    }
}

이와 같은 디자인 패턴에 대해 거짓말을 하지 않겠습니다I still prefer CSS Grid. 하지만 이 놀라운 새 기능에 대한 여러 사용 사례를 볼 수 있기를 바랍니다.

미래를 향하여

현재 gap는 Firefox에서만 지원됩니다. 그러니 이 기사가 당신을 흥분시켰다면 정중히 사과드립니다! 다른 브라우저가 이를 따라잡을 때까지 기다려야 합니다. 바라건대, 그들은 여백으로 인한 개발자의 고통에 주목하고 조만간 우리에게 이 힘을 줄 것입니다.