효율적인 레이아웃을 위해 Flexbox와 CSS 그리드를 결합하는 방법

게시 됨: 2023-02-12

편집자 주: 이 게스트 게시물은 UX 소프트웨어 엔지니어이자 코드 제작 기술을 사랑하는 웹 디자이너인 Abbey Fitzgerald가 작성했습니다.

과거에는 CSS 부동 속성이 웹 사이트에서 요소를 정렬하는 주요 방법 중 하나였습니다. 그리고 그런 방식으로 작업해 본 적이 있다면 복잡한 레이아웃에 항상 이상적인 것은 아니라는 것을 알고 계실 것입니다. 운 좋게도 웹 디자인의 현대 시대에 Flexbox 및 CSS 그리드 덕분에 요소 정렬이 훨씬 더 간소화되었습니다.

Flexbox가 등장했을 때 정렬이 훨씬 쉬워졌고 이후 널리 채택되었습니다. CSS 그리드 레이아웃은 또한 웹 디자인 커뮤니티에서 많은 흥분을 불러일으켰습니다. 얼마 전에 기본 CSS 그리드 레이아웃을 만드는 방법을 살펴보았습니다. 널리 채택되지는 않았지만 브라우저에서 지원을 채택하기 시작했습니다. 완전히 지원되면 디자인에 큰 영향을 미칩니다. 브라우저 지원은 항상 증가하고 있습니다. Can I Use에서 최신 정보를 확인하십시오.

이제 다음 단계가 무엇인지 궁금할 것입니다. 결국 Flexbox와 CSS 그리드 레이아웃은 비슷한 결과를 달성하는 것 같습니다. 그러나 이것은 Flexbox 대 Grid 논쟁이 아니라 함께 사용하는 방법을 배우는 것입니다. Grid와 Flexbox를 더 많이 사용할수록 둘 중 하나만 선택할 필요가 없다는 것을 알게 되었습니다. 가까운 장래에 CSS 그리드 레이아웃이 전체 브라우저를 지원하게 되면 디자이너는 각각의 이점을 결합하여 가장 효율적이고 흥미로운 디자인을 만들 수 있을 것입니다.

기본 Flexbox 및 CSS 그리드 레이아웃 테스트

Flexbox 또는 CSS Grid가 개발 워크플로에 더 잘 작동하는지 확인하려면 둘 중 하나만 사용하는 표준 레이아웃을 만드는 것이 작동 방식과 각각의 장점이 있는지 확인하는 좋은 방법입니다. 머리글, 사이드바, 기본 콘텐츠 및 바닥글이 있는 매우 간단하고 매우 친숙한 레이아웃 유형으로 시작하겠습니다. 이와 같은 간단한 레이아웃은 다양한 요소를 빠르게 배치할 수 있는 방법입니다.

그리고 라이브 사이트에서 절대 변경해서는 안 된다는 점을 기억하십시오. 대신 무료 로컬 WordPress 개발 앱인 Local을 사용해 보세요. 오늘 다운로드하세요!

Flexbox로 레이아웃을 만드는 방법

최근에 저는 Flexbox 카드 레이아웃을 만드는 주제를 다뤘습니다. 이 게시물은 특정 CSS 정보와 함께 Flexbox가 작동하는 방식에 대해 자세히 설명하므로 Flexbox 초보자라면 작동 방식에 익숙해지는 데 도움이 될 것입니다.

플라이휠 그리드에 의한 레이아웃 및 flexbox 레이아웃 스크린샷

이 자습서에서는 빌드할 항목이 다음과 같습니다.

Codepen에서 이것을 참조하십시오.

이 기본 레이아웃의 경우 주요 Flexbox 작업에는 다음이 포함됩니다.

  • 전체 너비 머리글 및 바닥글 만들기
  • 기본 콘텐츠 영역 옆에 사이드바 배치
  • 사이드바 및 기본 콘텐츠 영역의 올바른 크기 조정
  • 탐색 요소 위치 지정

기본 HTML 구조

 <사업부 클래스="컨테이너">
        
    <헤더>
        <탐색>
          <ul>
            <리></리>
            <리></리>
            <리></리>
          </ul>
        </nav>
        <버튼></버튼>
    </헤더>
    <사업부 클래스="래퍼">
        <사이드 클래스="사이드바">
            <h3></h3>
        </aside>
        <섹션 클래스="메인">
            <h2></h2>
            <p></p>
        </섹션>
    </div><!-- /래퍼 -->
    <바닥글>
        <h3></h3>
        <p></p>
    </바닥글>
</div><! -- /컨테이너 -->

플렉스 디스플레이 사용 방법

헤더 스타일링

외부에서 시작하여 내부 작업 display: flex; 컨테이너에 대한 모든 Flexbox 레이아웃의 첫 번째 단계입니다. flex-direction은 열로 설정되어 있으므로 모든 섹션이 서로 아래에 배치됩니다.

 .컨테이너 {
    디스플레이: 플렉스;
    플렉스 방향: 열;
}

전폭 헤더 생성은 display: flex; (헤더는 기본적으로 블록 수준 요소입니다). 이 선언으로 인해 탐색 요소를 쉽게 배치할 수 있습니다.

왼쪽 탐색에는 로고와 두 개의 메뉴 항목이 있고 오른쪽에는 로그인 버튼이 있습니다. 탐색은 헤더에 있으므로 justify-content: space-between; 탐색 및 버튼은 자동으로 간격이 지정됩니다.

한 가지 편리한 점은 텍스트를 정렬하는 것이 얼마나 쉬운가 하는 것입니다. 탐색에서 align-items: baseline; , 모든 탐색 항목이 텍스트의 기준선에 정렬되어 더 균일하게 보입니다.

플라이휠 그리드 및 flexbox에 의한 레이아웃은 콘텐츠 스크린샷을 정당화합니다.
 머리글{
    패딩: 15px;
    margin-bottom: 40px;
    디스플레이: 플렉스;
    justify-content: 공백 사이;
}
헤더 탐색 {
    디스플레이: 플렉스;
    align-items: 기준선;
    목록 스타일 유형: 없음;
}

페이지 콘텐츠 스타일 지정

다음으로 두 항목을 포함하는 래퍼가 있는 사이드바와 기본 콘텐츠 영역이 있습니다. .wrapper 클래스가 있는 div에는 display: flex; 그러나 flex-direction은 위와 다릅니다. 사이드바와 콘텐츠 영역이 쌓이지 않고 서로 옆에 있기 때문에 flex-direction은

다음으로 두 항목을 포함하는 래퍼가 있는 사이드바와 기본 콘텐츠 영역이 있습니다. .wrapper 클래스가 있는 div에는 display: flex도 필요합니다. 그러나 flex-direction은 위와 다릅니다. 사이드바와 콘텐츠 영역이 쌓이지 않고 서로 옆에 있기 때문에 flex-direction은 위의 컨테이너에서 수행된 것과 반대인 행입니다.

 .wrapper {
    디스플레이: 플렉스;
    플렉스 방향: 행;
}
플라이휠 그리드 및 플렉스박스 콘텐츠 영역별 레이아웃 스크린샷

더 눈에 띄는 정보가 여기에 있기 때문에 메인 섹션과 사이드바의 크기는 매우 중요합니다. 메인 콘텐츠는 사이드바 크기의 3배여야 하며 Flexbox를 사용하면 매우 쉽습니다.

 .기본 {
    플렉스: 3;
    오른쪽 여백: 60px;
}
.사이드바 {
   플렉스: 1;
}

이 코드 스니펫에서는 속기를 사용했습니다. flex 값은 flex-grow 속성용입니다. Flex-grow는 동일한 컨테이너 내부의 나머지 유연한 항목에 비해 항목(들)이 증가하는 정도이기 때문에 강력합니다.

전반적으로 Flexbox는 이 간단한 레이아웃을 만드는 데 매우 효율적이었습니다. 목록 항목의 스타일과 탐색과 버튼 사이의 간격을 제어하는 ​​것이 특히 유용했습니다.

CSS 그리드 레이아웃으로 레이아웃을 만드는 방법

효율성을 테스트하기 위한 다음 단계는 CSS Grid를 사용하여 동일한 기본 레이아웃을 빌드하는 것입니다. 페이지 요소는 모두 동일하며 Flexbox 예제와 동일한 방식으로 배치됩니다.

플라이휠 그리드 및 flexbox에 의한 레이아웃 CSS 그리드 레이아웃 스크린샷

Codepen에서 이것을 참조하십시오.

그리드 템플릿 영역

CSS Grid의 유용한 기능 중 하나는 레이아웃을 매우 직관적으로 정의할 수 있는 템플릿 영역을 지정하는 기능입니다. 이 접근 방식을 사용하면 그리드의 영역에 이름을 지정하고 위치 항목을 참조할 수 있습니다. 이 기본 레이아웃의 경우 이름을 지정해야 하는 네 가지 항목이 있습니다.

  • 머리글
  • 메인 콘텐츠
  • 사이드바
  • 보행인

기본 HTML 구조

 <사업부 클래스="컨테이너">
        
    <헤더>
        <탐색>
          <ul>
            <리></리>
            <리></리>
            <리></리>
          </ul>
        </nav>
        <버튼></버튼>
    </헤더>
  
    <사이드 클래스="사이드바">
        <h3></h3>
        <ul>
            <리></리>
        	<리></리>
	<리></리>
	<리></리>
	<리></리>
          </ul>
    </aside>
    <섹션 클래스="메인">
        <h2></h2>
        <p></p>
         <p></p>
  </섹션>
    <바닥글>
        <h3></h3>
        <p></p>
    </바닥글>
</div>

그리드 컨테이너에서 이러한 영역을 순서대로 정의할 것입니다. 그리는 것과 같습니다. 또한 가독성을 위해 간격을 두겠습니다.

 그리드 템플릿 영역:
        "헤더 헤더"
        "사이드바 메인"
        "바닥글 바닥글";

사이드바가 메인 앞에 어떻게 나열되었는지 주목하십시오. 이를 전환하면 페이지의 순서도 변경됩니다. 현재 사이드바는 왼쪽에 메인 콘텐츠는 오른쪽에 있지만 필요에 따라 쉽게 변경할 수 있습니다.

참고할 사항: 이러한 이름은 스타일과 "연결"되어야 합니다. grid-template-areas가 선언되었기 때문에 헤더가 실제로 어디에 속하는지 알 수 없습니다. 헤더 블록에서 grid-area: header; 추가해야 합니다.

 머리글{
    그리드 영역: 헤더;
    패딩: 20px 0;
    디스플레이: 그리드;
    그리드-템플릿-열: 1fr 1fr;
}

HTML 구조는 Flexbox 예제와 동일하지만 그리드 레이아웃을 생성하는 CSS는 상당히 다릅니다.

 .컨테이너{
    최대 너비: 900px;
    배경색: #fff;
    여백: 0 자동;
    패딩: 0 60px;
    디스플레이: 그리드;
    그리드 템플릿 열: 1fr 3fr;
    그리드 템플릿 영역:
        "헤더 헤더"
        "사이드바 메인"
        "바닥글 바닥글";
    그리드 간격: 50px;
}

CSS 그리드 레이아웃 작업을 시작하려면 display: grid; 컨테이너에 설정합니다. grid-template-columns는 페이지의 전체 구조를 제공하기 위해 여기에서 선언됩니다. Flexbox 예제에서 크기 조정을 위해 .main 클래스가 flex-grow 3으로 설정되고 사이드바에 flex-grow가 1로 설정되었던 것을 기억하십니까? 여기서 grid-template-columns는 1fr 및 3fr로 설정되었습니다. 이것은 그리드가 분수 단위로 형성되는 곳입니다. 이 값을 사용하면 두 개의 열이 있고 너비가 같지 않음이 분명합니다. 3fr로 설정된 기둥은 다른 기둥보다 3배 더 넓습니다. 이것은 사이드바가 콘텐츠 영역보다 더 좁게 나타나는 방식을 설명합니다.

그리드 스크린샷을 위한 플라이휠 그리드 및 flexbox 기본 열에 의한 레이아웃

다음으로 컨테이너에 사용되는 fr 단위를 헤더에 맞게 조정해야 합니다. 그리드 템플릿 열이 1fr 및 1fr로 조정되었습니다. 이렇게 하면 두 개의 동일한 크기의 열이 있고 탐색 항목과 단추가 맞을 것입니다.

 머리글{
    그리드 영역: 헤더;
    디스플레이: 그리드;
    그리드-템플릿-열: 1fr 1fr;
}
플라이휠 거드 및 플렉스박스 레이아웃에 의한 레이아웃 그리드 헤더 스크린샷

버튼을 배치하려면 justify-self를 사용하고 end로 설정하기만 하면 됩니다.

 헤더 버튼 {
    정당화-자체: 끝;
}

내비게이션은 다음과 같은 위치에 배치됩니다.

 헤더 탐색 {
    정당화-자체: 시작;
}

전체 너비 바닥글은 내용이 중간에 있기 때문에 다른 열을 설정할 필요가 없습니다.

Flexbox와 CSS 그리드를 모두 사용하여 레이아웃을 만드는 방법

이제 각 메서드가 개별적으로 수행할 수 있는 작업을 살펴보았으므로 Flexbox와 CSS 그리드 레이아웃을 결합하여 더 복잡한 것을 만들 차례입니다.

플라이휠 그리드와 플렉스박스 결합 레이아웃에 의한 레이아웃

Codepen에서 이것을 참조하십시오.

그리드를 진행하기 위한 기본 개요는 다음과 같습니다.

플라이휠 그리드 및 플렉스박스 결합 스타터에 의한 레이아웃

Codepen에서 이것을 참조하십시오.

디자인이 열과 행 모두에 어떻게 의존하는지 확인하십시오. 이 레이아웃은 일렬로 정렬되고 양방향으로 일관되게 작동해야 하므로 CSS 그리드를 사용하는 것이 전체 레이아웃에 효율적입니다.

플라이휠 그리드 및 플렉스박스 그리드 스케치에 의한 레이아웃

계획은 이와 같은 레이아웃의 핵심입니다. 문자 그대로 먼저 스케치하고 물건이 어떻게 쌓이는지 확인하는 것이 좋습니다. 코드를 시작하려면 display: grid; 필수적이다; 그것 없이는 이러한 유형의 레이아웃을 사용할 수 없습니다. 여기서 주목해야 할 한 가지는 콘텐츠 블록 사이에 간격이 있다는 것입니다. 이는 grid-column-gap 및 grid-row-gap으로 달성되었습니다.

 .컨테이너 {
  디스플레이: 그리드;
  그리드 템플릿 열: 0.4fr 0.3fr 0.3fr;
  그리드 열 간격: 10px;
  그리드 행 간격: 15px;
}

이 레이아웃을 위해 분수 단위가 다시 사용되었으며 이제 세 개의 영역이 필요합니다. 0.4fr의 첫 번째 값은 0.3fr인 두 번째 및 세 번째 값보다 약간 더 넓습니다.

열 및 행 레이아웃

처음부터 다이어그램을 참조하는 것이 중요합니다. 상단부터 헤더가 배치되는 방식입니다. 모든 열과 한 행에 걸쳐 있습니다.

 .머리글 {
  그리드 열 시작: 1;
  그리드 열 끝: 4;
  그리드 행 시작: 1;
  그리드 행 끝: 2;
  배경색: #d5c9e2;
}

속기를 사용하려면 시작 값과 끝 값이 같은 줄에 있고 슬래시로 구분됩니다. 다음과 같이 표시됩니다.

 .머리글 {
  그리드 열: 1/4;
  그리드 행: 1/2;
  배경색: #55d4eb;
}

다른 모든 항목을 배치하려면 적절한 그리드 및 열 값을 CSS에 추가하기만 하면 됩니다. 여기에서 하나씩 살펴보는 대신 이 예제는 Codepen에 있습니다.

그리드 레이아웃이 구축된 후 콘텐츠를 미세 조정하는 것이 다음 단계입니다.

항해

Flexbox는 헤더 요소를 배치하는 데 적합합니다. 기본 레이아웃 예제는 justify-content: space-between으로 이에 대해 다루었습니다. justify-self: start;가 있어야 하는 그리드 예제 탐색 및 justify-self: end; 하지만 Flexbox는 탐색을 위한 간격을 더 쉽게 만들었습니다.

 .머리글 {
  그리드 열: 1/4;
  그리드 행: 1/2;
  색상: #9f9c9c;
  텍스트 변환: 대문자;
  border-bottom: 2px 솔리드 #b0e0ea;
  패딩: 20px 0;
  디스플레이: 플렉스;
  justify-content: 공백 사이;
  정렬 항목: 중앙;
}
플라이휠 그리드와 플렉스박스 결합 메뉴 스크린샷에 의한 레이아웃

여기에서도 동일한 형식을 따릅니다. 로고, 메뉴 항목 및 버튼은 간격을 위해 Flexbox의 justify-content를 활용했습니다.

열 콘텐츠 그리드

요소가 한 방향으로 정렬되어야 하는 경우, 즉 더 "일차원적"인 경우 일반적으로 Flexbox가 더 나은 옵션입니다. 또한 Flexbox는 요소를 동적으로 확장하는 데 적합합니다. 아마도 당신은 display:flex; 부모 요소에 대해, 자식 요소에 대해 flex 속성을 지정합니다. 이 기술을 사용하면 멋진 선이 형성되고 모든 요소의 높이가 같은지 확인하는 효율적인 방법입니다.

텍스트와 버튼이 있는 행 콘텐츠

"추가 콘텐츠" 섹션에 텍스트와 버튼이 있는 세 개의 영역이 추가되었습니다. Flexbox를 사용하면 세 열에 대해 설정된 너비를 쉽게 유지할 수 있습니다.

플라이휠 그리드에 의한 레이아웃 및 flexbox 결합 레이아웃 추가 콘텐츠 스크린샷
 .추가의 {
  그리드 열: 2/4;
  그리드 행: 4/5;
  패딩: 1렘;
  디스플레이: 플렉스;
  플렉스 랩: 랩;
  테두리: 1px 솔리드 #ececec;
  justify-content: 공백 사이;
}

하나의 Flexbox 예외

예, 저는 Flexbox가 1차원 레이아웃, 그리드 또는 열에 더 좋다고 말했지만 Flexbox를 사용하여 최신 CSS 카드 디자인 레이아웃을 만드는 방법 게시물을 읽으면 "마지막 행" Flexbox 해킹이 시연되었습니다. 짝수의 카드 없이도 행과 열의 균형을 유지합니다.

플라이휠 그리드와 플렉스박스 결합 이미지 그리드에 의한 레이아웃
 .관련 이미지 {
  그리드 열: 1/3;
  그리드 행: 5/6;
  디스플레이: 그리드;
  그리드-템플릿-열: repeat(4,1fr);
  그리드 간격: 1rem;
}
.관련 이미지 .icon {
    배경색: 흰색;
    플렉스: 11150px;
}

설계 접근법 요약

기본적으로 여기서 취한 접근 방식은 전체 레이아웃(및 디자인에서 선형적이지 않은 모든 것)에 CSS 그리드 레이아웃을 활용하는 것이었습니다. 그리드 콘텐츠 영역 내에서 Flexbox는 그리드 영역 내의 스타일을 정렬하고 미세 조정하는 데 사용되었습니다.

자원

Flexbox 및 CSS 그리드 레이아웃에 대한 훌륭한 리소스가 너무 많아서 언급하기에는 너무 많습니다. 다음은 올바른 방향으로 시작하고 레이아웃에 영감을 주는 몇 가지입니다.

  • 상자 정렬 치트시트
  • Jen Simmons의 레이아웃 연구실
  • 그리드에 대한 완벽한 가이드
  • Flexbox에 대한 완벽한 가이드

이 연습을 통해 CSS 그리드 레이아웃과 Flexbox를 모두 사용하여 레이아웃을 빌드하는 방법에 대한 더 나은 아이디어를 얻었기를 바랍니다. 이러한 새로운 기술에 대해 어떻게 생각하십니까? 개발 프로세스에 어떤 도움이 되었습니까?