【发布时间】：2019-06-18 11:10:37
【问题描述】：
我正在学习 HTML 和 CSS，现在我正在学习 CSS Grid。
我想我正在了解 CSS Grid 的工作原理，并且我一直在尝试编写一个网站，其中一个盒子项目位于网格内的特定位置。
我截取了一个屏幕截图，并在我试图放置容器盒项目的位置画了一个正方形。我一直在尝试使用网格列和网格行来定位它，现在可用。
（那个纯黑色矩形应该是看那个容器盒的油漆图）
这是我的代码：
body {
background: #aaa;
}
html,
body,
.header-bar {
height: 100%;
margin: 0;
}
.header-grid {
display: grid;
grid-template: 100px / 1fr 1fr 1fr;
}
.header-bar {
grid-column: 1/4;
background: #ccc;
margin-bottom:
}
.menu-items ul {
margin: 0;
padding: 0;
}
.menu-items li {
list-style: none;
float: left;
margin-right: 10px;
background-color: #aaa;
position: relative;
line-height: 60px;
}
.menu-items {
grid-row: 1/2;
grid-column: 1/2;
float: left;
margin-left: 20px;
margin-top: 18px;
}
.img {
height: 70px;
width: 90px;
float: left;
margin-left: 100px;
margin-top: 10px;
}
.container-box {
background: #000;
width: 18em;
grid-column: 3/4;
grid-row: ;
}
/*float clearfix */
.list-items:after {
content: "";
display: table;
clear: both;
}
.header-bar:after {
content: "";
display: table;
clear: both;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="header-grid">
<header class="header-bar">
<img src="img/shop.png" class="img">
<nav class="menu-items">
<ul class="list-items">
<li>Categories</li>
<li>Gifts</li>
<li>Giveaways</li>
<li>Exclusive</li>
</ul>
</nav>
</header>
</div>
<div class="container-box">
test
</div>
</body>
</html>另外，如果您选择了语义错误，请告诉我。
【问题讨论】：