CSS 그리드 내 확장 가능한 섹션

CSS Grid는 최소한의 코드로 반응 형 레이아웃을 생성하는 환상적인 도구이며, 종종 미디어 쿼리가 필요하지 않습니다. 깨끗한 HTML의 우선 순위를 정하는 다양한 레이아웃에 사용하는 것이 편합니다. 그러나 최근의 UI 챌린지는 버튼을 클릭하면 원래 그리드 구조와 응답 성을 유지하면서 그리드 셀을 전체 너비로 확장하는 독특한 문제를 제시했습니다.

요구 사항은 확장 된 셀이었다.

1. 트리거링 셀 바로 아래에 나타납니다.
2. 전체 그리드 너비를 차지합니다.

놀랍게도 우아한이 솔루션은 몇 줄의 CSS 그리드를 사용합니다. 이 기사는 JavaScript없이이를 달성하기 위해 세 가지 간단한 CSS 그리드 기술을 자세히 설명합니다.

문제 : 확장 가능한 제품 카드

UI 작업의 단순화 된 예는 다음과 같습니다. 스토리 북 구성 요소 라이브러리에는 제품 카드 그리드가 있습니다. 각 카드에는 상세한 제품 정보가 포함 된 더 큰 전체 너비 카드를 공개하기 위해 "빠른보기"버튼이 필요했습니다. 이 확장은 다음과 같습니다.

• 클릭 된 카드 아래에 전체 너비 카드를 동적으로 삽입하십시오.
• 원래 DOM 주문 및 시각적 그리드 배열을 보존하십시오.
• 브라우저 크기 조정에 대해 완전히 반응합니다.

처음에는 카드를 재배치하는 데 JavaScript가 필요하다고 가정했습니다. "빠른보기"구현을 온라인으로 검색하면 대부분 모달 또는 오버레이 솔루션이 생성되었습니다. 모달은 집중 콘텐츠에 일반적이지만 그리드 내에서 원활하게 통합되는 솔루션을 원했습니다.

이 솔루션은 몇 가지 강력한 CSS 그리드 기능을 결합하여 발생했습니다.

CSS 그리드 트릭 #1 : 자동 결제 열

기존 그리드 시스템은 이미이 기술을 사용했습니다.

 .grid {
  디스플레이 : 그리드;
  갭 : 1rem;
  그리드-템플릿-컬럼 : 반복 (자동 결제, 20REM);
}

grid-template-columns: repeat(auto-fit, 20rem); 사용 가능한 공간에 자동으로 조정되어 필요에 따라 새 행으로 감싸는 열 (여기서 20rem 너비)을 만듭니다. Sara Soueidan의 auto-fit vs. auto-fill 에 대한 설명은 훌륭합니다. 단순화를 위해 고정 열 폭을 사용했습니다.

CSS 그리드 트릭 #2 : 전폭 스팬

확장 된 카드를 수용하기 위해 :

 .fullwidth {
  그리드 -컬럼 : 1 / -1;
}

Trick #1이기 때문에 명시 적 그리드, grid-column: 1 / -1; 전체 너비에 걸쳐 (열 1에서 마지막까지).

그러나 이것은 전체 너비 카드 위에 차이가 남습니다.

CSS 그리드 트릭 #3 : 밀도가 높은 포장

이러한 격차를 메우는 것은 가짜 메이슨 접근법을 사용합니다.

 .grid {
  그리드-아우토 플로우 : 밀도;
}

grid-auto-flow: dense; 그리드 초기에 자동 배치, 충전 간격을 최적화합니다. 이것은 다음과 같은 경우 효과적으로 작동합니다.

• 모든 열의 너비는 동일합니다 (또는 유연한 폭에 minmax() 사용).
• 행 내의 모든 셀은 높이가 동일합니다 (기본값; align-items: stretch 암시 적으로 셀을 행 높이로 채 웁니다).

원래 DOM 주문은 보존되어 접근성에 중요합니다. MDN은 CSS 그리드 자동 배치에 대한 포괄적 인 설명을 제공합니다.

완전한 솔루션

이 세 가지 기술은 최소한의 CSS, 미디어 쿼리 및 레이아웃 계산을위한 JavaScript가없는 간단하고 효율적인 레이아웃을 만듭니다.

JavaScript의 역할

JavaScript는 여전히 필요하지만 기능에만 필요합니다 : 클릭 이벤트 관리, 초점 및 주입 된 카드 표시. 프로토 타입에서 전폭 카드는 하드 코딩되었습니다. JavaScript는 가시성을 전환합니다.

프로덕션 환경에서는 카드가 동적으로 가져 와서 삽입 될 것입니다. DOM이 팽만감을 피하기 위해 주입 된 내용은 점진적인 향상으로 간주되어야합니다. JavaScript가 실패하면 사용자는 제품 세부 정보 페이지로 리디렉션됩니다.

접근성 고려 사항

시맨틱 HTML, ARIA 속성 및 키보드 내비게이션 우선 순위 :

• 그리드가 사용됩니다<ul> 의미 론적 명확성을 위해.</ul>
• 제품 카드입니다<li> 적절한 제목이있는 요소.</li> <li> DOM 주문은 자연스러운 탭 주문을 위해 보존됩니다.</li> <li> Focus Management는 적절한 키보드 탐색을 보장합니다. (추가 개선에는 주입 카드에 대한 명시 적 레이블, 마감을위한 <kbd>ESC</kbd> 키 바인딩 및 가시성을 보장하기위한 뷰포트 스크롤이 포함될 수 있습니다).</li>

결론

이 접근법은 모달에 대한 깨끗한 대안을 제공하여 페이지를 가리지 않고 추가 컨텐츠를 드러냅니다. 이미지 캡션 또는 헬퍼 텍스트와 같은 다양한 시나리오에 유용 할 수 있습니다 <details>/<summary></summary></details> 어떤 경우에는. 나는 당신의 생각과 대안 접근법을 듣고 싶어합니다.

위 내용은 CSS 그리드 내 확장 가능한 섹션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!