我正在尝试制作一个网格，其中网格中的对象以方框模式而不是线出现

如何解决我正在尝试制作一个网格，其中网格中的对象以方框模式而不是线出现

我一直在努力做到这一点和关闭数月，我觉得我只是失去了我的代码是做准确。我以前从未在这里发布过问题，如果我有一些格式问题或没有做正确的事情，我很抱歉。这是我的 HTML/CSS 代码：

{% load static %}

<link rel="stylesheet" type="text/css" href="{% static 'characters/style.css' %}">

<style>
    .grid-container {
        display: grid;
        grid-gap: 1rem;
        grid-template-columns: repeat(5,150px);
        grid-template-rows: repeat(5,100px);
        align-items: initial;
    }

    .grid-item {
        border: 5px solid #87b5ff;
        border-radius: 3px;
        font-size: 2em;
        font-family: sans-serif;
        font-weight: bold;
        background-color: #1c57b5
    }


</style>

<div class="grid-container">
    {% if character_list %}
        <ul>
        {% for character in character_list %}
            <div class="grid-item">
                <li>
                    <a href="{% url 'characters:detail' character.id %}">
                        <img src={{character.stock.url}} width="100" height="100" class="center">
                    </a>
                </li>
            </div>
        {% endfor %}
        </ul>
</div>
    {% else %}
        <p>No characters are available.</p>
    {% endif %}

这是它目前的样子，我希望它更水平地展开，每行 4 个图标

解决方法

1. 无序列表（即 ul）不是必需的，而且您构建它的方式会导致问题。您正在使用每个网格项的 div 将 li 与其 ul 分开。删除无序列表。
2. 您有一个五列网格，每行有四个项目。这不会做你想做的事（除非你开始控制你不想做的网格单元跨度）。

尝试这样的事情；在您看到数字的地方，将其替换为您的锚点和图像标签：

.grid-container {
  display: grid;
  grid-gap: 1rem;
  grid-template-columns: repeat(4,150px); /* notice 4 columns not five */
  grid-template-rows: repeat(5,100px);
  align-items: initial;
}

.grid-container > div {
  border: 5px solid #87b5ff;
  border-radius: 3px;
  font-size: 2em;
  font-family: sans-serif;
  font-weight: bold;
  background-color: #1c57b5;
}
<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

,

假设您拥有最新版本的 Bootstrap，您可以通过将列对齐成一行来制作网格布局，如下所示：

<div class="container">
  <div class="row">
    <div class="col">
      Image 1
    </div>
    <div class="col">
      Image 2
    </div>
    <div class="col">
      Image 3
    </div>
    <div class="col">
      Image 4
    </div>
  </div>
</div>

如果需要更多，请继续复制行，或者如果需要，通过使用 col 类创建更多 div 来添加更多列。您还可以更改列的宽度。可以在 here 中找到更多信息。