CSS 그리드를 사용하여 자체 중심 맞춤 전체 너비 요소 만들기

때때로 어떤 아이디어가 너무 강하게 와 닿아 왜 그 아이디어를 생각해 본 적이 없는지 모를 때가 있습니다. CSS Grid는 creating new types of layouts에서 뛰어납니다. 또한 오래된 디자인 패턴의 코드를 단순화하는 데에도 놀랍습니다.

전체 너비 배경색을 사용하여 스트라이프 내부에 가운데 정렬된 텍스트 열을 만들 때 아이디어가 떠올랐습니다.

전통적으로 이 문제는 마크업에 <div>를 추가하면 해결됩니다. HTML은 다음과 같습니다.

<section class="stripe">
    <div class="stripe__content">
        <h1>Hello Stripe world</h1>
        <p>More stripe content can go here ...</p>
    </div>
</section>

외부<section>를 사용하여 배경색을 적용하고 내부<div>를 사용하여 콘텐츠의 크기를 조정하고 중앙에 배치합니다. 이것은 결코 마크 업의 위기가 아닙니다. CSS도 비교적 깨끗합니다.

.stripe {
    background-color: lavender;
    padding: 2rem 0;
}
.stripe__content {
    width: 90vw;
    max-width: 1200px;
    margin: auto;
}

이것은 큰 위반이 아니었기 때문에 이러한 목적으로 CSS Grid를 사용하는 것에 대해 생각해 본 적이 없습니다. 저는 Grid를 사용하여 다른 디자인 내부에 전폭 줄무늬를 만들었지만 이렇게 단순한 것은 없었습니다.

이 응용 프로그램의 번개 모양이 나를 완전히 당황하게 만들었습니다. 속성이 grid-template-columns 이지만 단일 열에 사용할 수 있습니다. justify-content와 약간의 패딩을 더하면 짜잔!

추가 마크업 없이 너비가 제한된 콘텐츠 세트가 있는 컬러 스트라이프!

<section class="stripe">
    <h1>Hello Stripe world</h1>
    <p>More stripe content can go here ...</p>
</section>

.stripe {
    display: grid;
    grid-template-columns: minmax(auto, 1200px);
    justify-content: center;

    background-color: lavender;
    padding: 2rem 1rem;
}

이 방법은 그리드에 대해 하나의 열을 생성합니다. 콘텐츠에 따라 축소할 수 있도록 최소 크기는 auto이고 최대 크기는 1200px입니다. 이렇게 하면 적절한 크기의 요소가 생성됩니다. justify-content 마진을 처리하는 대신 auto를 사용합니다. 이 방법에서는 모바일 너비에 대한 왼쪽/오른쪽 패딩이 필요합니다.

박스 모델의 관점에서 보면 이는 타당합니다. 패딩은 내부 간격입니다. 우리의 예전 방식에서는 항상 약간 해킹당하는 느낌이 들던 여백을 사용하고 있습니다.

나는 이 사용 사례에 대해 생각해 본 적이 없었지만, 그것이 나에게 떠오를 때 매우 의미가 있었습니다. Grid가 우리의 주요 레이아웃 메커니즘 중 하나인 미래에 접근함에 따라 이와 같은 애플리케이션을 더 많이 보게 될 것입니다.

그리드는 복잡한 레이아웃을 위한 것이 아니라 탄력적이고 간단한 레이아웃을 만드는 데도 사용됩니다. 언뜻 보기에 Grid를 사용하는 것처럼 보이지 않지만 Grid가 더 좋아질 것 같은 다른 레이아웃은 무엇입니까?

Bryan과 최신 정보 유지

내가 제작하는 모든 콘텐츠를 최신 상태로 유지하고 싶다면 여기뿐만 아니라 다른 플랫폼에서도 나를 팔로우하세요.

YouTube for my videos

My Patreon for early updates

Watch or request a Design or Code Review at peerreviews.dev