CSS 그리드: 반응적으로 최대 열 수를 제한하는 방법은 무엇입니까?

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

질문:

요소가 자동으로 새 항목으로 줄 바꿈되도록 허용하면서 최대 열 수로 CSS 그리드를 정의하는 것이 가능합니까? 화면 너비가 변경되면 행이 변경되나요?

해결책:

CSS 그리드를 사용하면 반복(자동 채우기, minmax(최대( 너비, 100%/N), 1fr)) 구문. 여기서 N은 원하는 최대 열 수를 나타냅니다. 그리드 컨테이너의 너비가 증가함에 따라 계산의 100%/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 {
  background: tomato;
  padding: 5px;
  height: 50px;
  margin: 10px;

  line-height: 50px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
  box-sizing: border-box;
}

이 예에서 --n 사용자 정의 속성은 4로 설정되어 최대 4개의 열. 컨테이너의 너비가 변경되면 항목은 지정된 열 제한을 유지하면서 자동으로 새 행으로 줄 바꿈됩니다.

이 솔루션은 미디어 쿼리나 JavaScript에 의존하지 않고 유연하고 반응성이 뛰어난 그리드 레이아웃을 제공합니다.

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