两个 CSS 网格未在同一个父容器内对齐答案

【问题标题】：Two CSS Grids not Aligning Within the Same Parent Container两个 CSS 网格未在同一个父容器内对齐
【发布时间】：2019-07-11 14:24:16
【问题描述】：

我在同一个父容器中有两个单独的 CSS 网格。

2 个网格中的第一个具有列属性 grid-template-columns: 1fr 2fr;

2 中的第二个有grid-template-columns: 1fr 1fr 1fr;

但不知何故，网格并没有完全对齐 - 顶部网格中的文本需要从第二列开始（如图所示），但它与下面的网格有点不对齐，这是由于列大小。

由于网站设计，我真的可以不用将它们放在同一个网格中。

有没有办法让它们与 CSS Grid 语法对齐而不将它们放在同一个网格中？

Codepen：https://codepen.io/emilychews/pen/qzvPqJ

body {
  margin: 0;
  padding: 0;
}

.grid-section {
display: flex;
flex-direction: column;
align-items: center;
}

.row {
width: 80%; 
max-width: 1250px;
}

.grid-column {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

/* adds space to main grid title*/
.grid-row.row-1 .grid-column {
  margin: 5rem 0;
  grid-template-columns: 1fr 2fr
}

.grid-image {
  height: 10rem;
  width: 100%;
  background: lightblue;
}

h4.grid-heading {
  margin: 1rem 0 0 0;
}

.grid-text {
    position: relative;
    padding: 0 1rem 0 0;
    margin: 0 0 1rem 0;
}

<section class="section grid-section section-2">
    <div class="row grid-row row-1">
        <div class="one-col grid-column column-1">
            <div class="grid-heading"></div>
            <div class="grid-heading">
                <h3 class="grid-title">Focused on the Issues That Affect You.</h3>
            </div>
        </div>
    </div>
    <div class="row grid-row row-2">
        <div class="one-col grid-column column-1">
            <div class="home-grid grid-item-1">
                <div class="grid-image"></div>
                <div class="grid-text">
                    <h4 class="td grid-heading family">Lorem</h4>
                    <hr>
                    <p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <div class="arrow-wrapper"></div>
                </div>
            </div>
            <div class="home-grid grid-item-2">
                <div class="grid-image"></div>
                <div class="grid-text">
                    <h4 class="td grid-heading employment">Lorem</h4>
                    <hr>
                    <p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class="home-grid grid-item-3">
                <div class="grid-image"></div>
                <div class="grid-text">
                    <h4 class="td grid-heading residential-property">Lorem</h4>
                    <hr>
                    <p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class="home-grid grid-item-4">
                <div class="grid-image"></div>
                <div class="grid-text">
                    <h4 class="td grid-heading wills">Lorem</h4>
                    <hr>
                    <p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class="home-grid grid-item-5">
                <div class="grid-image"></div>
                <div class="grid-text">
                    <h4 class="td grid-heading landlord">Lorem</h4>
                    <hr>
                    <p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class="home-grid grid-item-6">
                <div class="grid-image"></div>
                <div class="grid-text">
                    <h4 class="td grid-heading litigation">Lorem</h4>
                    <hr>
                    <p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class="home-grid grid-item-7">
                <div class="grid-image"></div>
                <div class="grid-text">
                    <h4 class="td grid-heading commercial-property">Lorem</h4>
                    <hr>
                    <p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class="home-grid grid-item-8">
                <div class="grid-image"></div>
                <div class="grid-text">
                    <h4 class="td grid-heading business-affairs">Lorem</h4>
                    <hr>
                    <p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class="home-grid grid-item-9">
                <div class="grid-image"></div>
                <div class="grid-text">
                    <h4 class="td grid-heading media">Lorem</h4>
                    <hr>
                    <p class="td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
        </div> 
    </div>
</section>

【问题讨论】：

必须调整网格间隙/边距。至少目前支持display:subgrid。
错位的原因是间隙。 ....
也就是说，为什么不在顶行使用相同的 3 1fr 布局？ - codepen.io/Paulie-D/pen/QXoOjQ
是的，您的对齐距离大约有一半的网格间隙 - 因为您有两个在底部网格，一个在顶部。
@Paulie_D 我最初确实尝试过 3 个 1fr 列，但文本随后会在中间/标题列中换行。我在网格中添加了一个最大宽度，以使其更能代表网站。如果我这样做，我需要一种让标题从中间列溢出的方法。

标签： html css alignment css-grid grid-layout

【解决方案1】：

在第一个网格上，而不是这个：

.grid-column {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

考虑一下：

.grid-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* or even grid-template-columns: 1fr */
    text-align: center;
}

revised codepen

【讨论】：

嗨，迈克尔，我最初确实尝试过，但文本在中间列内换行。我为两个网格添加了最大宽度，以使其更能代表网站。有没有办法让标题从三列网格的中间列溢出（溢出：可见不起作用）？

【解决方案2】：

未对齐的原因是在第一个网格中只有一个间隙，在第二个网格中有 2 个。

一种可能性是将第一个网格的列属性设置为

grid-template-columns: 1fr 2fr 1px;

现在，第二个项目不能到达最右边的边框，但错位只是像素的一小部分。

【讨论】：

对此进行扩展：100% - 2rem（两个间隙）/分数，vs 100% - 1rem/分数。