에지 간 그리드를 사용하여 전체 폭 요소

중앙 텍스트 열과 같은 제한된 폭의 컨테이너 내에 전체 폭 요소를 생성하려면 영리한 CSS 기술이 필요합니다. 하나의 일반적인 접근법은 뷰포트 너비에 따라 상대 왼쪽 포지셔닝과 음수 왼쪽 마진을 사용합니다. 이 방법에는 한계가 있지만 (예 : 신체 및 중앙 컨테이너에 숨겨진 오버플로가 필요함) 비교적 간단하며 다른 컨테이너 요소를 방해하지 않습니다.

CSS 그리드를 사용한 대체 방법이 널리 논의되었습니다.

• Tyler의 "CSS 그리드 레이아웃을 사용한 Breaking"및 Rachel의 응답.
• Rachel의 "CSS 그리드와 이름이있는 편집 설계 패턴".
• Selen Gora의 "CSS 그리드를 사용하여 컨테이너의 상자를 전체 너비로 설정하십시오."
• Bryan Robinson의 "CSS 하위 그리드를 사용하여 기사 템플릿에서 전체 범위 컨텐츠 줄무늬를 레이아웃하십시오."

이 방법은 일반적인 가정을 공유합니다. 전체 페이지에 걸친 가장자리 간 그리드 . 이것은 질문을 제기합니다. body { display: grid; } 전체 페이지 레이아웃의 경우 실용적인 접근 방식은? 일부 개발자는이를 수행하지만 잠재적 인 과제를 제시합니다.

몇 가지 단점이 있습니다.

1. 일반적으로 전폭 요소 인 헤더 및 바닥 글은 그리드 내에서 명시 적 배치 및 스패너가 필요하므로 간단한 블록 레벨 요소를 사용하는 것과 비교하여 복잡성이 추가됩니다. 보다 유연한 접근 방식에는 블록 레벨 헤더 및 바닥 글이있는 중앙 가장자리 간 그리드가 포함될 수 있습니다.
2. 중앙 열 내에 모든 요소를 ​​배치하는 (예 : article > * { grid-columns: 2 / 3; } ) 일부 항목을 선택적으로 확장하려면 번거로운 느낌이 듭니다. 주로 중앙 컨텐츠의 경우, 부모 요소 관리 레이아웃은 그리드에 각 요소를 개별적으로 배치하는 것보다 간단하고 강력한 솔루션을 제공합니다.

본질적으로 결함이 없지만, 에지 간 그리드 접근법은 많은 레이아웃에 대해 덜 직관적이고 잠재적으로 더 복잡하다고 느낄 수 있습니다. 이 관찰은 더 간단하고 모듈 식 접근법에 대한 선호도에서 비롯 될 수 있습니다.

display: grid; 직접 요소. 신체에 요소를 주입하는 브라우저 확장은 그리드 레이아웃을 방해 할 수 있습니다. 더 나은 연습은 아이를 사용하는 것입니다<code><div> 그리드를 포함하려면 범위와 유지 관리를 향상시키기 위해 직접 신체 조작을 피하는 반응 모범 사례를 반영합니다.</div>

위 내용은 에지 간 그리드를 사용하여 전체 폭 요소의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!