CSS 그리드 레이아웃에서 겹치는 행

debugcn 에 게시 Dev

Asqiir

바닥 글 행이 콘텐츠 행과 겹치지 않도록하려면 어떻게해야합니까?

이것이 내가 얻는 것입니다.

body {
	display: grid;
	grid-template-rows: 3.7rem auto auto;
	grid-template-columns: 3rem 3fr 2fr;
}
*[role="banner"] {
	grid-row: 1;
	grid-column: 2/4;
	
	background-color: green;
	height: 3rem;
}
*[role="main"] {
	grid-row: 2;
	grid-column: 2;
	background-color: yellow;
	height: 100px;
}
*[role="contentinfo"] {
	grid-row: 3;
	grid-column: 2/3;
	border-top: 1px solid black;
}
*[role="contentinfo"] img {
	height: 100px;
}

<div role="banner"></div>
<article role="main"><p>Some Text.</p><p>Some more text</p><p>the last text</p></article>
<footer role="contentinfo"><img src="https://s14-eu5.ixquick.com/cgi-bin/serveimage?url=https%3A%2F%2Fdata.motor-talk.de%2Fdata%2Fgalleries%2F0%2F147%2F9424%2F43109894%2Fbild--7008737403287221413.jpg&sp=6a4eaf3bd8ff58ca9d9bba2e3519888e"></footer>

마이클 벤자민

기사의 높이가 고정되어 있으므로 바닥 글 (3 행)이 기사 (2 행)와 겹칩니다.

[role="main"] { height: 100px; }

auto는 그리드 컨테이너에 지정한 높이를 다음과 같이 재정의합니다 .

grid-template-rows: 3.7rem auto auto

height규칙 을 제거하면 겹치는 부분이 사라집니다.

body {
	display: grid;
	grid-template-rows: 3.7rem auto auto;
	grid-template-columns: 3rem 3fr 2fr;
}
*[role="banner"] {
	grid-row: 1;
	grid-column: 2/4;
	
	background-color: green;
	height: 3rem;
}
*[role="main"] {
	grid-row: 2;
	grid-column: 2;
	background-color: yellow;
	/* height: 100px; <-------- REMOVE */
}
*[role="contentinfo"] {
	grid-row: 3;
	grid-column: 2/3;
	border-top: 1px solid black;
}
*[role="contentinfo"] img {
	height: 100px;
}

<div role="banner"></div>
<article role="main"><p>Some Text.</p><p>Some more text</p><p>the last text</p></article>
<footer role="contentinfo"><img src="https://s14-eu5.ixquick.com/cgi-bin/serveimage?url=https%3A%2F%2Fdata.motor-talk.de%2Fdata%2Fgalleries%2F0%2F147%2F9424%2F43109894%2Fbild--7008737403287221413.jpg&sp=6a4eaf3bd8ff58ca9d9bba2e3519888e"></footer>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-18

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

CSS 그리드 레이아웃에서 겹치는 행

CSS 그리드 레이아웃에서 겹치는 행

CSS 그리드 레이아웃에서 n 번째 행 수를 만드는 방법은 무엇입니까?

비어있는 경우 CSS 그리드 레이아웃 행 높이 0px

Qt-그리드 레이아웃에서 겹치는 레이블

내 Bootstrap 그리드의 행이 겹치는 이유는 무엇입니까?

행당 다른 열이있는 HTML 그리드 레이아웃

CSS 그리드 레이아웃의 헤더 고정 위치

HTML / CSS 그리드 레이아웃 텍스트 요소 위치

CSS 그리드 레이아웃에서 세 열을 정렬하는 방법은 무엇입니까?

CSS 그리드 레이아웃에서 셀 확장

내 CSS 그리드 행이 서로 겹쳐지는 이유는 무엇입니까?

부트 스트랩 CSS 그리드, 플렉스 및 행 레이아웃에 대해 혼동

플렉스 방향 행과 서로 다른 행 높이가있는 플렉스 그리드 레이아웃

CSS에서 레이어가 서로 겹치지 않게 만드는 방법

빈 겹치는 CSS 그리드 셀이 Firefox 및 Edge에서 클릭을 방지 함

CSS 전용 그리드 레이아웃

CSS HTML 그리드 레이아웃

CSS 그리드에서 행을 채우지 않는 배경색

jquery, css, 석조물이있는 이미지 그리드 레이아웃

서로 겹치는 행

겹치는 행과 버튼에서 클릭 리스너 분리

반응 형 그리드 레이아웃에서 행 추가 및 간격 제거

cytoscape.js에서 그리드 레이아웃을 사용하는 동안 복합 노드가 겹칩니다.

그리드 레이아웃에서 마우스 오버시 CSS 이미지 전환 중 이미지 크기 조정을 방지하는 방법

부트 스트랩 CSS를 사용하여 겹치지 않고 2 행과 2 열이있는 레이아웃을 어떻게 얻습니까?

CSS 그리드-플렉스 박스 레이아웃에서 변환

css-그리드 레이아웃에서 중복 된 여백 제거

CSS 그리드 레이아웃 : 강제 고정 레이아웃

내 HTML 구조가 CSS 그리드 레이아웃에서 작동하지 않는 이유는 무엇입니까?

내 HTML 구조가 CSS 그리드 레이아웃에서 작동하지 않는 이유는 무엇입니까?