Chrome 팀은 3D 건물에서 석재 유형 레이아웃을 있습니다. 그러나 CSS 그리드 사양의 일부로 이를 구현하면 'API 약관'의 최근 WebKit 게시물 착오일 수 있습니다 또한 웹키트 게시물이 100개 이상의 아무도 제안하지 않았던 석조 공사였죠.
따라서 이 게시물에서는 Chrome에서 CSS 그리드 레이아웃 사양의 일부로 석재를 구현하고 대체 제안이 무엇을 할 수 있는지 정확하게 보여줍니다. 간단히 말해,
- Chrome팀은 석조 공사의 차단을 해제해 드리려고 매우 열정적입니다. 확인할 수 있습니다
- 그리드 사양에 석재를 추가하는 것은 다른 이유를 생각해 봅시다.
- 석조 공사 그리드 사양을 벗어나는 경우에도 석재, 정렬 또는 틈새와 같은 속성의 사용 기능을 살펴보겠습니다.
석조물도 그리드의 일부여야 하나요?
Chrome팀은 석재가 별도의 레이아웃이어야 한다고 생각합니다.
메서드,
display: masonry를 사용하여 정의 (또는 다른 키워드가
있습니다. 이 게시물의 후반부에서
볼 수 있습니다
석조물의 정의가 외부와 관련되어 있다고 생각하는 이유는 두 가지입니다. 잠재적인 레이아웃 성능 문제의 가능성, 그리고 석재와 그리드 모두 하나의 레이아웃 메서드에서는 의미가 있지만 있습니다.
성능
그리드와 석조물은 브라우저가 크기 조정 및 게재위치와 관련이 있습니다. 그리드가 배치되면 모든 항목이 레이아웃과 브라우저는 각 트랙에 무엇이 있는지 정확히 알고 있습니다. 이를 통해 그리드에서 매우 유용합니다. 석재를 사용하면 물품이 있는 그대로 배치됩니다. 브라우저가 각 트랙에 몇 개가 있는지 알지 못합니다. 이것은 모든 기본 크기의 트랙 또는 모든 고정 크기의 트랙과 관련된 문제가 발생하지만 혼합된 트랙과 내장 트랙을 혼합해 사용합니다. 이 문제를 해결하려면 브라우저에서 원하는 결과를 얻기 위해 가능한 모든 방법으로 모든 항목을 배치하는 큰 그리드를 사용하면 레이아웃 성능에 기여할 수 있습니다. 있습니다
따라서
grid-template-columns: 200px auto 200px: 그리드에서 흔히 하는 작업
문제에 부딪히게 됩니다. 이러한 문제가 기하급수적으로
하위 그리드를 참조하세요.
대부분의 사람들이 이에 대해 부딪치지 않을 것이라는 논쟁이 있지만 이미 사람들은 매우 큰 규모이며 그리드 배송을 원하지 않음 대안이 있을 때 사용 방법에 제한이 있는 것 접근하는 것입니다.
각 레이아웃 메서드에서 의미가 없는 항목은 어떻게 처리할까요?
Flexbox와 그리드가 CSS의 일부가 되었을 때 개발자는 종종 일관성 없는 방식으로 작동합니다. 고객이 경험한 비일관성은 블록 레이아웃에 따라 레이아웃이 어떻게 작동하는지에 관한 가정이 오랫동안 지속되었기 때문입니다. 시간이 지남에 따라 개발자들은 서식을 이해하기 시작했습니다. 있습니다. 그리드 또는 Flex 서식 컨텍스트로 전환할 때 다르게 작동합니다. 예를 들어 Flexbox일 때는 사용할 수 있습니다. Flexbox는 1차원이기 때문입니다.
석조물을 그리드로 묶으면 서식 컨텍스트와 Box에 정의된 정렬 속성과 같은 항목의 사용 가능 여부 서식 컨텍스트별 정렬 사양입니다.
이전에 설명한 실적 문제를 해결하기로 결정한다면 석재에서 내부 및 고정 트랙 정의를 혼합하여 불법으로 규정한 경우 그리드 레이아웃의 매우 일반적인 패턴은 석조 공사.
석조물에 적합한 패턴도 있습니다. 예를 들어
grid-template-columns: repeat(auto-fill, max-content), 다음 항목이 없기 때문입니다.
교차 제약조건이지만 그리드에서 유효하지 않은 상태로 유지해야 합니다. 다음은
Google에서 동작할 것으로 예상되는 속성의 목록
다르게 표시됩니다
유효한 값이 다를 수 있습니다
grid-template-areas: 석조 공사에서는 지면에 첫 번째 행만 지정할 수 있습니다. 비석재 방향입니다.grid-template: 약어는 모든 차이가 존재합니다.grid-template-columns및grid-template-rows로 인해 실제 값이 달라졌습니다.grid-auto-flow는 석조물에 적용되지 않고masonry-auto-flow는 그리드에 적용되지 않습니다. 병합 는 지정한 레이아웃 메서드로 인해 유효하지 않은 항목에 관한 문제를 일으킵니다. 있습니다.- 그리드에는 4개의 게재위치 속성 (
grid-column-start등)이 있습니다. 석재는 두 개만 있습니다. - 그리드는 6개의
justify-*및align-*를 모두 사용할 수 있습니다. 속성이지만 Masonry는 Flexbox와 같은 하위 집합만 사용합니다.
또한 모든 새로운 오류에서 발생하는 작업을 지정해야 하는 요구사항도 있습니다.
Grid-with-masonry에서 유효하지 않은 값을 사용하는 개발자로 인한 사례
또는 석재가 없는 격자무늬입니다. 예를 들어,
grid-template-columns: masonry 또는 grid-template-rows: masonry
동시에 둘 다 사용할 수는 없습니다 두 가지를 동시에 사용하면 어떻게 되나요?
이러한 세부정보는 모든 브라우저가
같은 작업을 할 수 있습니다.
이 모든 것이 사양의 관점에서 복잡하게 되었습니다.
있습니다. 우리는 모든 것이 석조물을 고려하도록 해야 합니다.
석조물에 사용 가능한지 여부와 관계없이 또한 처음부터
살펴봤습니다 그럼에도 불구하고 왜 머릿속에
display: grid를 사용하면 석조 공사로 인해 작동하지 않는 부분도 있나요?
대체 제안
이미 언급했듯이 Chrome팀은 조직 외부의 석조 공사를 살펴보겠습니다 그렇다고 해서 간단한 레이아웃 메서드를 제공합니다. WebKit의 모든 데모는 여전히 가능합니다.
클래식 석조 레이아웃
대부분의 사람들이 석조물이라고 하면 여러 개의 동일한 구조물이 있는 레이아웃을 생각합니다. 크기가 조정된 열입니다. 이는 다음 CSS를 사용하여 정의되며 동등한 그리드가 번들로 묶인 것보다 적은 코드 버전을 참조하세요.
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
}
다양한 열 너비에 그리드 유형 트랙 크기 조정 사용
이전에 언급한 내장 트랙과 고정 트랙이 혼합된 문제 이외에는 그리드에서 원하는 모든 트랙 크기를 사용할 수 있습니다. 예: WebKit 블로그 게시물의 예시 좁고 더 넓은 열을 반복하는 패턴입니다.
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, minmax(8rem, 1fr) minmax(16rem, 2fr)) minmax(8rem, 1fr);
gap: 1rem;
}
석조물용 추가 트랙 크기 조정
다음과 같은 이유로 그리드에서 허용되지 않는 추가적인 트랙 크기 옵션이 있습니다. 그리드가 2차원 레이아웃 메서드라는 사실입니다. 이것들은 석재로 만들었지만 그리드에서 작동하지 않으면 혼란스러울 것입니다.
max-content 크기의 트랙을 자동으로 채우는 중입니다.
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, max-content);
gap: 1rem;
}
auto 크기의 트랙을 자동으로 채우면 같은 크기의 트랙이 생성됩니다.
자동으로 크기가 조정됩니다.
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, auto);
gap: 1rem;
}
콘텐츠를 기둥에 걸쳐 확장하고 석재 레이아웃에 항목을 배치하도록 허용합니다.
별도의 석조물에서 여러 개의 기둥에 걸쳐 있는 콘텐츠를 포함하지 않을 이유가 없습니다.
지정할 수도 있습니다 여기서는 masonry-track 속성을 사용할 수 있습니다. 즉,
측정기준 1개만 있으므로 masonry-track-start 및 masonry-track-end
돌출 구조물 레이아웃에서는 사물을 포괄할 수 있습니다.
.masonry {
display: masonry;
masonry-template-tracks: repeat(auto-fill, auto);
}
.span-2 {
masonry-track: span 2; /* spans two columns */
}
.placed {
masonry-track: 2 / 5; /* covers tracks 2, 3, and 4 */
}
석조 선로 채택 하위 석조물 또는 서브그리드
이는 별도의 석조물 사양으로 지지할 수 있으며, 마찬가지로 단, 내장 및 고정 크기의 혼합 트랙은 허용되지 않습니다. 정확히 무엇 정의해야 하는 것처럼 보입니다. 이 것이 데이터 기반 의사 결정을 내리는 데 있습니다
결론
배송할 수 있는 사양의 지점에 도달하고자 합니다. 상호 운용이 가능합니다 하지만 지금과 같은 상황에서 잘 작동하는 방식으로 이는 개발자가 의지할 수 있는 것입니다. 문제를 해결할 수 있는 유일한 방법은 개괄적으로 설명하자면, 두 번째 문제인 석조 공사에서 격자 일부가 불법이어서는 안 됩니다. 좋은 의견이라고 생각하지 않습니다. 특히 원하는 모든 그리드 기능을 가질 수 있는 경우 다른 것들을 명확하게 분리하여 유지합니다.
의견이 있는 경우 다음에서 토론에 참여하세요. 문제 9041.
브라머스, 탭 앳킨스-비트너, 우나 크라베츠, 이안 킬패트릭, 크리스 해럴슨 씨에게 감사드립니다. 이 게시물과 게시물 관련 토론을 검토해 주세요.