如何创建具有 3 个不同 head 元素的 CSS GRID

Question

我使用 CSS display: grid 得到一个列表，如下所示

我的任务必须进行编辑，以便列表在 PC 上显示时看起来像这样，而在我的手机上它看起来像第一张图片。前 3 个元素将比其余元素大。响应式支持

这是我的代码：

HTML:

.grid {
    width: 638px;
    display: grid;
    grid-row-gap: 68px;
    grid-column-gap: 12px;
    grid-template-rows: auto auto;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    justify-content: space-between;
}

.item {
   border: 3px solid green;
   width: auto;
   height: 150px;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

我试图修复它，但它不起作用，谢谢大家！

Answer 1

您可能会从 12 列网格重新考虑它，并重置网格列跨越到该项目。

可能的例子

.grid {
    width: 638px;
    display: grid;
    grid-row-gap: 68px;
    grid-column-gap: 12px;
    grid-template-rows: auto auto;
    grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));/* 35 x 4 = 140 */
    justify-content: space-between;
}

.item {
   border: 3px solid #4285F4;
   border-radius:3px;
   width: auto;
   height: 150px;
   grid-column:auto / span 4; /* about 35px X 4 of width */
   margin-right:8px;
}
.item:nth-child(3), .item:nth-child(3)~.item {
margin-right:0;
}
.item:nth-child(3)~.item {
grid-column:auto / span 3;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

跨列规则和网格模板列可以通过您要使用的媒体查询进行重置。

Answer 2

您必须使用包含 3 和 4 的数字作为乘数。例如12。所以你把格子分成12 columns。然后你使用 nth-child 伪选择器来选择前 3 个并给它们一个 span of 4 和每个其他 child 一个 span of 3.

with :nth-child(-n+3) 你 select 前 3 个元素。因为您希望它们是一行中的 3 个框，所以需要 span 4 以适应 12 columns.

with :nth-child(n+3) 你 select 前 3 个例外的所有元素。现在你需要让它们 span 3 列以适应 12 列宽行中的 4 个框。

.grid {
    width: 638px;
    display: grid;
    grid-row-gap: 68px;
    grid-column-gap: 12px;
    grid-template-rows: auto;
    grid-template-columns: repeat(12, 1fr);
}

.item {
   border: 3px solid green;
   height: 150px;
}

.item:nth-child(n+3) {
  grid-column: span 3;
}

.item:nth-child(-n+3) {
  grid-column: span 4;
}

<div class="grid">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

如何创建具有 3 个不同 head 元素的 CSS GRID

How to create a CSS GRID with 3 distinct head elements

html

css

grid