我想添加网格列:span 3.5;我不知道这是可能的还是不可能的。有人可以帮忙吗?
连续需要7列
这是我到目前为止。我只是无法划分最后一栏
我无法添加任何其他列,我只想使此代码正常工作。
.skills ul {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(7, auto);
grid-gap: 1rem;
}
ul li:nth-child(15), .skills ul li:nth-child(16) {
grid-column: span 3; // I tried making it 3.5 but didn't worked.
}
最佳答案
一种解决方法,知道我们要固定数目的列,即7和16个元素,我们可以使用transform将最后两个元素居中
div {
padding: 10px;
border: 1px solid;
}
img {
max-width: 100%;
min-width: 100%;
}
.grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
overflow: auto;
resize: both;
}
/* targeting the last two elements */
.grid>div:last-child {
color: red;
transform: translate(350%);
}
.grid>div:nth-last-child(2) {
color: red;
transform: translate(150%);
}
<div class="grid">
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
<div><img src="https://picsum.photos/100/100"></div>
</div>
关于css - CSS的奇数列划分display:grid属性。当列数为奇数时,使最后两列的宽度为50%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59502742/