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

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

질문:

요소가 새 행에 동적으로 줄 바꿈되도록 허용하면서 최대 열 수를 포함하는 CSS 그리드를 지정할 수 있습니까? 화면 너비가 바뀌면?

답변:

예. CSS Grid를 사용하면 JavaScript나 미디어 쿼리를 사용하지 않고도 이를 달성할 수 있습니다. 이 접근 방식은 열 자동 맞춤 개념을 활용합니다.

해결책:

1. display: 그리드 속성을 사용하여 그리드 컨테이너를 만듭니다.
2. 자동 맞춤을 반복으로 사용하는 Repeat() 함수를 사용하여 Grid-template-columns 속성을 설정합니다. 유형.
3. 자동 맞춤 내에서 minmax(max(width, 100%/N), 1fr)을 사용하여 열 동작을 지정합니다.

설명:

• max(width, 100%/N) 은 열 너비가 최대 너비 또는 컨테이너 너비의 분수(100%/N)입니다.
• 1fr은 기본 열 너비를 남은 공간의 1분할로 설정합니다.

결과적으로 컨테이너 너비가 늘어나면 정의된 최대 열 수 내에서 사용 가능한 공간에 맞게 열이 확장됩니다. 필요에 따라 요소가 자동으로 새 행으로 줄 바꿈됩니다.

코드 조각:

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

예:

다음 예에서는 최대 4개의 열로 구성된 그리드 컨테이너가 생성되고 요소가 래핑됩니다. 따라서:

<div>

이 접근 방식을 사용하면 CSS 그리드의 최대 열 수를 정의할 수 있으므로 미디어 쿼리 없이도 화면 너비가 변경되면 요소가 새 행으로 줄 바꿈될 수 있습니다.

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