如何将单个项目放置在响应式网格行上？

Question

我正在使用网格来放置卡片。网格使用

minimax

和

auto-fit

进行响应：

grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

但是，我希望第一行有一张卡片，这样卡片不会跨越（即它与后续行中的卡片宽度相同）。

因此，这是 1-3 列所需的布局（取决于屏幕宽度），其中

x

表示“卡片”，

.

表示“空白空间”：

x
x
x

x .
x x
x x

x . .
x x x
x x x
x x x

我尝试为第二张卡指定

grid-row

，但由于我事先不知道会有多少列（响应式网格模板），所以我不知道。

我需要像

min-grid-row

这样的房产。

编辑：

• 我无法将第一个项目放置在网格之外，因为我希望所有卡片具有相同的宽度（响应式）

Answer 1

您可以使用 mediaquerie 设置列数，并始终在第一个单元格中分配第一张卡，然后在有 2 或 3 列时添加一个或两个伪卡。

由于最多 3 列，可以轻松使用伪值。

下面的想法示例

div {
  display: grid;
}

p:first-child {
  grid-column: 1;
  grid-row: 1;
}


/*set your grid according to the media's width */

@media (min-width: 750px) {
  div {
    grid-template-columns: repeat(3, 1fr);
  }
  /* fill the gaps */
  div::before,
  div::after {
    content: "";
    grid-row: 1;
    order: -1;
  }
}

@media (max-width: 750px) {
  div {
    grid-template-columns: repeat(2, 1fr);
  }
  /* fill the gap */
  div::before {
    content: "";
    grid-row: 1;
  }
  div::after {
    display: none;/* no need here */
  }
}

@media (max-width: 550px) {
  div {
    grid-template-columns: 1fr;
    /* you could also turn it to display:block */
  }
  div::before,
  div::after {
    display: none;/* no need here */
  }
}


/* demo makeup */

div {
  gap: 1em;
  padding: 1em;
  max-width: 1200px;
  /* whatever*/
  margin: auto;
  background: yellow;
}

p {
  border: solid;
  padding: 1em;
  margin: 0;
  text-align: center;
  background: lightblue;
}

<div>
  <p>X</p>
  <p>X</p>
  <p>X</p>
  <p>X</p>
  <p>X</p>
  <p>X</p>
  <p>X</p>
  </div

Answer 2

您可以通过在第 1 行（此处为蓝色）中放置一个伪元素来接近，该伪元素跨越结束列（最小宽度与您的最小列宽度匹配），但当只需要一列时它会崩溃。

然后在最小宽度（例如）移动设备上，您可以禁用媒体查询中的伪元素。

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: .5em;
}

.grid:after {
  content: "";
  grid-row: 1;
  grid-column: 2 / -1;
  min-width: 250px;
  background: lightblue;
}

.item {
  border: 1px solid grey;
  text-align: center;
}

@media (max-width: 520px) {
  .grid::after {
    background: pink;
    content: none;
  }
}

<div class="grid">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <div class="item">Item 4</div>
  <div class="item">Item 5</div>
  <div class="item">Item 6</div>
  <div class="item">Item 7</div>
  <div class="item">Item 8</div>
  <div class="item">Item 9</div>
  <div class="item">Item 10</div>
  <div class="item">Item 11</div>
  <div class="item">Item 12</div>
</div>