Question

我正在学习HTML和CSS，现在我正在研究CSS网格。

我想我正在理解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>

此外，如果您选择了语义错误，请告诉我。

Answer 1

现在您的页眉使用的是网格，但是其余部分没有使用网格。

类似于在标头的元素中设置display: grid;的方式，您将希望使用container-box在display: grid; div周围创建一些容器元素在上面。

通过这种方式，网格项目（container-box）可以使用您设置的grid-column和grid-row属性。只需确保将一个值也设置为grid-row，现在它为空。

Answer 2

对您来说，尝试自己学习这些东西对您有好处！所以几件事： -您将某些CSS样式留空了。小心不要这样做，因为这在某些浏览器中可能会意外地起作用。例如，{。header-bar中的margin-bottom

在处理flexbox或grid时，唯一会受到影响的元素是它的直接子元素。因此，对于“ .header-grid”，唯一的子对象是“ .header-bar”，因此使其成为网格是多余的。
回到最后一点可能表明为什么事情对您不起作用。 “ .container-box”（您要放置在该位置的那个）没有父元素，即网格，因此网格不会影响它。您如何解决此问题取决于您的未来计划。您可以简单地在左侧和顶部添加一些边距。分别约为200像素和100像素。您也可以执行类似Codepen的操作。这些都是获取所需内容的肮脏方式。一种更适当的方式将需要重新设计所有方式。利用容器并避开浮标。而是使用flexbox。这样做实际上甚至不需要太多网格。这是Codepen可以清除的许多可能方法之一。展望未来，您通常希望远离花车。 Flexbox和grid允许您以更清洁，更稳定的方式执行相似的操作，同时还提供更多的灵活性。祝您好运，如果有任何混淆之处，请随时跟进。

在CSS网格中定位框项目时出现问题

2 个答案: