我有一个 2 列布局，并且希望将一行拆分为 3 列布局，是否可以在最初不指定 3 列布局的情况下实现？
Example
该行中的所有 7 应分为 3 个部分（请参阅代码输出）
1到1.5显然不行。
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
.custom {
grid-column: 1/1.5
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
</div>
A hack应谨慎使用（或根本不使用）
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
box-sizing: border-box;
}
.custom {
width: 66.66%
}
.custom+.custom {
margin-left: -33.33%;
grid-column: 2;
grid-row:3;
}
.custom+.custom+.custom {
margin-left: 33.33%;
grid-column: 2;
grid-row:3;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
</div>
合理的解决方案是移至 6 列：
.grid-container {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
.grid-item {
grid-column:span 3;
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
box-sizing: border-box;
}
.custom {
grid-column:span 2;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
<div class="grid-item custom">7</div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
