고급 CSS 그리드 기술

강의 10: 고급 CSS 그리드 기술

"Basic to Brilliance" 강좌 열 번째 강의에 오신 것을 환영합니다. 이번 강의에서는 고급 CSS 그리드 기술에 대해 좀 더 자세히 살펴보겠습니다. 이러한 기술을 사용하면 훨씬 더 복잡하고 반응이 빠른 레이아웃을 만들 수 있습니다. 이 강의가 끝나면 그리드 영역, 그리드 자동 배치 작업을 수행하고 CSS 그리드를 Flexbox와 같은 다른 레이아웃 시스템과 결합할 수 있게 됩니다.

1. 그리드 영역

그리드 영역을 사용하면 그리드 섹션에 이름을 할당할 수 있으므로 레이아웃을 더 쉽게 관리하고 시각화할 수 있습니다.

• 예: 헤더, 사이드바, 콘텐츠 및 바닥글이 있는 레이아웃의 그리드 영역 이름 지정

HTML:

<div class="grid-container">
  <header class="header">Header</header>
  <aside class="sidebar">Sidebar</aside>
  <main class="content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

.header {
  grid-area: header;
}

.sidebar {
  grid-area: sidebar;
}

.content {
  grid-area: content;
}

.footer {
  grid-area: footer;
}

이 예에서는:

• 그리드 영역: Grid-template-areas 속성은 두 개의 열에 걸쳐 있는 헤더, 중앙의 사이드바와 기본 콘텐츠, 바닥글의 세 가지 섹션으로 레이아웃을 정의합니다.
• 그리드 항목(헤더, 사이드바 등)을 특정 영역에 할당하면 레이아웃을 더욱 효과적으로 제어할 수 있습니다.

2. 그리드 자동 배치

CSS 그리드에는 명시적으로 배치되지 않은 그리드 항목을 자동으로 배치하는 자동 배치 기능이 있습니다. Grid-auto-flow를 사용하여 작동 방식을 제어할 수 있습니다.

• 값:

  • row: 항목이 행 단위로 배치됩니다(기본값).
  • 열: 항목이 열별로 배치됩니다.
  • 밀도: 항목이 그리드의 빈 공간에 채워집니다.

• 예:
  
  

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-flow: row dense; /* Auto-places items and packs them densely */
  }

이 경우 그리드 항목은 행별로 배치되고 작은 항목이 간격을 채웁니다.

3. minmax() 함수 사용

minmax() 함수를 사용하면 그리드 트랙이 사용할 수 있는 최소 및 최대 크기를 지정하는 등 그리드 트랙의 범위를 정의할 수 있습니다.

• 예:

  .grid-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
  }

이 예에서는:

• 그리드에는 세 개의 열이 있습니다.
• 각 열의 너비는 최소 150px이지만 사용 가능한 공간(1fr)을 채울 만큼 커질 수 있습니다.

4. 그리드 자동 채우기와 자동 맞춤

자동 채우기와 자동 맞춤은 모두 동적 그리드를 생성하는 데 사용되지만 작동 방식은 약간 다릅니다.

• 자동 채우기: 비어 있더라도 최대한 많은 열을 추가합니다.

• 자동 맞춤: 사용 가능한 공간에 맞게 열을 줄이거나 늘립니다.

• 예: 자동 맞춤과 자동 채우기 비교
  

  .grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); /* Auto-fill */
  }

  .grid-container-fit {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* Auto-fit */
  }

두 옵션 모두 사용 가능한 공간에 따라 열 수를 자동으로 조정하지만 자동 맞춤은 빈 열을 축소합니다.

5. CSS 그리드와 Flexbox 결합

CSS Grid는 전체 레이아웃을 구성하는 데 적합하지만 Flexbox는 개별 항목 내에서 정렬을 제어하는 ​​데 적합합니다. 두 가지를 결합하여 레이아웃의 다양한 부분을 처리할 수 있습니다.

• 예: 기본 레이아웃에 CSS 그리드를 사용하고 그리드 항목 내부 정렬에 Flexbox를 사용합니다.

HTML:

<div class="grid-container">
  <div class="header">Header</div>
  <div class="content">
    <div class="flexbox-item">Item 1</div>
    <div class="flexbox-item">Item 2</div>
  </div>
  <div class="footer">Footer</div>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
}

.content {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.flexbox-item {
  padding: 20px;
  background-color: #ddd;
}

이 예에서는:

• 그리드 레이아웃: 전체 레이아웃은 머리글, 내용, 바닥글로 구성된 CSS 그리드로 구성됩니다.
• Flexbox: 콘텐츠 섹션에서는 Flexbox를 사용하여 내부 항목을 정렬합니다.

6. 암시적 그리드와 명시적 그리드

그리드는 명시적으로(그리드 템플릿 열 및 그리드 템플릿 행 사용) 또는 암시적으로(새 트랙이 자동으로 생성되는 경우) 정의할 수 있습니다.

• 명시적 그리드: 행과 열의 수를 정의합니다.

• 암시적 그리드: 그리드는 추가 항목을 수용하기 위해 행이나 열을 자동으로 생성합니다.

• 예:
  

  .grid-container {
    display: grid;
    grid-template-columns: 100px 100px;
    grid-auto-rows: 50px; /* Implicitly adds rows */
  }

이 경우 정의된 열에 맞는 것보다 더 많은 항목이 추가되면 그리드가 자동으로 새 행을 생성합니다.

7. 전체 페이지 그리드 레이아웃 만들기

CSS 그리드를 사용하여 헤더, 기본 콘텐츠 영역, 사이드바, 바닥글이 포함된 반응형 전체 페이지 레이아웃을 만들어 보겠습니다.

HTML:

<div class="grid-container">
  <header class="header">Header</header>
  <nav class="sidebar">Sidebar</nav>
  <main class="main-content">Main Content</main>
  <footer class="footer">Footer</footer>
</div>

CSS:

.grid-container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  height: 100vh; /* Full height layout */
}

.header {
  grid-area: header;
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.sidebar {
  grid-area: sidebar;
  background-color: #f4f4f4;
  padding: 20px;
}

.main-content {
  grid-area: main;
  padding: 20px;
}

.footer {
  grid-area: footer;
  background-color: #333;
  color: white;
  padding: 10px;
  text-align: center;
}

이 예에서는:

• Kawasan Grid: Reka letak terdiri daripada pengepala, bar sisi, kandungan utama dan pengaki.
• Grid melaraskan ketinggian setiap bahagian secara automatik, mengisi ketinggian penuh port pandangan.

Amalkan Senaman

1. Buat reka letak blog responsif dengan pengepala, bar sisi, kandungan utama dan pengaki menggunakan Grid CSS.
2. Gunakan kawasan templat grid untuk menentukan struktur.
3. Jadikan reka letak responsif dengan melaraskan bilangan lajur pada saiz skrin yang berbeza.

Seterusnya: Dalam kuliah seterusnya, kita akan meneroka Penedudukan CSS dan cara meletakkan elemen menggunakan sifat seperti mutlak, relatif dan tetap. Bersedia untuk meningkatkan kawalan reka letak anda dengan lebih jauh lagi!

ikuti saya di LinkedIn

Ridoy Hasan

위 내용은 고급 CSS 그리드 기술의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!