如何解决使用calc缩进CSS Grid的子元素准确对齐网格列
我在 CSS 网格项中有一个内容块，它工作正常。在某些情况下，我希望能够如此准确地将子元素缩进 1 或 2 列，使其与其父网格对齐。
我确实通过将相同的网格应用于子块（示例中为 storyblock__caption）来实现这一点，但是这导致元素跨越了可用空间的 100% 宽，这是我不想要的。所以我决定尝试使用 calc 解决它。
我提供了一个乍一看确实正确的示例。示例中使用 calc 的段落似乎与网格的第二列对齐。但是，如果您要更改间距，使其与第 3 列的左边缘对齐，例如：margin-left: calc(((2 / 4) * 100%) - ((2 / 4) * 12px));，您可以看到数学不相加。
我相信这可能是因为网格没有考虑 storyblock__caption 的 12px 左/右填充。但是我尝试从计算中添加/减去 24 像素，但无法正常工作。
这是我的示例代码：
/* #BASE */
body {color: white; margin: 0 auto;}
img {width: 100%; max-width: 100%;}
h1 {margin-bottom: 15px;}
p {margin-bottom: 15px;}
.btn {background: white; color: black; display: inline-block; padding: 8px 24px; text-decoration: none;}
/* #CONTENT BLOCK */
.storyblock {
display: grid;
grid-column-gap: 12px;
grid-template-columns: repeat(4,1fr);
margin: 0 auto;
position: relative;
max-width: 375px;
}
.storyblock--overlay {
align-items: end;
}
.storyblock--overlay .storyblock__media,.storyblock--overlay .storyblock__caption {
grid-row: 1;
}
.storyblock__media,.storyblock__caption {
grid-column: 1/5;
}
.storyblock__caption {
padding: 0 12px 24px;
}
.storyblock__caption p {
margin-left: calc(((1 / 4) * 100%) - ((1 / 4) * 12px));
}<div class="storyblock storyblock--overlay">
<div class="storyblock__media">
<img src="https://www.fillmurray.com/375/500" alt="ALT TEXT" />
</div>
<div class="storyblock__caption">
<h1>Lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing.</p>
<a href=" #" class="btn">Shop Now</a>
</div>
</div>解决方法
使用 CSS 变量，让您的生活更轻松。我已将间隙更改为 10px 以更好地识别值并避免与具有相同值的填充混淆。您还可以使用 CSS 变量来填充和间隙
/* #BASE */
body {color: white; margin: 0 auto;}
img {width: 100%; max-width: 100%;}
h1 {margin-bottom: 15px;}
p {margin-bottom: 15px;}
.btn {background: white; color: black; display: inline-block; padding: 8px 24px; text-decoration: none;}
/* #CONTENT BLOCK */
.storyblock {
display: grid;
grid-column-gap: 10px;
grid-template-columns: repeat(4,1fr);
margin: 0 auto;
position: relative;
max-width: 375px;
}
.storyblock--overlay {
align-items: end;
}
.storyblock--overlay .storyblock__media,.storyblock--overlay .storyblock__caption {
grid-row: 1;
}
.storyblock__media,.storyblock__caption {
grid-column: 1/5;
}
.storyblock__caption {
padding: 0 12px 24px;
}
.storyblock__caption p.indent {
margin-left: calc(var(--n)*(100% + 2*12px + 10px)/4 - 12px);
}<div class="storyblock storyblock--overlay">
<div class="storyblock__media">
<img src="https://www.fillmurray.com/375/500" alt="ALT TEXT" />
</div>
<div class="storyblock__caption">
<h1>Default</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing.</p>
<a href=" #" class="btn">Shop Now</a>
</div>
</div>
<div class="storyblock storyblock--overlay">
<div class="storyblock__media">
<img src="https://www.fillmurray.com/375/500" alt="ALT TEXT" />
</div>
<div class="storyblock__caption">
<h1>1 Col Indent</h1>
<p class="indent" style="--n:1">Lorem ipsum dolor sit amet consectetur adipiscing.</p>
<a href=" #" class="btn">Shop Now</a>
</div>
</div>
<div class="storyblock storyblock--overlay">
<div class="storyblock__media">
<img src="https://www.fillmurray.com/375/500" alt="ALT TEXT" />
</div>
<div class="storyblock__caption">
<h1>2 Col Indent</h1>
<p class="indent" style="--n:2">Lorem ipsum dolor sit amet consectetur adipiscing.</p>
<a href=" #" class="btn">Shop Now</a>
</div>
</div>
<div class="storyblock storyblock--overlay">
<div class="storyblock__media">
<img src="https://www.fillmurray.com/375/500" alt="ALT TEXT" />
</div>
<div class="storyblock__caption">
<h1>3 Col Indent</h1>
<p class="indent" style="--n:3">Lorem ipsum dolor sit amet consectetur adipiscing.</p>
<a href=" #" class="btn">Shop Now</a>
</div>
</div>我很感激对其进行完整性检查，但我想我已经通过使用以下计算将其缩进 1 列并与父网格装订线对齐来解决此问题...
1 列： margin-left: calc(((1 / 4) * (100% + 24px)) - ((3 / 4) * 12px));
然后，如果您想缩进 2 列，您只需将分数更改为：
2 列： margin-left: calc(((2 / 4) * (100% + 24px)) - ((2 / 4) * 12px));
最后是 3 列。这看起来很傻，但只是为了完成集......
3 列： margin-left: calc(((3 / 4) * (100% + 24px)) - ((1 / 4) * 12px));
...将来我可能只是在子容器上设置相同的网格并将我不想在 div 中拉伸 100% 宽的项目包裹起来！
/* #BASE */
body {color: white; margin: 0 auto;}
img {width: 100%; max-width: 100%;}
h1 {margin-bottom: 15px;}
p {margin-bottom: 15px;}
.btn {background: white; color: black; display: inline-block; padding: 8px 24px; text-decoration: none;}
/* #CONTENT BLOCK */
.storyblock {
display: grid;
grid-column-gap: 12px;
grid-template-columns: repeat(4,.storyblock__caption {
grid-column: 1/5;
}
.storyblock__caption {
padding: 0 12px 24px;
}
.storyblock__caption p.indent-1 {
margin-left: calc(((1 / 4) * (100% + 24px)) - ((3 / 4) * 12px));
}
.storyblock__caption p.indent-2 {
margin-left: calc(((2 / 4) * (100% + 24px)) - ((2 / 4) * 12px));
}
.storyblock__caption p.indent-3 {
margin-left: calc(((3 / 4) * (100% + 24px)) - ((1 / 4) * 12px));
}<div class="storyblock storyblock--overlay">
<div class="storyblock__media">
<img src="https://www.fillmurray.com/375/500" alt="ALT TEXT" />
</div>
<div class="storyblock__caption">
<h1>Default</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing.</p>
<a href=" #" class="btn">Shop Now</a>
</div>
</div>
<div class="storyblock storyblock--overlay">
<div class="storyblock__media">
<img src="https://www.fillmurray.com/375/500" alt="ALT TEXT" />
</div>
<div class="storyblock__caption">
<h1>1 Col Indent</h1>
<p class="indent-1">Lorem ipsum dolor sit amet consectetur adipiscing.</p>
<a href=" #" class="btn">Shop Now</a>
</div>
</div>
<div class="storyblock storyblock--overlay">
<div class="storyblock__media">
<img src="https://www.fillmurray.com/375/500" alt="ALT TEXT" />
</div>
<div class="storyblock__caption">
<h1>2 Col Indent</h1>
<p class="indent-2">Lorem ipsum dolor sit amet consectetur adipiscing.</p>
<a href=" #" class="btn">Shop Now</a>
</div>
</div>
<div class="storyblock storyblock--overlay">
<div class="storyblock__media">
<img src="https://www.fillmurray.com/375/500" alt="ALT TEXT" />
</div>
<div class="storyblock__caption">
<h1>3 Col Indent</h1>
<p class="indent-3">Lorem ipsum dolor sit amet consectetur adipiscing.</p>
<a href=" #" class="btn">Shop Now</a>
</div>
</div>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
