很新。 CSS中的网格问题答案

【问题标题】：Very New. Grid issue in CSS很新。 CSS中的网格问题
【发布时间】：2021-07-31 15:51:33
【问题描述】：

嘿，我在尝试制作简单的网格时遇到了这个问题。我有一个包含四个列表元素的无序列表。使用 grid-template-columns 和 grid-template-rows 我设置了四列一行，但在浏览器中它显示了两列和两行，这对我来说毫无意义。

如果我分配所有列表项第 1/2 行如CSS下面的评论所示，问题已解决但这似乎是我所知道的不必要的代码行。如果有人能帮助解释正在发生的事情的机制，那么我将停止遇到这个问题，那就太好了。我缺少什么或为什么需要指定该行。它只是在我的脑海里唠叨。

* {
  display: block;
  margin: 0;
  padding: 0;
}

head {
  display: none;
}

body {
  color: white;
  background: black;
}

ul {
  background: white;
  width: max-content;
  display: grid;
  grid-template-columns: repeat(4, max-content);
  grid-template-rows: max-content;
}

li {
  list-style: none;
  margin: 3px;
  /* grid-row: 1/2; */
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Image Gallery</title>
  <link rel="stylesheet" href="main.css" type="text/css" media="screen">
  <script type="text/javascript" src="main.js"></script>
</head>

<body>
  <h1>Snapshots</h1>
  <ul id="gallery">
    <li><a href="images/fireworks.jpg" title="A fireworks display"><img src="images/fireworksTHBN.jpg" alt="Fireworks>"</a></li>
    <li><a href="images/coffee.jpg" title="A fireworks display"><img src="images/coffeeTHBN.jpg" alt="Fireworks>"</a></li>
    <li><a href="images/rose.jpg" title="A fireworks display"><img src="images/roseTHBN.jpg" alt="Fireworks>"</a></li>
    <li><a href="images/bigben.jpg" title="A fireworks display"><img src="images/bigbenTHBN.jpg" alt="Fireworks>"</a></li>
  </ul>
</body>

</html>

【问题讨论】：

可能与图片大小有关。如果您可以通过正确的链接图片证明这一点，我们可能会提供帮助。
-你应该正确地格式化你的html，因为你没有正确关闭img标签

标签： css layout css-grid

【解决方案1】：

你的语法有一个非常简单的问题

<li>
  <a href="images/fireworks.jpg" title="A fireworks display">
    <img src="images/fireworksTHBN.jpg" alt="Fireworks>"
  </a>
 </li>

您的<img> 标签未正确关闭

我很确定这就是您要查找的内容，然后它将按预期工作，否则它只会将 <a> 作为另一个元素来解释网格中的 4 个项目。

<li>
  <a href="images/fireworks.jpg" title="A fireworks display">
    <img src="images/fireworksTHBN.jpg" alt="Fireworks">
  </a>
 </li>

【讨论】：