css - CSS的奇数列划分display:grid属性。当列数为奇数时，使最后两列的宽度为50％

Question

我想添加网格列：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.
}

Answer 1

一种解决方法，知道我们要固定数目的列，即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>