我正在为正在建设的网站构建框架。
我想我遇到的问题可能是一个菜鸟问题，但我仍然要问这个问题，希望它将对其他人有所帮助。
body, html {
margin: 0;
padding: 0;
}
#maingrid {
display: grid;
height: 100vh;
width: 100vw;
margin: 0 auto;
grid-template-columns: 0.5fr repeat(2, 2fr) 0.5fr;
grid-template-rows: auto;
grid-template-areas:
". first first ."
"second second second second"
"third third third third"
"fourth fourth fourth fourth"
"fifth fifth fifth fifth";
}
.firstrow {
grid-area: 1 / span 4;
justify-self: center;
background-color: #0080bf;
}
.firstcontent {
display: inline-grid;
width: 60vw;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
}
.firsttext {
grid-column: 1 / 2;
text-align: center;
}
.firstnav {
grid-column: 2 / 3;
text-align: right;
}
.secondtrow {
grid-area: second;
}
.thirdrow {
grid-area: third;
background-color: mediumorchid;
}
.fourthrow {
grid-area: fourth;
}
.fifthrow {
grid-area: fifth;
background-color: #0080bf;
}<!doctype html>
<html lang="sv">
<head>
<meta charset="utf-8">
<title>grid</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="maingrid">
<div class="firstrow">
<div class="firstcontent">
<div class="firsttext">Test</div>
<div class="firstnav">tesT</div>
</div>
</div>
<div class="secondrow"></div>
<div class="thirdrow"></div>
<div class="fourthrow"></div>
<div class="fifthrow"></div>
</div>
</body>
</html>在codepen网站上，我到目前为止已完成工作，是的，这是我需要做的相当高级的网格构建。
那么问题是什么呢？
好在第一行的背景色，我需要它跨越整个行，而不仅仅是内容的后面。
另一个有趣的事情是，相同的代码可以使用FF70在我的本地环境中的第五行显示任何颜色。
最佳答案
我对代码进行了一些更改，看来现在可以使用了。以下代码可能对您有所帮助，我更改了.firstcontent和.firstrow。
body, html {
margin: 0;
padding: 0;
}
#maingrid {
display: grid;
height: 100vh;
width: 100vw;
margin: 0 auto;
grid-template-columns: 0.5fr repeat(2, 2fr) 0.5fr;
grid-template-rows: auto;
grid-template-areas:
". first first ."
"second second second second"
"third third third third"
"fourth fourth fourth fourth"
"fifth fifth fifth fifth";
}
.firstrow {
display: grid;
grid-area: 1 / span 4;
justify-items: center;
background-color: #0080bf;
}
.firstcontent {
display: grid;
width: 60vw;
grid-template-columns: 50% 50%;
}
.firsttext {
grid-column: 1 / 2;
text-align: center;
}
.firstnav {
grid-column: 2 / 3;
text-align: right;
}
.secondrow {
grid-area: second;
}
.thirdrow {
grid-area: third;
background-color: mediumorchid;
}
.fourthrow {
grid-area: fourth;
}
.fifthrow {
grid-area: fifth;
background-color: #0080bf;
}
我无法为第五行重新创建另一个问题。
关于css - 用css-grids进行开发，好吧……奇怪的事情发生了，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/58604242/