CSS 그리드 - 심층 분석

강의 9: CSS 그리드 - 심층 분석

"Basic to Brilliance" 과정의 아홉 번째 강의에 오신 것을 환영합니다. 이번 강의에서는 복잡한 웹 레이아웃을 쉽게 만들 수 있는 강력한 레이아웃 시스템인 CSS 그리드에 대해 알아봅니다. Flexbox는 1차원 레이아웃(행 또는 열)에 적합하지만 CSS 그리드는 2차원 레이아웃 시스템을 제공하므로 행과 열을 동시에 제어할 수 있습니다.

CSS 그리드란 무엇인가요?

CSS 그리드는 유연하고 반응성이 뛰어난 그리드 기반 레이아웃을 생성할 수 있는 CSS의 레이아웃 시스템입니다. 요소를 행과 열로 정렬할 수 있어 Flexbox보다 레이아웃 구조를 더 효과적으로 제어할 수 있습니다.

그리드 용어

예제를 살펴보기 전에 몇 가지 주요 용어를 알아보겠습니다.

• 그리드 컨테이너: 그리드를 포함하는 상위 요소입니다.
• 그리드 항목: 그리드 컨테이너 내부의 하위 요소입니다.
• 그리드선: 그리드의 가로 및 세로 구분선입니다.
• 그리드 트랙: 두 개의 그리드 선 사이의 공간으로 행이나 열을 형성합니다.
• 그리드 셀: 행과 열의 교차로 형성된 그리드의 가장 작은 개별 단위입니다.

1. 기본 그리드 구조

그리드 사용을 시작하려면 컨테이너에 디스플레이: 그리드를 적용하세요.

• 예:

  .grid-container {
    display: grid;
  }

디스플레이: 그리드가 적용되면 컨테이너의 하위 요소가 그리드 항목이 됩니다.

2. 그리드 열과 행 정의

grid-template-columns 및 Grid-template-rows 속성을 사용하여 그리드에 포함될 행과 열 수를 정의할 수 있습니다.

• 예: 3개의 열과 2개의 행으로 구성된 그리드 만들기.

  .grid-container {
    display: grid;
    grid-template-columns: 100px 200px 100px;
    grid-template-rows: 50px 150px;
  }

이렇게 하면 다음을 사용하여 그리드가 생성됩니다.

• 3개 열: 첫 번째 열은 너비가 100px, 두 번째 열은 200px, 세 번째 열은 100px입니다.
• 2행: 첫 번째 행의 높이는 50px이고 두 번째 행의 높이는 150px입니다.

3. 분수 단위 사용(fr)

CSS 그리드는 그리드 컨테이너에서 사용 가능한 공간의 일부를 나타내는 분수 단위 fr을 도입합니다. 이는 그리드 항목 사이에 공간을 할당하는 유연한 방법입니다.

• 예: fr을 사용하여 공간을 균등하게 나눕니다.

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

이 예에서는 3개 열의 너비가 동일하며 각 열은 사용 가능한 공간의 일부를 차지합니다.

4. 그리드 아이템 배치

grid-column 및 Grid-row 속성을 사용하여 각 그리드 항목이 배치되는 위치를 제어할 수 있습니다. 이러한 속성을 사용하면 항목의 시작 및 끝 위치를 지정할 수 있습니다.

• 예:

  .grid-item {
    grid-column: 1 / 3; /* This item spans from column 1 to column 3 */
    grid-row: 1 / 2;    /* This item is placed in the first row */
  }

이 경우 그리드 항목은 처음 두 열에 걸쳐 있지만 첫 번째 행에 배치됩니다.

5. 그리드 간격

grid-gap 속성은 그리드 항목 사이에 수평 및 수직으로 공간을 추가합니다.

• 예: 열과 행 사이에 간격 추가.

  .grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 20px;
  }

이렇게 하면 모든 그리드 항목 사이에 동일한 20px 간격이 생성됩니다.

6. 자동 맞춤 및 자동 채우기

자동 맞춤 및 자동 채우기는 컨테이너 크기에 따라 그리드에서 가능한 한 많은 열을 자동으로 배치할 수 있는 강력한 기능입니다.

• 자동 맞춤 예:

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

여기서 그리드는 가능한 한 많은 열을 자동으로 맞춰서 각 열의 너비가 최소 100픽셀이면서 사용 가능한 공간을 채울 수 있도록 커질 수 있도록 합니다.

실제 예: 간단한 그리드 레이아웃

CSS 그리드를 이용해 간단한 그리드 레이아웃을 만들어 보겠습니다.

HTML:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

CSS:

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

.grid-item {
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

이 예에서는:

• .grid-container에는 반복(3, 1fr)을 사용하여 생성된 3개의 동일한 너비 열이 있습니다.
• 그리드 항목 사이에 공간을 추가하기 위해 그리드 간격을 10px로 설정했습니다.
• 각 .grid 항목에는 가시성을 높이기 위해 패딩과 배경색이 적용되어 있습니다.

7. 중첩 그리드

그리드 항목이 그리드 컨테이너 자체가 되는 그리드를 중첩할 수도 있습니다. 이를 통해 더욱 복잡한 레이아웃이 가능해졌습니다.

• 예:

  .nested-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 10px;
  }

이 개념을 적용하여 다른 그리드 안에 그리드를 생성하여 레이아웃을 더욱 세밀하게 제어할 수 있습니다.

Responsive Design with CSS Grid

CSS Grid is great for responsive design. You can adjust the number of columns based on the screen size using media queries.

• Example: Creating a responsive grid.

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

  @media screen and (max-width: 768px) {
    .grid-container {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media screen and (max-width: 480px) {
    .grid-container {
      grid-template-columns: 1fr;
    }
  }

In this example:

• The grid starts with three columns.
• On screens smaller than 768px, the grid switches to two columns.
• On screens smaller than 480px, the grid collapses to a single column.

Practice Exercise

1. Create a webpage layout using CSS Grid with a header, main content, sidebar, and footer.
2. Use grid-template-columns and grid-template-rows to define the grid structure.
3. Make the layout responsive by adjusting the number of columns on different screen sizes.

Next Up: In the next lecture, we’ll explore Advanced CSS Grid Techniques, including grid areas, template layouts, and combining Grid with Flexbox. Stay tuned!

Follow Me on LinkedIn-

Ridoy Hasan

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