CSS 그리드에서 특정 행과 열의 스타일을 선택적으로 지정하려면 어떻게 해야 합니까?

CSS 그리드의 특정 열 또는 행 타겟팅

CSS 그리드 레이아웃에서 그리드 템플릿 행 및 그리드 템플릿 열 속성은 각각 행과 열의 수를 정의합니다. 그러나 그리드의 특정 부분에 스타일을 지정해야 하는 경우도 있습니다.

타겟팅 행

임의 행의 스타일을 지정하려면 표시가 다음과 같이 설정된 래퍼 요소를 사용할 수 있습니다. 내용물. 이를 통해 행에 여러 셀이 포함되어 있어도 전체 행의 스타일을 단일 엔터티로 지정할 수 있습니다.

예를 들어 다음 코드를 고려해 보세요.

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

.grid-item {
  border: 1px solid black;
  padding: 5px;
}

.grid-row-wrapper {
  display: contents;
}

.grid-row-wrapper > .grid-item {
  background: skyblue;
}

<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-row-wrapper">
    <div class="grid-item">6</div>
    <div class="grid-item">7</div>
    <div class="grid-item">8</div>
    <div class="grid-item">9</div>
    <div class="grid-item">10</div>
  </div>
  <div class="grid-item">11</div>
  <div class="grid-item">12</div>
  <div class="grid-item">13</div>
  <div class="grid-item">14</div>
  <div class="grid-item">15</div>
  <div class="grid-item">16</div>
  <div class="grid-item">17</div>
  <div class="grid-item">18</div>
  <div class="grid-item">19</div>
  <div class="grid-item">20</div>
</div>

이 예에서는 .grid-row-wrapper 클래스는 그리드 항목의 두 번째 행을 포함하는 래퍼 요소에 적용됩니다. 이 항목의 배경색은 .grid-row-wrapper >를 사용하여 하늘색으로 설정됩니다. .grid-item selector.

열 타겟팅

특정 열을 타겟팅하는 것은 조금 더 까다롭습니다. CSS 그리드는 열을 선택하는 직접적인 방법을 제공하지 않지만 다른 속성의 조합을 사용하여 원하는 효과를 얻을 수 있습니다.

한 가지 접근 방식은 각각 자체 그리드 템플릿이 있는 여러 그리드 컨테이너를 사용하는 것입니다. 이를 통해 각 열의 레이아웃을 독립적으로 제어할 수 있습니다.

또 다른 접근 방식은 nth-child() 선택기를 사용하여 그리드의 특정 셀을 대상으로 지정하는 것입니다. 그러나 특히 그리드가 동적으로 변경되는 경우 유지 관리가 어려울 수 있습니다.

특정 열이나 행을 정기적으로 대상으로 지정해야 하는 경우 추가 선택기와 기능을 제공하는 전처리기나 라이브러리를 사용하는 것이 더 나은 경우가 많습니다. CSS 그리드.

위 내용은 CSS 그리드에서 특정 행과 열의 스타일을 선택적으로 지정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!