코딩ㆍ개발 정보/HTML 연습

[CSS] grid-template-columns의 repeat를 포함한 속성 설명

RioRex 2024. 7. 26.

grid-template-columns에 대해서 설명해줘. repeat는 생소해

grid-template-columns 속성은 CSS Grid 레이아웃에서 그리드 컨테이너의 열(컬럼)을 정의하는 데 사용됩니다. 이 속성을 통해 각 열의 크기와 수를 지정할 수 있습니다.

기본 사용법

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

위 예시에서는 3개의 열을 정의하며, 각 열의 너비는 각각 100px, 200px, 100px입니다.

repeat() 함수

repeat() 함수는 동일한 패턴을 반복할 때 유용합니다. 이 함수를 사용하면 더 간결하게 코드를 작성할 수 있습니다.

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 100px);
}

위 예시에서는 100px 너비의 열이 3번 반복됩니다.

repeat() 함수의 다양한 사용법

정확한 반복 수와 고정 크기:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 50px);
}

50px 너비의 열이 4번 반복됩니다.

정확한 반복 수와 상대적 크기:

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

동일한 너비를 가지는 3개의 열이 생성됩니다. fr 단위는 남은 공간을 비례적으로 나눕니다.

자동 반복:

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

그리드 컨테이너의 가로 너비에 맞춰 가능한 한 많은 열을 생성하며, 각 열의 최소 너비는 100px, 최대 너비는 남은 공간을 비례적으로 나눕니다.

grid-template-columns의 기타 사용법

고정 크기와 상대적 크기 혼합:

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

첫 번째 열은 100px, 두 번째 열은 남은 공간의 1배, 세 번째 열은 남은 공간의 2배를 차지합니다.

반복과 고정 크기 혼합:

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr) 200px;
}

두 개의 동일한 너비의 열과 하나의 200px 너비의 열이 생성됩니다.

실용적인 예제

반응형 레이아웃

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

위 예제는 그리드 컨테이너의 너비에 맞춰 가능한 한 많은 열을 생성하며, 각 열의 최소 너비는 200px, 최대 너비는 남은 공간을 비례적으로 나눕니다. gap 속성은 그리드 항목들 사이의 간격을 정의합니다.

실습 예제

아래는 다양한 grid-template-columns 사용법을 포함한 예제입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Template Columns Example</title>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 10px;
      padding: 10px;
      background-color: #f0f0f0;
    }
    .grid-item {
      background-color: #b0c4de;
      padding: 20px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">Item 1</div>
    <div class="grid-item">Item 2</div>
    <div class="grid-item">Item 3</div>
    <div class="grid-item">Item 4</div>
    <div class="grid-item">Item 5</div>
    <div class="grid-item">Item 6</div>
  </div>
</body>
</html>

이 예제에서는 그리드 컨테이너가 가능한 한 많은 열을 생성하며, 각 열의 최소 너비는 200px, 최대 너비는 남은 공간을 비례적으로 나눕니다.

grid-template-columns와 repeat() 함수는 복잡한 레이아웃을 간단하게 정의하고, 반응형 디자인을 구현하는 데 매우 유용합니다.

저작자표시 비영리 변경금지

'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글

[HTML] 브라우저 최소 폭 (0)	2024.07.26
[CSS] grid-template-columns의 repeat를 포함한 속성 설명 (0)	2024.07.26
[CSS Grid & Flex] 같은 레이아웃을 표현한 예제 (0)	2024.07.26
[CSS Flex] 레이아웃에 어울리는 태그 세트 (0)	2024.07.26
[CSS Grid] 레이아웃에 어울리는 태그 세트 (0)	2024.07.26