css - CSS网格:第2列上的元素似乎不想从第1行开始。为什么？

基本上如标题所述。我网格上第2列中的项目拒绝从网格第1行开始。在我的实例中，它们从第4行开始。

这是我的代码：

.grid-container {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 2rem;
  padding: 2.5rem;
}

.col-1 {
  grid-column: 1;
}
.col-2 {
  grid-column: 2;
}

.content-box {
  border: 1px #aaa solid;
  padding: 1rem;
  border-radius: 5px;
}

<div class="grid-container">
    <div class="content-box col-1">
        <h3>All Content</h3>
        <?php foreach($titles as $title): ?>
            <a href="update.php"><?= $title->headline; ?></a>
        <?php endforeach; ?>
    </div>
    <div class="content-box col-1">
        <h3>All Products</h3>
        <?php foreach($products as $product): ?>
            <a href="update.php"><?= $product->name; ?></a>
        <?php endforeach; ?>
    </div>
    <div class="content-box col-1">
        <h3>All Services</h3>
        <?php foreach($services as $service): ?>
            <a href="update.php"><?= $service->name; ?></a>
        <?php endforeach; ?>
    </div>
    <div class="content-box col-1">
        <h3>All Support Links</h3>
        <?php foreach($supportOptions as $option): ?>
            <a href="update.php"><?= $option->name; ?></a>
        <?php endforeach; ?>
    </div>

<!-- COL-2 -->
    <div class="content-box col-2">
        <h3>Reset Password</h3>
        <form method="post" action="helpers/newpassword.helper.php">
            <label for="currentPass">Current Password</label>
            <input type="password" name="currentPass" id="currentPass">
            <label for="newPass">New Password</label>
            <input type="password" name="newPass" id="newPass">
            <label for="repeatPass">Repeat Password</label>
            <input type="password" name="repeatPass" id="repeatPass">
            <a href="helpers/newpassword.helper.php" name="submit" id="submit">Submit</a>
        </form>
    </div>

    <!-- ADMIN ONLY -->
    <div class="content-box col-2">
        <h3>Add User</h3>
        <form method="post" action="helpers/adduser.helper.php">
            <label for="username">Username</label>
            <input type="text" name="username" id="username">
            <label for="newPass">Password</label>
            <input type="password" name="newPass" id="newPass">
            <label for="repeatPass">Repeat Password</label>
            <input type="password" name="repeatPass" id="repeatPass">
            <a href="helpers/adduser.helper.php" name="submit" id="submit">Submit</a>
        </form>
    </div>
    <div class="content-box col-2">
        <h3>Users</h3>
        <p><strong>Admins</strong></p>
        <a href="#">Admin1</a>
        <br>
        <p><strong>Total Users</strong>: 3</p>
        <a href="#">View Userlist</a>
    </div>
</div>

使用HTML进行了更新，以确切了解此处的情况。

从美学上讲，它实际上比我最初计划的要好，但是我只是想了解为什么会这样。

谢谢！

最佳答案

它从第4行开始，因为您在4行之后添加了它。请尝试以下操作：

.grid-container {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-gap: 2rem;
  padding: 2.5rem;
}

.grid-container .grid-container {
  padding: 0;
  grid-column-gap: 0;
}

.col-1 {
  grid-column: 1;
}
.col-2 {
  grid-column: 2;
}

.content-box {
  border: 1px #aaa solid;
  padding: 1rem;
  border-radius: 5px;
}

/* Spans 2 columns */
.col-width-2 {
  grid-column: 1/2;
}

<div class="grid-container">
    <div class="col-1">
      <div class="grid-container">
      <div class="content-box col-width-2">
          <h3>All Content</h3>
          <?php foreach($titles as $title): ?>
              <a href="update.php"><?= $title->headline; ?></a>
          <?php endforeach; ?>
      </div>
      <div class="content-box col-width-2">
          <h3>All Products</h3>
          <?php foreach($products as $product): ?>
              <a href="update.php"><?= $product->name; ?></a>
          <?php endforeach; ?>
      </div>
      <div class="content-box col-width-2">
          <h3>All Services</h3>
          <?php foreach($services as $service): ?>
              <a href="update.php"><?= $service->name; ?></a>
          <?php endforeach; ?>
      </div>
      <div class="content-box col-width-2">
          <h3>All Support Links</h3>
          <?php foreach($supportOptions as $option): ?>
              <a href="update.php"><?= $option->name; ?></a>
          <?php endforeach; ?>
      </div>
    </div>
  </div>

<!-- COL-2 -->
    <div class="content-box col-2">
        <h3>Reset Password</h3>
        <form method="post" action="helpers/newpassword.helper.php">
            <label for="currentPass">Current Password</label>
            <input type="password" name="currentPass" id="currentPass">
            <label for="newPass">New Password</label>
            <input type="password" name="newPass" id="newPass">
            <label for="repeatPass">Repeat Password</label>
            <input type="password" name="repeatPass" id="repeatPass">
            <a href="helpers/newpassword.helper.php" name="submit" id="submit">Submit</a>
        </form>
    </div>

    <!-- ADMIN ONLY -->
    <div class="content-box col-2">
        <h3>Add User</h3>
        <form method="post" action="helpers/adduser.helper.php">
            <label for="username">Username</label>
            <input type="text" name="username" id="username">
            <label for="newPass">Password</label>
            <input type="password" name="newPass" id="newPass">
            <label for="repeatPass">Repeat Password</label>
            <input type="password" name="repeatPass" id="repeatPass">
            <a href="helpers/adduser.helper.php" name="submit" id="submit">Submit</a>
        </form>
    </div>
    <div class="content-box col-2">
        <h3>Users</h3>
        <p><strong>Admins</strong></p>
        <a href="#">Admin1</a>
        <br>
        <p><strong>Total Users</strong>: 3</p>
        <a href="#">View Userlist</a>
    </div>
</div>