CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다

Feb 15, 2025 am 08:45 AM

CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다 이 기사에서는 응답 형 멀티 컬럼 웹 사이트 레이아웃을 만들어 CSS 그리드가 작동하는 것을 보게 될 것입니다. CSS 그리드는 요즘 웹 개발의 새로운 트렌드입니다. 테이블 레이아웃과 플로트는 잊어 버리십시오 : 웹 사이트를 디자인하는 새로운 방법은 이미 여기에 있습니다! 이 기술은 소수의 CSS 규칙으로 여러 레이아웃 영역을 정의하는 2 차원 그리드를 소개합니다. 그리드는 모든 것을 쉽게 할 수 있으므로 960GS 또는 부트 스트랩 그리드와 같은 타사 프레임 워크를 만들 수 있습니다! 이 기능은 모든 주요 브라우저에서 지원되지만 Internet Explorer는 이전 버전의 사양을 구현합니다. 그리드 레이아웃을 처음 사용하는 경우 CSS 그리드에 대한 초보자 안내서를 확인하십시오. 키 테이크 아웃

CSS 그리드 레이아웃은 다중 열 레이아웃의 생성을 단순화하여 플로트 및 디스플레이 테이블과 같은 오래된 기술의 필요성을 제거합니다. CSS 그리드는 그리드 영역을 쉽게 재배치하고 크기를 조정할 수 있으므로 부트 스트랩과 같은 전통적인 CSS 프레임 워크에 비해보다 유연하고 직관적 인 설계 방법이됩니다. CSS 그리드의 구현에는 디스플레이가있는 컨테이너를 정의하는 것이 포함됩니다 : 그리드, 열 및 행 설정 및 간단한 CSS 규칙을 사용하여 지정된 그리드 영역에 요소를 배치하는 것이 포함됩니다. CSS 그리드는 본질적으로 반응이 좋으므로 최소한의 미디어 쿼리를 사용하여 다양한 화면 크기에 대한 컨텐츠를 쉽게 재구성 할 수 있습니다. 인터넷 익스플로러와 같이 CSS 그리드를 완전히 지원하지 않는 브라우저의 경우, 인라인 블록 및 미디어 쿼리를 사용하는 폴백 스타일은 레이아웃이 여전히 효과적으로 렌더링되도록합니다.

CSS 그리드 및 Flexbox는 복잡한 설계 요구 사항을 처리하여 CSS 그리드의 호환성과 현대 웹 디자인의 다양성을 보여줄 수 있습니다.

우리가 구축 할 내용 그래서, 우리는 헤더, 메인 컨텐츠 영역, 오른쪽에 사이드 바, 스폰서 목록 및 바닥 글을 사용하여 일반적인 웹 사이트 레이아웃을 만들도록 요청 받았습니다.

다른 개발자는 이미이 작업을 해결하려고 시도했으며 플로트, 디스플레이 테이블 및 일부 ClearFix 해킹과 관련된 솔루션을 제시했습니다. 이 기존 레이아웃을 "초기"라고합니다. Codepen에서 Sitepoint (@SitePoint)에 의해 플로트가있는 펜 SP : 멀티 컬럼 레이아웃 참조. 최근까지, 부유물은 그러한 레이아웃을 만들기위한 최상의 옵션으로 간주되었습니다. 그 전에는 HTML 테이블을 사용해야했지만 많은 단점이있었습니다. 구체적으로, 이러한 테이블 레이아웃은 매우 단단하며 많은 태그 (테이블, tr, td, th 등)가 필요하며 의미 적 으로이 태그는 레이아웃을 설계하지 않고 테이블 데이터를 제시하는 데 사용됩니다.

. 그러나 CSS는 계속 발전하고 있으며 이제 CSS 그리드가 있습니다. 개념적으로, 그것은 오래된 테이블 레이아웃과 유사하지만 더 유연한 레이아웃을 가진 시맨틱 HTML 요소를 사용할 수 있습니다. 그리드 계획 <:> 가장 먼저 : 우리는 문서의 기본 HTML 구조를 정의해야합니다. 그 전에는 초기 예제가 어떻게 작동하는지 간단히 이야기 해 봅시다. 다음 메인 블록이 있습니다.

.Container는 왼쪽과 오른쪽에 작은 여백이있는 글로벌 래퍼입니다. .Content-area-Wrapper는 메인 .Content-Area (공간 마이너스 1REM의 66.6%를 차지하고 왼쪽으로 떠 다니는)와 .sidebar (오른쪽에 33.3%를 차지하고 있음)를 감싸고 있습니다. ). 래퍼 자체는 Clearfix로 할당됩니다 .sponsors-wrapper에는 스폰서의 로고가 포함되어 있습니다. 내부에는 디스플레이 속성이 테이블에 설정된 .sponsors 섹션이 있습니다. 각 스폰서는 차례로 테이블 셀로 표시됩니다. . 발거는 우리의 바닥 글이며 공간의 100%에 걸쳐 있습니다.

우리의 새로운 레이아웃은 초기 레이아웃과 매우 유사하지만 한 가지 예외는 다음과 같습니다. 클리어 픽스가 더 이상 필요하지 않기 때문에 .main-header 및 .content-area-rapper 랩퍼를 추가하지 않습니다. 다음은 html의 새 버전입니다 :
당신은 신체를 글로벌 .container로 활용할 수 있습니다. 이 경우 선호하는 문제 일뿐입니다. 대체로, 우리는 6 가지 주요 영역을 가지고 있습니다 :

로고
메뉴 주요 내용 사이드 바 스폰서
바르는
일반적으로 모바일 우선 접근 방식을 구현하는 것이 좋습니다. 즉, 모바일 레이아웃에서 시작한 다음 더 큰 화면에 스타일을 추가합니다. 이 경우에는 이미 소규모 스크린 장치에서 선형화 된보기로 돌아간 초기 레이아웃을 조정하기 때문에이 경우에는 필요하지 않습니다. 따라서 그리드의 구현에 중점을두고 응답 성과 폴백 규칙에 대해 이야기하는 것으로 시작하겠습니다. 따라서 우리 체계로 돌아가서 그리드 열을 어떻게 정렬 할 수 있는지 확인하십시오.

그래서, 나는 3 개의 열 (빨간색으로 강조 표시됨)과 4 개의 행 (파란색으로 강조 표시됨)을 제안합니다. 로고와 같은 일부 영역은 하나의 열만 차지하는 반면, 주요 컨텐츠와 같은 다른 영역은 여러 열에 걸쳐 있습니다. 나중에 우리는 레이아웃을 쉽게 수정하거나 주변의 영역을 이동하거나 새 제품을 추가 할 수 있습니다.
계획에 따라 각 영역에 고유 한 이름을 부여하십시오. 아래에 정의 된 레이아웃에 사용됩니다
이제 디스플레이 속성을 그리드로 설정하고 3 개의 열을 정의하고 메인 컨테이너의 왼쪽과 오른쪽에 작은 여백을 추가하십시오.
<div> class="container"> <header> class="logo"></header> <h1 id="gt">></h1><a> href="#"></a>DemoSite>> > <nav> class="main-menu"></nav> <ul>></ul> <li> class="main-menu__item"></li><a> href="#"></a>Our clients>> <li> class="main-menu__item"></li><a> href="#"></a>Products>> <li> class="main-menu__item"></li><a> href="#"></a>Contact>> > > <main> class="content-area"></main> <h2 id="gt">></h2>Welcome!> > Content > > <aside> class="sidebar"></aside> <h3 id="gt">></h3>Additional stuff> <ul>></ul> <li>></li>Items> <li>></li>Are> <li>></li>Listed> <li>></li>Here> <li>></li>Wow!> > > <section> class="sponsors-wrapper"></section> <h2 id="gt">></h2>Our sponsors> <section> class="sponsors"></section> <figure> class="sponsor"></figure> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032567395.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다" > src="https://via.placeholder.com/150x150"> > <figure> class="sponsor"></figure> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032567395.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다" > src="https://via.placeholder.com/200x150"> > <figure> class="sponsor"></figure> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032567395.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다" > src="https://via.placeholder.com/100x200"> > <figure> class="sponsor"></figure> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032567395.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다" > src="https://via.placeholder.com/100x100"> > <figure> class="sponsor"></figure> <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032567395.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다" > src="https://via.placeholder.com/200x200"> > > > <footer> class="footer"></footer> > © 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved. > > </div>> 
디스플레이 : 그리드는 그리드 컨테이너를 정의하고 어린이를위한 특수 서식 컨텍스트를 설정합니다. FR은 "그리드 컨테이너의 여유 공간의 분수"를 의미하는 특수 장치입니다. 2 6 4는 우리에게 12, 6 / 12 = 0.5를 준다. 그것은 중간 열이 여유 공간의 50%를 차지할 것임을 의미합니다.
나는 또한 행과 열 사이에 약간의 간격을 추가하고 싶습니다 :
이 작업을 수행 한 후, 우리는 개별 영역과 함께 일할 수 있습니다. 그러나이 섹션을 마무리하기 전에 몇 가지 일반적인 스타일을 빨리 추가해 봅시다 :

.logo { grid-area: logo; } .main-menu { grid-area: menu; } .content-area { grid-area: content; } .sidebar { grid-area: sidebar; } .sponsors-wrapper { grid-area: sponsors; } .footer { grid-area: footer; } 
좋아요! 이제 우리는 첫 번째 대상으로 진행할 수 있습니다. 첫 번째 대상은 헤더가 될 것입니다.

헤더 디자인 우리의 헤더는 3REM으로 특정 높이를 설정 해야하는 첫 번째 행을 차지합니다. 초기 레이아웃에서 이것은 헤더 래퍼의 높이 속성을 할당하여 해결됩니다.

또한 로고와 메뉴는 수직으로 중간에 정렬되며, 라인 높이 트릭을 사용하여 달성됩니다.

<span><span>.container</span> {
</span>  <span>display: grid;
</span>  <span>margin: 0 2rem;
</span>  <span>grid-template-columns: 2fr 6fr 4fr;
</span><span>}
</span>

그러나 CSS 그리드를 사용하면 상황이 더 간단해질 것입니다. CSS 해킹이 필요하지 않습니다.

. 첫 번째 행을 정의하여 시작하십시오

로고는 하나의 열만 차지 해야하는 반면 메뉴는 두 열에 걸쳐 있어야합니다. 우리는 위에 지정된 그리드 지역 이름을 참조하는 그리드-템플릿-영역 속성의 도움으로 의도를 표현할 수 있습니다.

여기서 무슨 일이야? 글쎄, 로고를 한 번만 말함으로써, 우리는 그것이 가장 왼쪽 열인 하나만 차지하고 있는지 확인하고 있습니다. 메뉴 메뉴는 메뉴가 중간과 가장 오른쪽으로 된 두 개의 열을 차지하고 있음을 의미합니다. 이 규칙이 얼마나 간단한 지 확인하십시오!

이제 y 축에 로고를 정렬하십시오

메뉴는 수직으로 중앙에 있고 오른쪽으로 당겨야합니다.

우리의 메뉴는 UL 및 Li 태그로 제작되었으므로 마커를 제거하고 마진/패딩을 무효화하고 메뉴를 플렉스 컨테이너로 설정하여 약간 스타일을 지정하겠습니다.

<span><span>.container</span> {
</span>  // ...
  <span>grid-gap: 2rem 1rem;
</span><span>}
</span>

그건 거의 다입니다. 결과를 관찰하기 위해 편리한 CSS 그리드 형광펜 도구가 활성화 된 Firefox를 사용하겠습니다. 사용 가능한 다른 브라우저에 대한 유사한 도구가 있습니다. 예를 들어 Chrome 용 Gridman.)이 도구에 액세스하려면 F12를 누르고 그리드 레이블이있는 .Container 요소를 선택하십시오.

그 후 후 CSS 규칙 탭으로 진행하여 디스플레이를 찾으십시오 : 그리드 속성. 그리드 값 옆에있는 작은 아이콘을 눌러 형광펜을 활성화하거나 비활성화 할 수 있습니다.

<span>* {
</span>  <span>box-sizing: border-box;
</span><span>}
</span>
<span>html {
</span>  <span>font-size: 16px;
</span>  <span>font-family: Georgia, serif;
</span><span>}
</span>
<span>body {
</span>  <span>background-color: #fbfbfb;
</span><span>}
</span>
<span>h1<span>, h2, h3</span> {
</span>  <span>margin-top: 0;
</span><span>}
</span>
<span>header h1 {
</span>  <span>margin: 0;
</span><span>}
</span>
<span>main p {
</span>  <span>margin-bottom: 0;
</span><span>}
</span>

결과는 다음과 같습니다

형광펜은 모든 행과 열뿐만 아니라 그들과 지역의 이름 사이의 여백을 표시합니다. 레이아웃 섹션 내부의 출력을 사용자 정의 할 수 있으며 페이지에 모든 그리드가 나열되어 있습니다.

그래서 우리는 헤더를 다루었으므로 기본 컨텐츠 영역과 사이드 바로 진행합시다. 주요 내용 및 사이드 바 우리의 주요 컨텐츠 영역은 두 개의 열에 걸쳐 있어야하는 반면, 사이드 바는 하나만 차지해야합니다. 행은 높이가 자동으로 설정되기를 원합니다. 나는 사이드 바에 더 많은 시각적 공간을 제공하기 위해 패딩을 추가하고 싶습니다 : CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다

Firefox의 그리드 도구에서 볼 수 있듯이 결과는 다음과 같습니다

스폰서 스폰서 섹션에는 너비와 높이가 같은 5 개의 항목이 포함되어야합니다. 각 항목은 차례로 하나의 이미지를 갖습니다.

초기 레이아웃 에서이 블록은 디스플레이 : 테이블과 함께 스타일이지만 우리는 이에 의존하지 않습니다. 실제로, 스폰서 섹션은 CSS 그리드를 적용하기위한 훌륭한 후보 일 수 있습니다! . 우선, 스폰서 지역을 포함하도록 그리드-템플릿 영역을 조정하십시오 :

<.> 이제 .sponsors 섹션을 그리드로 바꿉니다.

너비가 같은 5 개의 항목이 필요한 한, 반복 () 함수를 사용하여 열을 정의 할 수 있습니다.

행의 경우 높이를 자동으로 설정해야합니다. 열 사이의 간격은 1REM과 같아야합니다.

<:> 각 항목 스타일 :

<span><span><span><div> class<span>="container"</span>>
  <span><span><span><header> class<span>="logo"</span>></header></span>
</span>    <span><span><span><h1 id="gt">></h1></span><span><span><a> href<span>="#"</span>></a></span>DemoSite<span><span></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><nav> class<span>="main-menu"</span>></nav></span>
</span>    <span><span><span><ul>></ul></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Our clients<span><span></span>></span><span><span></span>></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Products<span><span></span>></span><span><span></span>></span>
</span>      <span><span><span><li> class<span>="main-menu__item"</span>></li></span><span><span><a> href<span>="#"</span>></a></span>Contact<span><span></span>></span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><main> class<span>="content-area"</span>></main></span>
</span>    <span><span><span><h2 id="gt">></h2></span>Welcome!<span><span></span>></span>
</span>
    <span><span><span><p>></p></span>
</span>      Content
    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><aside> class<span>="sidebar"</span>></aside></span>
</span>    <span><span><span><h3 id="gt">></h3></span>Additional stuff<span><span></span>></span>
</span>
    <span><span><span><ul>></ul></span>
</span>      <span><span><span><li>></li></span>Items<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Are<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Listed<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Here<span><span></span>></span>
</span>      <span><span><span><li>></li></span>Wow!<span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>
  <span><span><span><section> class<span>="sponsors-wrapper"</span>></section></span>
</span>    <span><span><span><h2 id="gt">></h2></span>Our sponsors<span><span></span>></span>
</span>
    <span><span><span><section> class<span>="sponsors"</span>></section></span>
</span>      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032783158.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다" > src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032783158.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다" > src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032783158.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다" > src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032783158.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다" > src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></span>></span>
</span>
      <span><span><span><figure> class<span>="sponsor"</span>></figure></span>
</span>        <span><span><span><img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173958032783158.png?x-oss-process=image/resize,p_40" class="lazy" alt="CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다" > src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>
  <span><span><span></span>></span>
</span>
  <span><span><span><footer> class<span>="footer"</span>></footer></span>
</span>    <span><span><span><p>></p></span>
</span>      <span title="©">© 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
</div></span>></span>
</span>

중간 결과는 다음과 같습니다

이 예제는 아무런 문제없이 그리드를 둥지 할 수 있음을 보여줍니다. 또 다른 솔루션은 Flexbox를 사용하는 것일 수 있지만이 경우 폭이 충분하지 않으면 스폰서가 포장 할 수 있습니다. 이제 이미지를 수직 및 수평으로 중앙을 중앙으로 중앙에두고 싶습니다. 우리는 다음을 시도 할 수 있습니다 :

<span><span>.logo</span> {
</span>  <span>grid-area: logo;
</span><span>}
</span>
<span><span>.main-menu</span> {
</span>  <span>grid-area: menu;
</span><span>}
</span>
<span><span>.content-area</span> {
</span>  <span>grid-area: content;
</span><span>}
</span>
<span><span>.sidebar</span> {
</span>  <span>grid-area: sidebar;
</span><span>}
</span>
<span><span>.sponsors-wrapper</span> {
</span>  <span>grid-area: sponsors;
</span><span>}
</span>
<span><span>.footer</span> {
</span>  <span>grid-area: footer;
</span><span>}
</span>

장소가 X 및 Y 축에서 요소를 정렬합니다. 셀프를 정당화하고 정당화하는 속성입니다 이미지는 실제로 정렬되지만 불행히도 흰색 배경은 사라집니다. 각 .sponsor는 이제 이미지의 크기와 같은 너비와 높이를 가지기 때문입니다.

그것은 우리가 여기서 다른 접근법이 필요하다는 것을 의미하며, 가능한 솔루션 중 하나는 Flexbox를 사용하는 것입니다 : CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다 .

이제 모든 것이 제대로 표시되고 이제 우리는 그리드가 Flexbox와 잘 어울린다는 것을 알고 있습니다.

바르는 마지막 섹션은 바닥 글이며 실제로 가장 간단한 섹션입니다. 우리가해야 할 일은 세 열 모두에 걸쳐 있습니다.

기본적으로 레이아웃이 완료되었습니다! 그러나 우리는 아직 완료되지 않았습니다. 사이트도 반응해야합니다. 다음 섹션 에서이 작업을 처리해 봅시다.

레이아웃 반응

class="container">

class="logo">

>

href="#">DemoSite>> >

class="main-menu__item">

href="#">Our clients>>

class="main-menu__item">

href="#">Products>>

class="main-menu__item">

href="#">Contact>> > >

class="content-area">

>

Welcome!>

Content > >

>

Additional stuff>

Items>

Are>

Listed>

Here>

Wow!> > >

class="sponsors-wrapper">