Question

我在同一个父容器中有两个单独的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>

Answer 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

Answer 2

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

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

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

现在，第二个项目无法使测井仪到达最右边的边界，但是未对准仅是像素的一小部分。

两个CSS网格不在同一父容器中对齐

2 个答案: