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

Question

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

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

第二个 grid-template-columns: 1fr 1fr 1fr;

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

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

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

代码笔：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>

Answer 1

错位的原因是第一个格子只有一个空隙，第二个格子有两个空隙。

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

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

现在，第二个项目无法记录到最右边界，但错位只是一个像素的几分之一。

Answer 2

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

.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

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

Two CSS Grids not Aligning Within the Same Parent Container

html

css

alignment

grid-layout

css-grid