CSS 반응형 그리드 레이아웃 그리드 연습_그리드 템플릿 영역을 사용한 재구성

Grid-template-areas가 유효하지 않은 근본적인 이유는 상위 컨테이너가 display:grid를 설정하지 않았거나 하위 요소의 이름이 Grid-area가 아니기 때문입니다. 두 가지를 동시에 충족해야 하며, 지역 이름은 엄격하게 일치해야 하고, 올바른 형식(따옴표 포함)이어야 하며, 키워드와 숫자로 시작하지 않아야 합니다.

그리드 템플릿 영역이 효과를 쓸 수 없는 이유는 무엇입니까?

일반적인 오류 현상은 grid-template-areas 작성되었지만 레이아웃이 전혀 변경되지 않거나 브라우저가 Invalid property value 오류를 보고하는 것입니다. 근본적인 이유는 두 가지뿐입니다. 상위 컨테이너가 display: grid 설정하지 않거나 하위 요소의 이름이 grid-area 로 명시적으로 지정되지 않았습니다.

• 상위 컨테이너는 display: grid 선언해야 합니다. 그리드 모드는 grid-template-areas 만으로는 자동으로 트리거되지 않습니다.
• 영역 매핑에 참여하려는 각 하위 요소는 grid-area 설정해야 하며 값은 grid-template-areas 의 문자열(따옴표, 공백 및 줄 바꿈 포함)과 정확히 동일해야 합니다.
• 영역 이름은 숫자로 시작하거나 CSS 키워드(예: auto , none )일 수 없습니다. header , main-content

다음 예에서는 인용문을 쉽게 놓칠 수 있습니다.

 그리드 템플릿 영역:
  "헤더 헤더"
  "네비 메인"
  "바닥글 바닥글";

그리드 템플릿 영역을 다른 화면에 어떻게 적용하나요?

반응성은 "모든 영역을 다시 작성"하기 위해 미디어 쿼리에 의존하지 않지만 "영역 템플릿 전환"에는 미디어 쿼리를 사용합니다. 동일한 DOM 구조에 대해 서로 다른 중단점을 통해 grid-template-areas 값을 전환하는 가장 깔끔한 방법입니다.

• 모바일 우선: "header" "nav" "main" "footer" 와 같은 좁은 화면 템플릿을 먼저 작성합니다.
• 다중 열 레이아웃을 다루는 태블릿/데스크톱 및 미디어 쿼리: "header header" "nav main" "footer footer"
• 참고: 각 중단점 아래의 지역 문자열 줄 수는 일관되어야 합니다(즉, 각 줄의 따옴표 안의 열 수가 동일해야 함). 그렇지 않으면 구문 분석이 실패합니다.
• 동일한 규칙에서 grid-template-areas 과 grid-template 혼합하지 마십시오. 이들은 상호 배타적이며 후자가 전자보다 우선합니다.

성능에 추가 오버헤드가 없습니다. CSS 속성 값만 전환하고 리플로우가 트리거되지 않습니다. 그러나 이전 버전의 Safari(<14.5)에서는 때때로 여러 줄 문자열을 구문 분석하는 데 버그가 있다는 점에 유의하세요. 한 줄 쓰기를 사용하고 개행 문자로 이스케이프하는 것이 좋습니다( "header header" "nav main" 이 더 안정적입니다).

그리드 영역 이름이 충돌하거나 공백으로 남아 있으면 어떻게 해야 합니까?

중복된 영역 이름으로 인해 일부 요소가 무시됩니다. 공백으로 두는 것( . 또는 연속적인 . 을 사용)은 합법적이고 일반적인 방법이지만, "쓰지 않음"이 "공간을 차지하지 않음"을 의미한다고 잘못 생각하기 쉽습니다.

• 동일한 grid-template-areas 에서 동일한 이름이 여러 번 나타나는 경우 첫 번째 일치하는 요소만 선택되고 동일한 이름을 가진 다른 grid-area 요소는 그리드 흐름에서 압착됩니다(일반 블록 수준 요소가 됨)
• . 빈 셀을 나타내며 내용을 넣지 않으며 논리적 위치를 차지하지 않습니다. .. 과 같은 효과가 있습니다 . , 여러 포인트는 하나의 포인트와 같습니다
• 특정 영역에 내용이 없으면 빈 문자열( "" )을 남겨두지 마십시오. 그렇지 않으면 구문 분석이 실패합니다. 를 사용해야 합니다 .
• 동적 렌더링 시나리오(예: Vue/React)에서 구성 요소 조건부 렌더링으로 인해 grid-area 누락되면 해당 영역이 축소됩니다. 서버 또는 JS가 초기화될 때 요소가 존재하고 올바른 grid-area 있는지 확인해야 합니다.

예를 들어:

 그리드 템플릿 영역:
  "헤더 헤더"
  "네비게이션."
  "바닥글 바닥글";

가운데 셀은 비어 있고 nav 왼쪽만 차지하고 오른쪽은 비어 있습니다.

Flex 또는 Float와 혼합하면 어떻게 되나요?

섞일 수 없습니다. 상위 컨테이너가 display: grid 로 설정되면 직계 하위 요소는 Grid 형식으로 들어가고 float , vertical-align 및 display: inline-block 모두 유효하지 않게 됩니다. flex 항목도 일반 그리드 항목으로 처리되며 더 이상 Flex 규칙에 따라 정렬되지 않습니다.

• 하위 요소의 margin 적용되지 않거나, 텍스트의 세로 가운데 맞춤이 실패하거나, align-self 응답하지 않는 경우 먼저 상위 레이어가 실수로 그리드를 트리거했는지 확인하세요.
• 디버깅 기술: DevTools에서 상위 컨테이너를 선택하고 계산된 패널의 display 실제로 grid 인지 확인합니다. 때로는 프레임워크(예: 일부 UI 라이브러리)가 전역 스타일을 주입하고 디스플레이를 조용히 변경합니다.
• Flex를 국소적으로 사용하고 싶으신가요? 그런 다음 플렉스 컨테이너를 grid-template-areas 에 의해 직접 제어되는 하위 요소 레벨에 두지 마십시오. 그리드에 레이어 하나를 추가하고 플렉스 컨테이너를 내부에 두십시오. 또는 grid-template-areas 포기하고 grid-template grid-column 사용하여 수동으로 위치를 지정하세요.

정말 어려운 것은 중첩 수준을 판단하는 것입니다. CSS 그리드는 재귀적이지 않고 직접적인 하위 요소만 있습니다. "특정 영역의 콘텐츠가 엉망입니다"라는 메시지가 표시되면 제대로 처리되지 않은 또 다른 디스플레이 모드 레이어가 있을 가능성이 높습니다.

일이 정리되면 끝입니다.

위 내용은 CSS 반응형 그리드 레이아웃 그리드 연습_그리드 템플릿 영역을 사용한 재구성의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!