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 중국어 웹사이트의 기타 관련 기사를 참조하세요!