CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다-CSS 튜토리얼-php.cn

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"> <h1><a href="#">DemoSite</a></h1> </header> <nav class="main-menu"> <ul> <li class="main-menu__item"><a href="#">Our clients</a></li> <li class="main-menu__item"><a href="#">Products</a></li> <li class="main-menu__item"><a href="#">Contact</a></li> </ul> </nav> <main class="content-area"> <h2>Welcome!</h2> <p> Content </p> </main> <aside class="sidebar"> <h3>Additional stuff</h3> <ul> <li>Items</li> <li>Are</li> <li>Listed</li> <li>Here</li> <li>Wow!</li> </ul> </aside> <section class="sponsors-wrapper"> <h2>Our sponsors</h2> <section class="sponsors"> <figure class="sponsor"> <img src="https://via.placeholder.com/150x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x200"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x100"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x200"> </figure> </section> </section> <footer class="footer"> <p> © 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved. </p> </footer> </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</span> class<span>="container"</span>></span>
</span>  <span><span><span><header</span> class<span>="logo"</span>></span>
</span>    <span><span><span><h1</span>></span><span><span><a</span> href<span>="#"</span>></span>DemoSite<span><span></a</span>></span><span><span></h1</span>></span>
</span>  <span><span><span></header</span>></span>
</span>
  <span><span><span><nav</span> class<span>="main-menu"</span>></span>
</span>    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Our clients<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Products<span><span></a</span>></span><span><span></li</span>></span>
</span>      <span><span><span><li</span> class<span>="main-menu__item"</span>></span><span><span><a</span> href<span>="#"</span>></span>Contact<span><span></a</span>></span><span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></nav</span>></span>
</span>
  <span><span><span><main</span> class<span>="content-area"</span>></span>
</span>    <span><span><span><h2</span>></span>Welcome!<span><span></h2</span>></span>
</span>
    <span><span><span><p</span>></span>
</span>      Content
    <span><span><span></p</span>></span>
</span>  <span><span><span></main</span>></span>
</span>
  <span><span><span><aside</span> class<span>="sidebar"</span>></span>
</span>    <span><span><span><h3</span>></span>Additional stuff<span><span></h3</span>></span>
</span>
    <span><span><span><ul</span>></span>
</span>      <span><span><span><li</span>></span>Items<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Are<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Listed<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Here<span><span></li</span>></span>
</span>      <span><span><span><li</span>></span>Wow!<span><span></li</span>></span>
</span>    <span><span><span></ul</span>></span>
</span>  <span><span><span></aside</span>></span>
</span>
  <span><span><span><section</span> class<span>="sponsors-wrapper"</span>></span>
</span>    <span><span><span><h2</span>></span>Our sponsors<span><span></h2</span>></span>
</span>
    <span><span><span><section</span> class<span>="sponsors"</span>></span>
</span>      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/150x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x150"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/100x100"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>
      <span><span><span><figure</span> class<span>="sponsor"</span>></span>
</span>        <span><span><span><img</span> src<span>="https://via.placeholder.com/200x200"</span>></span>
</span>      <span><span><span></figure</span>></span>
</span>    <span><span><span></section</span>></span>
</span>
  <span><span><span></section</span>></span>
</span>
  <span><span><span><footer</span> class<span>="footer"</span>></span>
</span>    <span><span><span><p</span>></span>
</span>      <span title="©">&copy; 2018 DemoSite. White&amp;Sons LLC. All rights (perhaps) reserved.
</span>    <span><span><span></p</span>></span>
</span>  <span><span><span></footer</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와 잘 어울린다는 것을 알고 있습니다.

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

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

레이아웃 반응 <div class="container"> <header class="logo"> <h1><a href="#">DemoSite</a></h1> </header> <nav class="main-menu"> <ul> <li class="main-menu__item"><a href="#">Our clients</a></li> <li class="main-menu__item"><a href="#">Products</a></li> <li class="main-menu__item"><a href="#">Contact</a></li> </ul> </nav> <main class="content-area"> <h2>Welcome!</h2> <p> Content </p> </main> <aside class="sidebar"> <h3>Additional stuff</h3> <ul> <li>Items</li> <li>Are</li> <li>Listed</li> <li>Here</li> <li>Wow!</li> </ul> </aside> <section class="sponsors-wrapper"> <h2>Our sponsors</h2> <section class="sponsors"> <figure class="sponsor"> <img src="https://via.placeholder.com/150x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x150"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x200"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/100x100"> </figure> <figure class="sponsor"> <img src="https://via.placeholder.com/200x200"> </figure> </section> </section> <footer class="footer"> <p> © 2018 DemoSite. White&Sons LLC. All rights (perhaps) reserved. </p> </footer> </div> CSS 그리드를 갖추고 있으면 실제로 영역을 신속하게 재배치 할 수 있기 때문에 응답 성을 소개하는 것은 매우 쉽습니다. 큰 화면 큰 화면으로 시작하겠습니다 (이 기사에서는 Bootstrap 4에 정의 된 것과 동일한 중단 점을 고수 할 것입니다). 메인 컨테이너의 수평 마진과 개별 스폰서 간의 간격을 줄이고 싶습니다.
중간 스크린 중간 화면에서 메인 컨텐츠 영역과 사이드 바가 세 열을 모두 차지하려고합니다.
또한 글꼴 크기를 줄이고 스폰서를 쌓아서 다른 아래에 표시됩니다. 열 사이의 간격은 0이어야합니다 (실제로 열이 하나만 있기 때문에). 대신, 나는 행 사이에 간격을 설정합니다 :
이것은 레이아웃이 지금 중간 화면에서 어떻게 보이는가입니다 :

작은 화면 작은 화면에서는 각 영역이 별도의 행에 표시됩니다. 즉, 현재 하나의 열만있을 것입니다.
이 경우 메뉴를 오른쪽으로 당겨서는 안되며 열 사이의 간격도 필요하지 않습니다.
작업이 완료되었습니다

다양한 화면에 대해 그리드 항목을 쉽게 재 배열 할 수도 있습니다. 메뉴를 작은 화면에 바닥에 놓고 싶다고 가정 해 봅시다 (페이지에서 자료를 읽은 후 방문자가 스크롤 할 필요가 없도록하십시오). 그렇게하려면 그리드 테드 플레이트 영역을 조정하십시오 :
.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; } 
로그인 후 복사
로그인 후 복사
로그인 후 복사
미디어 쿼리없이 수행하는 우리는 스폰서가 미디어 쿼리없이 반응을 차단할 수 있다고 언급 할 가치가 있습니다. 이는 자동 적합 속성 및 Minmax 기능의 도움으로 가능합니다. 작동하는 것을 보려면 다음과 같은 .sponsors의 스타일을 조정하십시오.
이미 알고 있듯이 반복 함수는 필요한만큼 열을 반복합니다. 자동 필은 "가능한 많은 열로 행을 채우십시오"를 의미합니다. 열을위한 공간이 충분하지 않으면 다음 줄에 배치됩니다.
minmax를 사용하면 열 너비의 최소 및 최대 값을 지정할 수 있습니다. 이 경우 각 열은 1 분 만에 여유 공간에 걸쳐 있어야하지만 200 픽셀 이상이어야합니다.이 모든 것은 작은 화면에서 열이 각각 최대 200px로 축소 될 수 있음을 의미합니다. 공간이 충분하지 않으면 하나 또는 여러 개의 열이 별도의 선으로 이동됩니다. 위의 CSS 규칙을 적용한 결과는 다음과 같습니다

폴백 불행히도 CSS 그리드는 아직 모든 브라우저에서 아직 완전히 지원되지 않으며, 여전히 이전 버전의 사양을 구현하고 있는지 추측 할 수 있습니다. 예, 인터넷 익스플로러 10과 11입니다. 해당 브라우저에서 데모를 열면 그리드가 전혀 작동하지 않고 영역이 단순히 쌓여 있음을 알 수 있습니다.
물론, 이것은 사이트가 여전히 사용할 수 있기 때문에 세상의 끝이 아니지만 최소한 몇 가지 폴백 규칙을 추가합시다. 좋은 소식은 요소가 떠 다니고 그리드를 할당하면 그리드가 우선한다는 것입니다. 또한 디스플레이, 세로 정렬 및 기타 속성도 그리드 항목에 영향을 미치지 않으므로 그 사실을 활용 해 봅시다. 스택 메뉴는 그대로 멋지게 보이지만 사이드 바는 아마도 아래가 아닌 기본 컨텐츠 옆에 배치해야합니다. 디스플레이를 사용하여이를 달성 할 수 있습니다. 인라인-블록 :
그리드를 지원하는 모든 브라우저에서 이러한 특성은 효과가 없지만 예상대로 적용됩니다. 우리가 조정해야 할 속성 중 하나는 너비입니다 :

그러나 이러한 스타일을 추가 한 후에는 그리드 레이아웃이 그리드 품목에 의해 무시되지 않기 때문에 그리드 레이아웃이 훨씬 더 나빠질 것입니다. @Supports CSS 쿼리의 도움으로 수정 될 수 있습니다. 즉, 이러한 쿼리를 이해하지 못하지만 그리드를 수정하는 데 사용할 필요가 없습니다!
이제 스폰서 품목을 관리하고 각 블록에 상단 마진을 추가합시다 :
그리드가 지원 될 때 상단 마진이 필요하지 않으므로 @Supports 쿼리 내부에서 무효화하십시오.
마지막으로, IE에 대한 응답 성을 추가합시다. 우리는 단순히 메인 컨텐츠, 사이드 바 및 각 스폰서를 작은 화면에서 전체 너비로 늘립니다. 그리드를 지원하는 브라우저의 스폰서 너비를 고치는 것을 잊지 마십시오 :
다음은 인터넷 익스플로러에서 레이아웃이 어떻게 보이는지입니다

CodePen에서 최종 결과를 볼 수 있습니다 Codepen에서 Sitepoint (@SitePoint)의 그리드가있는 펜 SP : 멀티 컬럼 레이아웃 참조.
결론 이 기사에서는 CSS 그리드가 작동하는 것을 보았고이를 활용하여 기존 플로트 기반 레이아웃을 재 설계했습니다. 이 두 솔루션을 비교하면 "그리드"솔루션의 HTML 및 CSS 코드가 더 작음 (물론 폴백을 계산하지 않음), 단순하고 표현력이 작습니다. 그리드-템플릿-영역 속성의 도움을 받아 개별 영역을 어떻게 배치하는지 쉽게 이해할 수 있으며 신속하게 재배치하거나 크기를 조정할 수 있습니다. 또한 Clearfix와 같은 다양한 해킹 속임수에 의존 할 필요는 없습니다. 보시다시피 CSS 그리드는 플로트에 대한 훌륭한 대안이며 생산 준비가 매우 많습니다. Internet Explorer (이전 버전의 사양을 구현하는)에 대한 일부 폴백 규칙을 제공해야 할 수도 있지만, 본 바와 같이, 그것들은 그다지 복잡하지 않으며, 일반적으로 사이트는 뒤로 호환성이 없어도 여전히 사용할 수 있습니다. 모두. <.> 이미 CSS 그리드로 웹 사이트를 만들려고 했습니까? 당신의 인상은 무엇입니까? 의견에 당신의 생각을 공유하십시오!
CSS Grid Retrofit
에 대한 질문이 자주 묻습니다 웹 디자인에서 CSS 그리드 리트로 파트의 중요성은 무엇입니까?
CSS Grid Retrofit은 웹 디자인의 강력한 도구로 개발자가 복잡한 레이아웃을 쉽게 만들 수 있도록합니다. 2 차원 시스템으로, 주로 1 차원 시스템 인 Flexbox와 달리 열과 행을 모두 처리 할 수 있음을 의미합니다. 이를 통해 다양한 화면 크기와 해상도에 적응하는 반응 형 디자인을 만들기위한 다양한 도구가됩니다. 또한 크기가 알려지지 않았거나 동적 인 경우에도 컨테이너의 항목들 사이에 공간을 정렬하고 분배하는 과정을 단순화합니다.
CSS 그리드 리트로이트는 다른 그리드 시스템과 어떻게 비교됩니까?

CSS Grid 유연성과 사용 편의성으로 인해 다른 그리드 시스템에서 개조가 두드러집니다. 광범위한 코딩 및 계산이 필요한 다른 시스템과 달리 CSS Grid Retrofit을 통해 개발자는 최소한의 코드로 복잡한 레이아웃을 만들 수 있습니다. 또한 요소의 배치 및 정렬을보다 잘 제어하여 많은 개발자에게 선호하는 선택입니다.
모바일 응답 디자인에 CSS 그리드 리트로이트를 사용할 수 있습니까? 예, CSS Grid Retrofit. 모바일 반응 형 디자인을 만드는 훌륭한 도구입니다. 이를 통해 개발자는 미디어 쿼리를 사용하여 다양한 화면 크기에 대해 다른 그리드 레이아웃을 정의 할 수 있습니다. 즉, 동일한 CSS 문서 내에서 데스크탑 뷰를위한 복잡한 레이아웃과 모바일 뷰를위한 더 간단하고 간소화 된 레이아웃을 만들 수 있습니다.
CSS 그리드 리트로이트의 브라우저 호환성 문제는 무엇입니까? >
CSS Grid Retrofit은 Chrome, Firefox, Safari 및 Edge를 포함한 대부분의 최신 브라우저와 호환됩니다. 그러나 이전 브라우저 나 버전에서는 예상대로 작동하지 않을 수 있습니다. 의도 한대로 작동하는지 확인하기 위해 여러 브라우저에서 디자인을 테스트하는 것이 좋습니다. 내 프로젝트에서 CSS 그리드 리트로이트 사용을 시작하려면 어떻게해야합니까?
CSS 그리드 리트로이트 사용을 시작하려면 디스플레이가있는 그리드로 컨테이너 요소를 정의해야합니다. 그리드. 그런 다음 그리드 테드 플레이트 컬럼과 그리드 테드 플레이트 열로 열 및 행 크기를 정의하고 그리드 컬럼과 그리드 행을 사용하여 자식 요소를 그리드에 넣을 수 있습니다.
CSS를 결합 할 수 있습니까? Grid Retrofit 기타 레이아웃 방법?

예, CSS Grid Retrofit은 더 복잡한 설계를 위해 Flexbox와 같은 다른 레이아웃 방법과 결합 할 수 있습니다. 이것은 부분적으로 유연하고 부분적으로 고정 된 레이아웃을 만들려고 할 때 특히 유용 할 수 있습니다.

CSS Grid Retrofit를 사용하기위한 모범 사례는 무엇입니까?
CSS 그리드를 사용하기위한 일부 모범 사례는 무엇입니까? 개조 된 레이아웃 관리를 위해 명명 된 그리드 영역을 사용하고, 유연한 그리드 트랙에 FR 장치를 사용하고, 브라우저의 개발자 도구에 그리드 검사관을 사용하여 그리드 레이아웃을 시각화하고 디버깅하는 것이 포함됩니다.
CSS Grid het hancoutmating은 어떻게 겹치는가? 요소?

CSS 그리드 리트로이트를 사용하면 요소가 겹칠 수 있으며 이는 고유 한 레이아웃을 만드는 강력한 도구가 될 수 있습니다. z-index 속성으로 겹치는 요소의 스태킹 순서를 제어 할 수 있습니다.
수직 레이아웃에 CSS 그리드 리트로이트를 사용할 수 있습니까?

예, CSS 그리드 리트로이트는 2 차원 시스템입니다. 기둥과 행을 모두 처리 할 수 있음을 의미합니다. 이것은 수평 및 수직 레이아웃을 모두 생성하기위한 다목적 도구입니다.
CSS Grid Retrofit과 함께 작업 할 때 일반적인 과제는 무엇입니까?
CSS Grid Retrof와 함께 작업 할 때 일반적인 과제는 다루는 것을 포함합니다. 브라우저 호환성 문제, 겹치는 요소 처리 및 많은 그리드 영역에서 복잡한 레이아웃 관리. 그러나 실습과 그리드 특성을 잘 이해하면 이러한 과제는 극복 될 수 있습니다.

위 내용은 CSS 그리드 레이아웃을 사용하도록 사이트를 재 설계합니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!