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

CSS 그리드 레이아웃의 대상 스타일 지정: 행 및 열

CSS 그리드 레이아웃에서는 특정 행이나 열을 선택적으로 대상으로 지정하는 것이 필수적입니다. 정확한 스타일링. n번째 하위 선택기는 기존 항목 선택에 사용할 수 있지만 그리드 구조 내의 요소를 타겟팅하는 경우에는 부족합니다.

타겟팅 행

이 문제를 해결하려면 제한 사항이 있으므로 표시 속성이 내용으로 설정된 래퍼 요소를 사용하는 것이 좋습니다. 이 기술을 사용하면 래퍼의 하위 항목이 그리드의 트랙 내에 위치하더라도 스타일을 구체적으로 할당할 수 있습니다.

예를 들어 아래 코드 스니펫은 특정 행을 파란색으로 강조 표시하는 방법을 보여줍니다.

.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;
}

이 예에서 래퍼 요소 ".grid-row-wrapper"의 표시 속성은 내용으로 설정되어 직계 하위 요소 ".grid-item"이 파란색 배경색을 상속하여 원하는 효과를 만듭니다.

열 타겟팅

위 기술은 행에 효과적이지만 CSS 그리드 레이아웃에는 특정 항목을 타겟팅하는 동등한 메커니즘이 부족합니다. 열을 직접 사용합니다. 그러나 대체 솔루션에는 justify-self 또는 align-self 속성을 사용하여 그리드 내의 요소 위치를 조정하는 작업이 포함되어 있어 특정 열을 대상으로 하는 것처럼 보일 수 있습니다.

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