CSS：将网格标题与网格元素对齐答案

【问题标题】：CSS: Align grid header with grid elementsCSS：将网格标题与网格元素对齐
【发布时间】：2019-02-08 03:37:20
【问题描述】：

我正在尝试在 CSS 中创建网格布局。我想在网格上方放置一个标题。我希望标题的左边缘与网格中第一项的左边缘对齐。我已经创建了我的网格的 sn-p。看看当你拖动网格的容器来调整它的大小时，网格元素和容器边缘之间的宽度是不一样的。

如何使我的标题与网格元素的最左边缘对齐？

编辑：当有额外的水平空间时，我希望网格项目居中。设置justify-content: left; 不是解决方案。

.page {
  min-width: 300px;
  background: lightgray;
  padding: 12px;
  resize: horizontal;
  overflow: auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 140px);
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    width: 100%;
    justify-content: center;
}

.grid-element {
  color: #fff;
  overflow: hidden;
  height: 82px;
  background: white;
}

<div class="page">
  <p>Grid Header</p>
  <div class="grid">
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
  <div>
</div>

【问题讨论】：

申请justify-content: left; insted of justify-content: center; to .grid class
但是当有剩余空间时，我希望网格项目在中心对齐。
你为什么不使用引导网格布局，它是最好且非常容易设置每个网格元素不再使用 css 你可以使用 col-sm-4 col-xs-12 等
因为它在根据可用宽度更改列数方面不太灵活。

标签： css css-grid

【解决方案1】：

我会简单地将标题添加为网格内跨越所有第一行的元素

.page {
  min-width: 300px;
  background: lightgray;
  padding: 12px;
  resize: horizontal;
  overflow: auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 140px);
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    width: 100%;
    justify-content: center;
}

.grid-element {
  color: #fff;
  overflow: hidden;
  height: 82px;
  background: white;
}
.grid  p {
  grid-row:1;
  grid-column:1/-1;
}

<div class="page">
  <div class="grid">
    <p>Grid Header</p>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
  <div>
</div>

【讨论】：

【解决方案2】：

已将 justify-content: flex-start; 添加到 .grid 课程，希望这对您有所帮助。谢谢

.page {
  min-width: 300px;
  background: lightgray;
  padding: 12px;
  resize: horizontal;
  overflow: auto;
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 140px);
    grid-column-gap: 12px;
    grid-row-gap: 12px;
    width: 100%;
    justify-content: flex-start;
}

.grid-element {
  color: #fff;
  overflow: hidden;
  height: 82px;
  background: white;
}

<div class="page">
  <p>Grid Header</p>
  <div class="grid">
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
    <div class="grid-element"></div>
  <div>
</div>

【讨论】：

对不起，我应该指定的。当有额外空间时，我希望网格项目在中心对齐。

【解决方案3】：

你可以给它一个类，然后使用边距来对齐它。

【讨论】：