미디어 쿼리를 사용하지 않고 CSS 그리드의 최대 열 수를 어떻게 설정할 수 있습니까?

미디어 쿼리가 없는 CSS 그리드의 최대 열 수

그리드 최대 열 수 정의

최대값이 설정된 그리드를 정의하는 것이 가능합니까? 뷰포트 크기가 변경될 때 요소가 새 행으로 분리되도록 허용하는 동안 열 수는 얼마나 됩니까? 기본적으로 그리드에서는 열이 무한히 확장될 수 있으므로 더 좁은 화면에서는 바람직하지 않은 레이아웃이 발생할 수 있습니다.

최대 열 수로 그리드 달성

이를 해결하기 위해 CSS 그리드에서는 다음과 같은 개념을 도입합니다. Grid-template-columns 속성 내의 max(). max() 함수는 두 개의 매개변수를 허용합니다. 첫 번째 매개변수는 단일 열의 최대 너비를 나타내고, 두 번째 매개변수는 각 열이 상위 컨테이너 내에서 응답성을 유지하도록 보장합니다.

구현

다음을 고려하세요. 코드 조각:

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

여기서 --n은 최대 열 수를 정의합니다. minmax()는 각 열의 최소 너비가 200px이지만 100%/var(--n)을 초과하지 않도록 보장합니다. 이 공식은 컨테이너 너비가 증가함에 따라 열 너비가 100%/maximum_number_of_columns를 초과하지 않도록 보장하여 추가 열 생성을 방지합니다.

이 기술을 사용하면 다양한 화면에 적응하는 반응형 디자인으로 그리드를 생성할 수 있습니다. 지정된 최대 열 수를 유지하면서 크기를 조정합니다.

위 내용은 미디어 쿼리를 사용하지 않고 CSS 그리드의 최대 열 수를 어떻게 설정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!