Question

通过验证服务同时运行HTML和CSS时，我获得了绿灯，但代码本身并未通过网格显示出来。这是有问题的CSS：

body {
display: grid;
grid-template-columns: 6fr;
grid-template-rows: 6fr;
background-color: #f4fff4;
height: 500px;
}

.Background {
grid-row-start: 1;
grid-row-end: 6;
grid-column-start: 1;
grid-column-end: 6;
}

#Heads {
grid-row-start: 2;
grid-row-end: 2;
grid-column-start: 2;
grid-column-end: 5;
box-sizing: border-box;
}

.Backdrop {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 6;
}

.Arrow {
grid-row-start: 3;
grid-row-end: 3;
grid-column-start: 6;
grid-column-end: 6;
box-sizing: border-box;
}

.Regis {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 2;
grid-column-end: 3;
box-sizing: border-box;
}

.Cont {
grid-row-start: 5;
grid-row-end: 5;
grid-column-start: 4;
grid-column-end: 5;
box-sizing: border-box;
}

.Refer {
grid-row-start: 4;
grid-row-end: 4;
grid-column-start: 3;
grid-column-end: 4;
box-sizing: border-box;
}

这是HTML：

<!doctype html>
<html>

<head>
<title>Website Domain Name</title>
<meta charset="UTF-8">
<meta name="description" content="All in due time.">
<meta name="keywords" content="Git, Code, Win, Yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="Hit1.css" rel="stylesheet">
</head>

<body>
  <div class="Background">
<header id="Heads">
  <h1>Click <a href="http://www.w3schools.com">Here!</a></h1>
  <select>
    <option>Beans</option>
    <option>Cans</option>
    <option>Frijole</option>
    <option>Jaguar</option>
  </select>
  </header>
<div class="Backdrop">
  <div class="Arrow">
    <p><a href="http://www.w3schools.com"><img src="Arrows.jpg" alt="Arrow"></a></p>
  </div>
<div class="Regis">
  <p><a href="http://www.w3schools.com">Registration</a></p>
  </div>
<div class="Cont">
  <p><a href="http://www.w3schools.com">Contact Us</a></p>
  </div>
<div class="Refer">
  <p><a href="http://www.w3schools.com">References</a></p>
  </div>
  </div>
  </div>
</body>

</html>

任何和所有想法或想法都会受到赞赏。我现在在写，是为了使这篇文章不是完整的代码。 Tyvm！ =]

Answer 1

.Background {
    display: grid;
    grid-row-start: 1;
    grid-row-end: 6;
    grid-column-start: 1;
    grid-column-end: 6;
}
.Background div{
    display: grid;
}

尽管验证服务给了我100％的支持，CSS Grid仍无法正常运行？

1 个答案: