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

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

CSS 그리드는 웹 요소 레이아웃에 대한 강력한 접근 방식을 제공하지만 때로는 최대 열 수를 지정해야 할 수도 있습니다. 화면 너비가 변경됨에 따라 요소가 새 행으로 줄 바꿈되도록 허용하면서 그리드의 열 수를 늘립니다.

미디어 쿼리나 JavaScript 없이 이를 달성하려면, 다음 CSS 규칙을 사용해 보세요.

grid-template-columns: repeat(auto-fill, minmax(max(width, 100%/N), 1fr));

여기서 N은 그리드를 제한하려는 최대 열 수를 나타냅니다.

max(width, 100%/N) 부분 각 열의 최소 너비가 컨테이너 너비 또는 100%/N(둘 중 더 큰 것)인지 확인합니다. 이 구성은 필요한 경우 요소가 새 행으로 줄 바꿈되도록 허용하면서 열 수를 N으로 효과적으로 제한합니다.

예:

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

이 CSS는 최대 4개의 그리드를 생성합니다. 각 열의 최소 너비는 200px 또는 컨테이너 너비의 25%입니다.

--n 값을 조정하여 최대값을 변경할 수 있습니다.

이 솔루션은 제한된 수의 열로 그리드를 생성하는 동시에 다양한 화면 크기에 걸쳐 응답성을 유지하는 유연하고 사용자 정의 가능한 접근 방식을 제공합니다.

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