我在同一个父容器中有两个独立的 CSS 网格。
2 个网格中的第一个具有列属性 grid-template-columns: 1fr 2fr;
第二个有 grid-template-columns: 1fr 1fr 1fr;
然而不知何故网格并没有完全对齐 - 顶部网格中的文本需要从第二列开始(如图所示),但它与下面的网格稍微不对齐,这是由列大小。
由于网站设计的缘故,我真的可以不将它们放在同一个网格中。
有没有办法让它们与 CSS Grid 语法保持一致而不将它们放在同一个网格中?
代码笔: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>
最佳答案
在第一个网格上,而不是这个:
.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;
}
关于html - 两个 CSS 网格在同一个父容器中不对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56991468/