CSS 그리드가 벽돌 레이아웃에 충분하지 않은 이유

벽돌 레이아웃을 구현하기 위한 사용하기 쉬운 방법은 웹 개발자 커뮤니티에서 오랫동안 추구해 왔습니다. Pinterest 및 관련 디자인 덕분에 CSS만 사용하여 미학적으로 역동적인 그리드를 만드는 것은 어려웠습니다. Chrome 팀은 CSS 그리드 레이아웃 사양에 벽돌 기능을 추가해야 한다는 최근 권장 사항에도 불구하고 이 전략이 최선이 아닐 수 있다고 주장합니다. 다음은 벽돌이 고유한 레이아웃 기술을 가져야 한다고 생각하는 몇 가지 이유와 개발자에게 잠재적인 이점을 제공합니다.

CSS 그리드에 벽돌을 추가하는 것에 반대하는 사례

1. 성능 문제

CSS 그리드 및 벽돌 레이아웃은 근본적으로 다른 방식으로 항목 배치를 처리합니다.

• CSS 그리드: 모든 항목은 레이아웃 전에 배치되므로 브라우저가 정확한 트랙 크기와 배치를 계산할 수 있습니다.
• Masonry: 항목은 배치된 대로 배치되므로 고정 트랙 크기와 고유 트랙 크기를 혼합할 때 심각한 성능 문제가 발생할 수 있는 동적 계산이 필요합니다.

grid-template-columns: 200px auto 200px와 같은 혼합 트랙 정의가 있는 그리드를 고려해 보세요. 벽돌을 사용하면 브라우저는 가능한 모든 구성의 모든 항목을 미리 레이아웃해야 하므로 대규모 그리드에서는 기하급수적인 복잡성이 발생합니다. 이는 서브그리드와 같은 고급 기능을 사용할 때 특히 문제가 됩니다.

이러한 본질적인 제한이 있는 레이아웃 방법을 제공하지 않기 위해 우리는 CSS 그리드와 석조 구조를 분리하는 솔루션을 제안합니다.

2. 사양 복잡성

석조를 그리드 사양에 병합하면 서식 지정 컨텍스트의 핵심 원칙과 충돌하는 불일치가 발생합니다.

• 정렬 속성: 그리드는 6개의 정렬 속성을 지원하지만 벽돌은 Flexbox와 같은 하위 집합만 사용합니다.
• 배치 속성: 그리드에는 4개의 배치 속성(예: 그리드-기둥-시작)이 있지만 벽돌에는 2개만 필요합니다.
• 트랙 크기 조정: 그리드 템플릿 열: 반복(자동 채우기, 최대 콘텐츠)과 같은 특정 패턴은 벽돌에서는 의미가 있지만 그리드에서는 유효하지 않아야 합니다.

이러한 불일치를 도입하면 어떤 기능이 어떤 상황에서 작동하는지 기억해야 하므로 개발자의 인지 부하가 ​​증가합니다. 이러한 단편화는 혼란과 오류를 초래할 수 있습니다.

제안: 별도의 레이아웃 방법으로서의 석조 공사

석조를 CSS 그리드와 묶는 대신 디스플레이: 석조를 사용하여 독립형 레이아웃 방법으로 정의하는 것이 좋습니다. 이 접근 방식은 위에서 설명한 함정을 피하면서 개발자가 그리드에 대해 선호하는 모든 유연성을 유지합니다.

예

고전적인 석조 레이아웃

다음을 사용하여 동일한 크기의 기둥을 사용한 간단한 석조 레이아웃을 얻을 수 있습니다.

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

혼합 트랙 크기

좁은 열과 넓은 열이 교대로 있는 레이아웃의 경우:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

트랙 자동 크기 조절

콘텐츠에 따라 트랙 크기가 자동으로 조정되도록 허용:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
  gap: 1rem;
}

스패닝 및 배치

여러 트랙에 걸쳐 항목을 활성화하려면:

.masonry {
  display: masonry;
  masonry-template-tracks: repeat(auto-fill, auto);
  gap: 1rem;
}

별도의 조적 레이아웃의 장점

명확성: 개발자는 CSS Grid 호환성의 미묘한 차이에 대해 걱정하지 않고 벽돌을 사용할 수 있습니다.

유연성: 새로운 제약 조건을 도입하지 않고도 그리드와 유사한 모든 기능을 계속 사용할 수 있습니다.

미래 보장: 전용 벽돌 사양은 브라우저 전체에서 일관된 동작을 보장하고 불필요한 복잡성을 방지합니다.

위 내용은 CSS 그리드가 벽돌 레이아웃에 충분하지 않은 이유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!