미디어 쿼리 없이 CSS 그리드의 최대 열 수를 정의하는 방법은 무엇입니까?

CSS 그리드: 미디어 쿼리 없이 최대 열 수 정의

CSS 그리드에서는 요소가 새 항목으로 줄바꿈되도록 허용하면서 그리드의 최대 열 수를 지정할 수 있습니다. 화면 너비가 변경됨에 따라 행이 변경됩니다. 이를 달성하려면 max(width, 100%/N) 함수를 사용하는 것이 좋습니다. 여기서 N은 최대 열 수를 나타냅니다.

max 함수는 컨테이너 너비가 증가하면 항상 100%/N이 되도록 보장합니다. 너비보다 커야 합니다. 이렇게 하면 행당 요소가 N개를 넘지 않습니다.

예:

.grid-container {
  --n: 4; /* The maximum number of columns */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(max(200px, 100%/var(--n)), 1fr));
}

.grid-item {
  /* Styling for grid items */
}

이 예에서 최대 열 수는 --를 사용하여 4로 설정됩니다. n 사용자 정의 속성. Grid-template-columns 속성은 자동 채우기를 사용하여 열을 생성하고 max 함수를 적용하여 지정된 최대 열 수를 보장합니다.

필요에 따라 --n 값을 조정하여 최대 열 수를 변경할 수 있습니다. . 이는 JavaScript나 미디어 쿼리에 의존하지 않고 요구 사항에 대한 일반적인 솔루션을 제공합니다.

위 내용은 미디어 쿼리 없이 CSS 그리드의 최대 열 수를 정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!