최소 크기의 최대 열이있는 자동 고정 CSS 그리드

Drupal 10은 새로운 자동 충전 CSS 그리드 기술을 소개하며 공유하게되어 기쁩니다.

주요 기능은 다음과 같습니다.

• 그리드의 기본 상태를 정의하는 사용자 정의 가능한 최대 열 카운트.
• 동적 열 조정 : 그리드 셀이 지정된 최소 너비 아래로 떨어지면 그리드가 자동으로 열 수를 줄입니다.
• 최대 너비 활용 : 기둥 숫자에 관계없이 그리드 셀은 항상 컨테이너의 너비를 채우기 위해 확장됩니다.
• JavaScript가없는 반응 형 디자인 : JavaScript가없는 다양한 뷰포트 크기에서 작동합니다.

자동 충전 그리드 활동

드래그 가능한 요소에 의해 왼쪽으로 압축 될 때 그리드가 어떻게 반응하는지 관찰하십시오.

코드

구현 준비가 되셨습니까? CSS는 다음과 같습니다.

 .grid-container {
  / * 사용자 정의 값 */
  --grid-layout-gap : 10px;
  --grid-column-count : 4;
  --grid-item-Min-Width : 100px;

  / * 계산 된 값 */
  -갭 카운트 : calc (var (-grid-column-count) -1);
  --total-gap-width : calc (var (-Gap-count) * var (-grid-layout-gap);
  --grid-item-max-width : calc ((100%-var (-Total-Gap-width)) / var (-grid-column-count);

  디스플레이 : 그리드;
  그리드-템플릿-컬럼 : 반복 (autofill, minmax (max (var (-grid-item-min-width), var (-grid-item-max-width)), 1fr));
  그리드 갭 : var (-Grid-Layout-Gap);
}

자동 고정 그리드 이해

이 코드는 최신 CSS 기능을 활용합니다 : CSS Grid의 repeat() , auto-fill() 및 minmax() 함수와 함께 max() 및 calc() .

auto-fill() 가 설명했습니다

auto-fill() 열로 동적으로 행을 채우는 데 중요합니다. auto-fill() 대 auto-fit() 에 대한 더 깊이 다이빙하려면 Sara Soueidan의 훌륭한 기사 및 동반 비디오를 참조하십시오.

max() 로 열 제한 관리

max() 함수는 과도한 열을 방지합니다. 최소 너비를 유지하면서 각 그리드 셀의 너비가 계산 된 백분율을 초과하지 않도록합니다. 계산은 그리드 갭을 설명합니다.

 MAX (calc (25% -<grid-gap-for-one-cell> ), 100px)</grid-gap-for-one-cell>

이것은 CSS 변수를 사용하여 달성됩니다.

 -갭 카운트 : calc (var (-grid-column-count) -1);
--total-gap-width : calc (var (-Gap-count) * var (-grid-layout-gap);
--grid-item-max-width : calc ((100%-var (-Total-Gap-width)) / var (-grid-column-count);

이는 열과 갭의 수를 고려하여 최대 너비를 동적으로 계산합니다.

minmax() 로 전체 너비 보장

minmax() 그리드 셀이 항상 컨테이너 너비를 채우기 위해 스트레칭을 보장합니다. 공간이 허용되면 최소 너비를 설정하고 1fr (분수 단위)로 확장 할 수 있습니다.

 Minmax (Minmax)<grid-item-width> , 1fr)</grid-item-width>

완전한 솔루션

이러한 요소를 결합하여 최종 코드는 원하는 자동 고정 동작을 달성합니다.

 -갭 카운트 : calc (var (-grid-column-count) -1);
--total-gap-width : calc (var (-Gap-count) * var (-grid-layout-gap);
--grid-item-max-width : calc ((100%-var (-Total-Gap-width)) / var (-grid-column-count);

그리드-템플릿-컬럼 : 반복 (autofill, minmax (max (var (-grid-item-min-width), var (-grid-item-max-width)), 1fr));

CSS의 힘

이 예는 현대 CSS의 고급 기능을 보여줍니다. 우리는 JavaScript없이 복잡한 레이아웃을 만들어 CSS의 진화를 보여줍니다.

auto-fill() 사용하기위한 제안과이를 가능하게하는 CSS 사양 작성자 및 구현 자에게 감사드립니다.

위 내용은 최소 크기의 최대 열이있는 자동 고정 CSS 그리드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!