如何使网格的第一个和最后一个元素与其他元素的大小不同？答案

【问题标题】：How to make first and last element of a grid different sizes from the other elements?如何使网格的第一个和最后一个元素与其他元素的大小不同？
【发布时间】：2021-02-09 14:57:47
【问题描述】：

我有一个网格

<div class="grid">
  // a lot of divs
</div>

css

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
}

我需要使max-width的高亮元素：45px。我试过grid-template-columns: 45 px repeat(auto-fill, minmax(90px, 1fr)) 45px，但它的作用是使第一列和最后一列宽度为 45px（但我需要元素）。设置 max-width 没有帮助，因为第一个元素的行被切入两次。我怎样才能做到这一点？我没有使用 flexbox，因为它无法实现我想要的。

【问题讨论】：

您是否尝试过在 .grid 内的 div 上使用 :first-child 和 :last-child 选择器？
@Hoargarth，我应该为他们设置什么？
grid-template columns 仅仅设置了 div 将被放置的区域的宽度。只需将这些 div 设置为 max-width:45px。 - codepen.io/Paulie-D/pen/ZEBOdge 但我怀疑这不是你想要的。
您可以使用.grid:first-child 和grid.last-child 来提供您需要的样式，或者您也可以创建两个新的类，您可以在html 中应用这些子类。

标签： html css sass css-grid

【解决方案1】：

您可以将所有列设为 45px 宽，然后让除第一个和最后一个项目之外的所有项目跨越两列，例如：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(45px, 1fr));
}
.grid div {
  border: 1px solid blue;
}

.grid div {
  grid-column: span 2;
}
.grid div:first-child, .grid div:last-child {
  grid-column: span 1;
}

<div class="grid" style='max-width:500px'>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

【讨论】：

这是另一个问题，但请你帮我将同一个案例居中（例如，如果有 4 个项目，它们将居中到左侧但我需要居中，我试过 justify- content\items & align-content\items 但它不起作用）

【解决方案2】：

一个类似的答案，包含您关于在页面上居中元素的附加问题：

要点：

将“自动填充”替换为auto-fit
使用max-content 而不是“1fr”
添加justify-content: center

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45px, max-content));
  justify-content: center;
   
}
.grid-item {
  border: 1px solid blue;
  grid-column: span 2;
}

.grid-item:first-child, .grid-item:last-child {
  grid-column: span 1;
}

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
  <div class="grid-item">7</div>
  <div class="grid-item">8</div>
</div>

【讨论】：