我正在创建一张带有标题的卡片，下面有 2 列中的其他卡片。问题是我想要元素之间的填充，而不是它们周围的填充，至少不在两侧，因为这使得标题与下面的框不一致。这是我想要的：
我尝试为每张绿卡提供不同的填充，因此左上角的填充为 0 1em 1em 0，右上角的填充为 0 0 1em 1em 等等。如果我可以有一个通用的解决方案，包含任何给定数量的卡片、列、行，而不是像这样的“硬编码”填充，那么它会更干净。这可能吗？
一种解决方案是填充标题，但这感觉像是一个丑陋的解决方案。
顶部和底部填充可以存在，如果这样更容易的话，我只是不能把它放在左边或右边。
相关代码：
.content-card {
width: 100%;
padding: 2em 2em 2em;
background: black;
}
.service-card {
max-width: 100%;
padding: 1em 1em 1em;
background: grey;
border-radius: 0.25em;
}
.row {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.column-2x2 {
display: flex;
flex-direction: column;
flex-basis: 45%;
padding: 1em 1em 1em;
}
<div class="content-card">
<h2 style="color:white; font-size: 36px">Services.</h2>
<br>
<div class='row'>
<div class='column-2x2'>
<div class="service-card">
<h3 class="">Service 1.</h3>
</div>
</div>
<div class='column-2x2'>
<div class="service-card">
<h3 class="">Service 2.</h3>
</div>
</div>
<div class='column-2x2'>
<div class="service-card">
<h3 class="">Service 3.</h3>
</div>
</div>
<div class='column-2x2'>
<div class="service-card">
<h3 class="">Service 4.</h3>
</div>
</div>
</div>
</div>
我认为解决这个问题最简单的方法就是添加这个，
到你的Flex容器（在本例中是带有红卡类的div标签）。请尝试下面这个。
网格是解决这个问题的方法。
grid-template-columns告诉浏览器将 div 间隔两行（如果您想要三列，只需指定三个宽度 - 如果您想让多列具有相同的宽度，您也可以使用repeat()）。然后使用ngap更改之间的空格。CSS技巧对网格有很好的入门知识，Kevin Powell 对此也有很好的介绍
.title-container { padding: 0.5rem 1.5rem; border: 2px solid black; color: red; width: fit-content; } .container { display: grid; width: fit-content; grid-template-columns: 5rem 5rem; gap: 0.5rem; outline: 2px solid red; margin-block: 0.5rem; } .container>div { height: 7rem; border: 2px solid #22B14C; }