如何在使用对齐项目的网格中使项目彼此左对齐：居中

Question

我正在使用grid。我将items居中，但我希望在cross axis上保持左位置不变。

.box {
  display: grid;
  grid-template-columns: 1fr;
  padding: 10px;
  border: 1px solid blue;
  gap: 1rem;
  justify-items: center;
}

img {
  width: 200px;
}

<div class="box">
  <img src="img/featured.jpg">
  <div class="item2">Item 2 Lorem</div>
</div>

注意：我只想在网格中解决。有很多临时解决方案，但我不希望这样做，因为我正在为此寻找完美的标准网格对齐解决方案。

Answer 1

.box {
    display: block;
    margin: 0 auto;
    width: max-content;
    padding: 10px;
    border: 1px solid blue;
}

img {
    width: 200px;
} 

.item2 {
    margin-top: 1rem;
}

<div class="box">
    <img src="pic_trulli.jpg" alt="Hi dear">
    <div class="item2">Item 2 Lorem</div>
</div>

Answer 2

您可以通过以下几种方式做到这一点：

1。固定宽度的文字（不响应）
根据您在问题中提供的信息。您可以简单地将item2 div的宽度设置为与图像相同，例如：

.box {
    display: grid;
    grid-template-columns: 1fr;
    padding: 10px;
    border: 1px solid blue;
    gap: 1rem;
    justify-items: center;
}
.item2,
img {
    width: 200px;
} 

<div class="box">
    <img src="https://via.placeholder.com/200x150">
    <div class="item2">Item 2 Lorem</div>
</div>

2。响应方式

这将使我们能够响应性地设置您需要的2个单独的对齐方式： centre 容器元素和 left-align 其内容，例如

<div class="box">
  <div class="boxcontent">
     Content here...
  </div>
</div> 

CSS：.boxcontent { text-align: left; }

为什么有效：

在图像和文本之间必须具有定义的关系，否则无法告诉网格这两个单独的元素必须相对放置。您可以将它们放在容器中。

考虑一下，您将尝试在此处进行2个单独的对齐：

1. 使图像和文本相对于网格居中 而且
2. 使它们彼此保持对齐，使它们保持对齐状态。

将它们放入容器中可通过在图像和文本之间建立关系来实现以下两个目的：

1. 它们相对于网格也是
2. 允许它们相对于彼此放置，而与网格无关

工作示例：

.box {
  display: grid;
  grid-template-columns: 1fr;
  padding: 10px;
  border: 1px solid blue;
  gap: 1rem;
  justify-items: center;
}

.boxcontent {
  text-align: left;
}

img {
  width: 200px;
}

<div class="box">
  <div class="boxcontent">
    <img src="https://via.placeholder.com/200x150">
    <div class="item2">Item 2 Lorem</div>
  </div>
</div>