时间戳

首页 > 解决方案 > 使用 css-grids 进行开发，好吧......奇怪的事情发生了

css - 使用 css-grids 进行开发，好吧......奇怪的事情发生了

问题描述

我正在为正在制作的网站构建骨架。我想我得到的问题可能是一个菜鸟问题，但我仍然必须问它，希望它会对其他人有所帮助。

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 的本地环境中，相同的代码在第五行显示任何颜色。

标签： csscss-grid

解决方案

我对代码进行了一些更改，现在看来它可以工作了。以下代码可能会对您有所帮助，我更改了.firstcontentand .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;
}

我无法为第五行重新创建另一个问题。

推荐阅读