CSS 自动填充网格

Question

我目前正在尝试让我的网格自动填充，这样它会根据页面大小自动移动。然而，按照标准，它是一条直线。但我想让它把一些盒子向下移动一排。例如第 1 行的 4 和第 2 行的 2

例如，它默认这样做：

但我想要它如下所示，但我仍然想根据页面大小自动调整框的位置。（我通过将自动填充更改为 4 来完成此操作，但它会阻止它自动调整）

.grid-container {
  display: grid !important;
  grid-gap: 10px !important;
  grid-template-columns: repeat(auto-fill, minmax(115px, 115px)) !important;
  margin: 10px 0px 0px 0px;

}

.grid-container p {
  font-size: 12px;
  color: #959595;
  font-weight: 630 !important;
  line-height: 14px;
}

.Test-item {
  background-color: BLUE;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  width: 100px !important;
  height: 85px !important;
  float: left !important;
  color: #959595 !important;
  font-weight: bold !important;
  line-height: 14px !important;
  cursor: pointer !important;
  margin: 0px 0px;
}

<div class="grid-container">
  <div class="Test-item 1 clickable" onclick="window.open('google.com', '_blank');"><img src="TEST1" />
    <p>test1</p>
  </div>

  <div class="Test-item 2 clickable" onclick="window.open('google.com', '_blank');"><img src="TEST1" />
    <p>test1</p>
  </div>

  <div class="Test-item 3 clickable" onclick="window.open('google.com', '_blank');"><img src="TEST1" />
    <p>test1</p>
  </div>

  <div class="Test-item 4 clickable" onclick="window.open('google.com', '_blank');"><img src="TEST1" />
    <p>test1</p>
  </div>

  <div class="Test-item 5 clickable" onclick="window.open('google.com', '_blank');"><img src="TEST1" />
    <p>test1</p>
  </div>
  <div class="Test-item 6 clickable" onclick="window.open('google.com', '_blank');"><img src="TEST1" />
    <p>test1</p>
  </div>
</div>

谁能看到我错过了什么？

Answer 1

您可以使用 display: flex; 和 flex-wrap: wrap; 解决此问题使用 flex-wrap 允许您的测试项目在调整浏览器大小时自动换行。如有必要，请随意更改。

.grid-container {
  display: flex !important;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  
}

.grid-container p {
  font-size: 12px;
  color: #959595;
  font-weight: 630 !important;
  line-height: 14px;
}

.Test-item {
  background-color: BLUE;
  text-align: center;
  padding: 10px;
  border-radius: 10px;
  width: 100px !important;
  height: 85px !important;
  float: left !important;
  color: #959595 !important;
  font-weight: bold !important;
  line-height: 14px !important;
  cursor: pointer !important;
  margin-right: 1rem;
}

@media only screen and (max-width: 800px) {
  .grid-container {
    flex-direction: row;
    justify-content: left;
  }
}

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<div class="container">
<div class="grid-container">
<div class="row">
  <div class="Test-item 1 clickable" onclick="window.open('google.com', '_blank');"><img src="TEST1" />
    <p>test1</p>
  </div>

  <div class="Test-item 2 clickable" onclick="window.open('google.com', '_blank');"><img src="TEST1" />
    <p>test1</p>
  </div>

  <div class="Test-item 3 clickable" onclick="window.open('google.com', '_blank');"><img src="TEST1" />
    <p>test1</p>
  </div>

  <div class="Test-item 4 clickable" onclick="window.open('google.com', '_blank');"><img src="TEST1" />
    <p>test1</p>
  </div>
</div>
<div class="row">
  <div class="Test-item 5 clickable" onclick="window.open('google.com', '_blank');"><img src="TEST1" />
    <p>test1</p>
  </div>
  <div class="Test-item 6 clickable" onclick="window.open('google.com', '_blank');"><img src="TEST1" />
    <p>test1</p>
  </div>
</div>
</div>
</div>

CSS 自动填充网格

CSS Auto fill Grid

css

flexbox

css-grid