끈적 끈적한 헤더 및 바닥 글에는 CSS 그리드 사용 방법

CSS 그리드는 웹 레이아웃을 크게 단순화합니다. 학습 곡선이 있지만 직관적 인 특성으로 인해 특히 헤더 및 바닥 글을 관리하는 데 사용하는 것이 즐겁습니다. 이 튜토리얼은 CSS 그리드를 사용하여 고정 및 끈적 끈적한 바닥 글을 모두 생성하는 것을 보여줍니다. Rachel Andrew의 "The New CSS 레이아웃"은 그리드와 Flexbox 로의 더 깊은 다이빙에 적극 권장됩니다.

프로젝트 개요

헤더, 메인 컨텐츠 및 바닥 글로 클래식 HTML 레이아웃을 구축 할 것입니다. 우리는 컨텐츠 길이에 관계없이 뷰포트 바닥에 남아있는 고정 바닥 글과 바닥에 부착하지만 더 긴 내용으로 밀어 넣는 전통적인 끈적 끈적한 바닥 글을 구현합니다. 기본 컨텐츠 영역은 정의 된 너비 내에서 전체 뷰포트 너비 또는 센터링에 걸쳐 적응할 수 있습니다.

고정 바닥 글은 끈적 끈적한 바닥 글보다 덜 일반적이지만 Charles Schwab과 같은 사이트에서 사용됩니다. 그들의 구현에는 종종 하드 코딩 된 크기와 패딩이 포함됩니다. 우리의 접근 방식은 이러한 제한을 피하고 CSS 그리드의 유연성을 활용합니다.

진행하기 전에 Charles Schwab 홈페이지의 고정 바닥 글을 검사하십시오. DevTools에서 코드를 검사하면 하드 코딩 된 높이와 위치가 나타납니다.

이러한 제약 없이도 비슷한 효과를 달성합시다.

초기 스타일

최소 UI로 시작하여 CSS 그리드로 점차적으로 향상시킬 것입니다. Codesandbox (및 후속 반복)는 대화식 예제를 제공합니다.

먼저, 뷰포트의 전체 높이가 사용되도록합니다.

 몸 {
  여백 : 0; / * 스크롤 바를 방지 */
}

#앱 {
  높이 : 100VH;
}

다음으로 헤더, 메인 및 바닥 글 섹션 및 그리드 구조를 정의합니다. 이 초기 구조는 아직 의도 한대로 작동하지 않습니다. 그것은 기초 역할을합니다.

 몸 {
  여백 : 0;
}

#앱 {
  높이 : 100VH;

  / * 그리드 컨테이너 설정 */
  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 1fr;
  그리드-템플릿 열 : 자동 1fr ​​오토;
  그리드-템플릿 영역 :
    '헤더'
    '기본'
    '보행인';
}

#app> 헤더 {
  그리드 영역 : 헤더;
}

#app> main {
  그리드 영역 : 메인;
  패딩 : 15px 5px 10px 5px;
}

#app> 바닥 글 {
  그리드 영역 : 바닥 글;
}

이것은 단일 열 레이아웃을 만듭니다. 1fr "나머지 공간을 가져 가라"를 의미하며, 전체 너비 열이 발생합니다. 행의 크기는 auto (헤더 및 바닥 글) 및 1fr (나머지 공간을 채우기위한 주요 컨텐츠)을 사용하여 크기를 조정합니다. 하드 코딩 된 높이가 필요하지 않습니다.

컨텐츠 통합

제공된 Codesandbox는 데모 목적으로 React를 사용하지만 CSS 그리드 원리는 프레임 워크와 독립적으로 유지됩니다. 헤더, 메인 및 바닥 글 구성 요소는 각각의 HTML 요소를 렌더링합니다. 청구 및 설정 섹션은 샘플 컨텐츠를 제공하여 레이아웃의 적응성을 보여줍니다.

초기 레이아웃에는 기능적 "청구"섹션이 표시되지만 "설정"은 바닥 글을 화면에서 푸시합니다. 스크롤은 전체 페이지에 영향을 미쳐 헤더가 사라집니다. 이것을 해결합시다.

고정 헤더 및 바닥 글

100vh 높이와 auto / 1fr 행 크기 크기는 처음에 컨텐츠가 뷰포트를 초과 할 때 문제를 일으 킵니다. overflow: auto<main></main> 요소는 기본 콘텐츠 영역 내에서 스크롤하여 헤더와 바닥 글을 수정합니다.

 #app> main {
  그리드 영역 : 메인;
  오버플로 : 자동;
  패딩 : 15px 5px 10px 5px;
}

이 업데이트 된 데모는 스크롤 및 가시성 문제를 해결합니다.

조정 가능한 메인 섹션 너비

600px 너비 내에서 기본 컨텐츠를 중앙에 중앙 뷰포트에 걸릴 수 있도록 내부 그리드를 중첩합니다.<main></main> . 이것은 600px 섹션을 효과적으로 중심으로 3 개의 열 ( 1fr 600px 1fr )을 사용합니다.

 #app> main {
  디스플레이 : 그리드;
  그리드-템플릿 열 : 1fr;
  그리드-템플릿-컬럼 : 1fr 600px 1fr;
}

컨텐츠는 그리드 좌표를 사용하여 배치됩니다. a .full 클래스는 컨텐츠가 전체 너비에 걸쳐 있도록 할 수 있습니다.

 #app> 섹션 {
  그리드 영역 : 1 / 2 / 1 / 3;
}

#app> section.full {
  그리드 영역 : 1 / 1 / 1 / 4;
}

그리드 라인 (3 개의 열에 4 줄)을 사용하십시오. 뷰포트가 수축되면 고정 된 600px 폭으로 잘린 문제가 나타납니다. minmax(0, 600px) 이것을 해결하여 너비가 최대 600px를 조정할 수 있도록합니다.

 기본 {
  디스플레이 : 그리드;
  그리드-템플릿 열 : 1fr;
  그리드-템플릿-컬럼 : 1fr minmax (0, 600px) 1fr;
}

마지막 데모는이 반응 형 동작을 보여줍니다.

전통적인 끈적 끈적한 바닥 글

전통적인 끈적 끈적한 바닥 글을 만들기 위해 그리드 구조를 수정합니다. 그만큼<main></main> 요소는 이제 그리드 내에 바닥 글을 포함합니다.

<div>
  <header></header>
  <main>
    <section></section>
    <footer></footer>
  </main>
</div>

#app 그리드에는 두 개의 행이 있습니다.

 #앱 {
  / * 이전과 동일 */
  그리드-템플릿-컬럼 : 1fr;
  그리드-템플릿 열 : 자동 1fr;
  그리드-템플릿 영역 :
    '헤더'
    '기본';
}

그만큼<main></main> 그리드는 바닥 글을 포함하도록 조정됩니다.

 #app> main {
  디스플레이 : 그리드;
  그리드-템플릿 열 : 1fr Auto;
  그리드-템플릿-컬럼 : 1fr minmax (0, 600px) 1fr;
}

이 그리드 내의 바닥 글 위치 :

 #app> 바닥 글 {
  그리드 영역 : 2 / 1 / 3 / 4;
}

이 설정은 바닥 글을 내부의 내용으로 밀어 넣을 수 있습니다.<main></main> , 원하는 끈적 끈적한 바닥 글 효과를 만듭니다. 적절한 정렬을 보장하기 위해 약간의 패딩 조정이 이루어졌습니다. 마지막 데모는이 동작을 보여줍니다. 수직 레이아웃을 유지하면서 컨텐츠 영역 내에서 수평 스크롤을 허용하기 위해 섹션 요소에 추가 스타일이 적용되었습니다.

결론

CSS 그리드없이 입증 된 기술은 달성 할 수 있지만 그리드는 통합적이고 우아한 솔루션을 제공합니다. 고정 된 바닥 글에서 끈적 끈적한 바닥 글로 간단한 전환으로 입증 된 유연성과 사용 편의성은 복잡한 레이아웃을위한 강력한 도구입니다. 제시된 예제는 비교적 간단하여보다 야심 찬 프로젝트를위한 CSS 그리드의 잠재력을 보여줍니다.

위 내용은 끈적 끈적한 헤더 및 바닥 글에는 CSS 그리드 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!