Question

在示例中，我有三列，当在某个视口处调整大小时，它会包裹在下一行上，如何定位单个div并使其填充可用宽度？

.boxes {
  color: white;
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.box {
  background-color: blue;
  padding: 10px;
}

<section class = "boxes">
  <div class="box">
    <p>Box 1</p>
  </div>
  <div class="box">
    <p>Box 2</p>
  </div>
  <div class="box">
    <p>Box 3</p>
  </div>
</section>

Codepen：

CodePen

Answer 1

您需要为此使用flexbox

body {
  color: white;
}

.boxes {
  display: flex;
  flex-wrap: wrap;
}

.box {
  background-color: blue;
  padding: 10px;
  min-width: 250px;
  box-sizing:border-box;
  margin: 10px;
  flex-grow: 1;
}

<section class="boxes">
  <div class="box">
    <p>Box 1</p>
  </div>
  <div class="box">
    <p>Box 2</p>
  </div>
  <div class="box">
    <p>Box 3</p>
  </div>
</section>

Answer 2

将列限制为`max-width`

您可以保留网格，但只有保留2列时，它才看起来不错。

对于更多列，它更加复杂，您可以定义所需的内容，使用网格或使用flex来方便使用。

html {
  box-sizing: border-box;
}

body {
  background-color: white;
  color: white;
}

.boxes {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}

.box {
  background-color: blue;
  padding: 10px;
}

.box:last-child:nth-child(odd) {
  grid-column: 1/3;
 }

<!DOCTYPE html>
<html>

<head>
  <title>Column Resize</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <section class="boxes">
    <div class="box">
      <p>Box 1</p>
    </div>
    <div class="box">
      <p>Box 2</p>
    </div>
    <div class="box">
      <p>Box 3</p>
    </div>
  </section>
</body>

</html>

CSS网格自动调整栏会自动换行

2 个答案:

将列限制为`max-width`

CSS网格自动调整栏会自动换行

2 个答案:

将列限制为max-width

将列限制为`max-width`