2017-10-28 226 views
-1

当我在google chrome中打开下面的代码时,header和signIn选择器的跨度比.create选择器长得多,即使它们应该跨越一列。会有人有什么可能会导致这个问题的想法吗?谢谢css网格fr单元显示不正确

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; 
} 
+1

你也可以分享你的HTML显示d重现您的问题。这:https://codepen.io/anon/pen/zPYWgR可以正常使用我的chrome .so是否https://codepen.io/anon/pen/pdoLXR –

回答

0

To头和签到你给

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

,如果你想创建更小或相同的,你需要给它哪里来.create

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

所以小型或类似的row-start和r ow-end

+0

不应该只跨越一行= 1fr虽然? – JMay