css grid fr 단위가 올바르게 표시되지 않습니다.

Question

Google 크롬에서 다음 코드를 열면 header와 signIn 선택기가 둘 다 하나의 열에 걸쳐 있어야하지만 .create 선택기보다 훨씬 긴 것입니다. 이 문제를 일으킬 수있는 사람은 누구입니까?

grid { 
display: grid; 
height: 1800px; 
border: 2px blue solid; 
grid-template: 1fr 1fr 1fr 7fr/repeat(8, 1fr); 
} 

header { 
grid-row-start: 1; 
grid-row-end: 2; 
border: solid red 2px; 
} 
.signIn { 
grid-row-start: 1; 
grid-row-end: 2; 
border: solid blue 2px; 

} 
.create { 
grid-row-start:3; 
grid-row-end:4; 
border: solid blue 2px; 
} 

Answer 1

헤더 및 로그인 절차 당신이주는 주셔서 감사합니다 당신은 당신이 그것을 줄 필요가 작거나 동일하게 만들려면

grid-row-start:3; 
grid-row-end:4; 

그래서 .create하기로

grid-row-start: 1; 
grid-row-end: 2; 

작거나 유사한 row-start 및 r ow-end 값