如何在 CSS Grid 中居中和左对齐？答案

【问题标题】：How to center and left align in CSS Grid?如何在 CSS Grid 中居中和左对齐？
【发布时间】：2019-08-07 16:31:30
【问题描述】：

我正在尝试使用 css 网格将两列居中，但将第一列左对齐，这是用 max-width 值指定的。以下是所需输出的样子：

我尝试将整个容器以固定宽度包装，将 margin-left/right: auto 添加到各自的 div 和 justify-items，但似乎没有什么对我有用。

.grid-container>div {
  display: flex;
  flex-direction: column;
  border: 1px solid purple;
}

.item1 {
  grid-area: item1;
  margin-right: auto;
}

.item2 {
  margin-top: auto;
  grid-area: item2;
}

.item3 {
  margin-bottom: auto;
  grid-area: item3;
}

.item2,
.item3 {
  margin-right: auto;
  max-width: 300px;
  background: white;
}

h2,
p {
  font-size: 14px;
}

.object {
  height: 200px;
  width: 300px;
  background: green;
  margin: 20px 0px;
}

.grid-container {
  display: grid;
  grid-template-areas: 'item1' 'item2' 'item3';
  justify-items: center;
}

.grid-container {
  display: grid;
  grid-template-areas: 'item2 item1' 'item3 item1';
  background-color: orange;
}

<div class="grid-container">
  <div class="item1">
    <div class="object">
    </div>
  </div>
  <div class="item2">
    <h2>Title</h2>
  </div>
  <div class="item3">
    <p style="margin: 0px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

【问题讨论】：

标签： css css-grid

【解决方案1】：

在容器的任一侧创建一组空列以使内容居中对齐。

.grid-container {
   display: grid;
   grid-template-columns: 1fr auto auto 1fr; /* new */
   grid-template-areas:                     
     '. item2 item1 .'    /* adjusted; added empty columns */
     '. item3 item1 .';
   background-color: orange;
}

.grid-container>div {
  display: flex;
  flex-direction: column;
  border: 1px solid purple;
}

.item1 {
  grid-area: item1;
  margin-right: auto;
}

.item2 {
  margin-top: auto;
  grid-area: item2;
}

.item3 {
  margin-bottom: auto;
  grid-area: item3;
}

.item2,
.item3 {
  margin-right: auto;
  max-width: 300px;
  background: white;
}

h2,
p {
  font-size: 14px;
}

.object {
  height: 200px;
  width: 300px;
  background: green;
  margin: 20px 0px;
}

.grid-container {
  display: grid;
  grid-template-areas:
    '. item2 item1 .'
    '. item3 item1 .';
  background-color: orange;
  grid-template-columns: 1fr auto auto 1fr;
}

<div class="grid-container">
  <div class="item1">
    <div class="object">
    </div>
  </div>
  <div class="item2">
    <h2>Title</h2>
  </div>
  <div class="item3">
    <p style="margin: 0px;">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </div>
</div>

【讨论】：