如何使网格的第一列和最后一列固定宽度？

Question

我想要一个第一列为 50px 的网格，最后一列也为 50px，中间的所有列（不知道列数）都有 1fr。

我尝试过grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr)) 50px;但没有运气。

body {
    font:normal normal 0.8em/0.7em Calibri, Arial, Helvetica;
}
.container {
    background:peru;
    padding:10px;
    display:grid;
    grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr));

    /* grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr)) 50px; ????*/
}
.container div {
    background:#f0ff00;
    margin:5px;
    padding:5px;
    text-align: center;
    color:#333333;
}

<div class="container">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item4">Item 4 - 1fr</div>
  <div class="item5">Item 5 - 1fr</div>
  <div class="item6">Item 6 - 1fr</div>
  <div class="item7">Item 7 - 1fr</div>
  <div class="item8">Item 8 - 50px</div>
</div>

https://jsfiddle.net/gb1knso0/

Answer 1

问题出在你的身上100px（在狭窄的布局上，它变得太大而没有min价值，迫使网格布局被破坏）。

你应该使用calc((100% - 100px)/6)as min.

body{
  font:normal normal 0.8em/0.7em Calibri, Arial, Helvetica;
}
.container{
      background:peru;
      padding:10px;
      display:grid;
      grid-template-columns: 50px repeat(auto-fit, minmax(calc((100% - 100px)/6), 1fr)) 50px;
      
      /* grid-template-columns: 50px repeat(auto-fit, minmax(100px, 1fr)) 50px; ????*/
}

.container div{
  background:#f0ff00;
  margin:5px;
  padding:5px;
  text-align: center;
  color:#333333;
}

<div class="container">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item4">Item 4 - 1fr</div>
  <div class="item5">Item 5 - 1fr</div>
  <div class="item6">Item 6 - 1fr</div>
  <div class="item7">Item 7 - 1fr</div>
  <div class="item8">Item 8 - 50px</div>
</div>

...其中 6 是列数 - 2。您说它是“任意数量的列”，但在 DOM 中它是非常精确的列数。如果需要，请在（重新）渲染页面时使用 JavaScript 进行（重新）计算。或用作0最小值。

下面是一个 JavaScript 脚本，它计算gridTemplateColumns并应用正确的值：

Array.from(document.querySelectorAll('.container')).forEach(c => {
  const s = `50px repeat(auto-fit, minmax(calc((100% - 100px)/${c.childElementCount - 2}), 1fr)) 50px`;
  c.style.gridTemplateColumns = s;
  
  // the next bit just displays the styles in the titles. so you can remove from here...
  const h3 = document.createElement('h3');
  h3.innerText = `grid-template-columns: ${s};`;
  c.parentElement.insertBefore(h3, c)
  // ...until here.

});

body{
  font:normal normal 0.8em/0.7em Calibri, Arial, Helvetica;
}
h3{
  text-align:center;
}
.container{
  background:peru;
  padding:10px;
  display:grid;
}

.container div{
  background:#f0ff00;
  margin:5px;
  padding:5px;
  text-align: center;
  color:#333333;
}

<div class="container opt1">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item4">Item 4 - 1fr</div>
  <div class="item5">Item 5 - 1fr</div>
  <div class="item6">Item 6 - 1fr</div>
  <div class="item7">Item 7 - 1fr</div>
  <div class="item8">Item 8 - 50px</div>
</div>

<div class="container opt2">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item4">Item 4 - 1fr</div>
  <div class="item5">Item 5 - 1fr</div>
  <div class="item6">Item 6 - 1fr</div>
  <div class="item7">Item 7 - 1fr</div>
  <div class="item4">Item 8 - 1fr</div>
  <div class="item5">Item 9 - 1fr</div>
  <div class="item6">Item 10 - 1fr</div>
  <div class="item7">Item 11 - 1fr</div>
  <div class="item8">Item 12 - 50px</div>
</div>

<div class="container opt3">
  <div class="item1">Item 1 - 50px</div>
  <div class="item2">Item 2 - 1fr</div>
  <div class="item3">Item 3 - 1fr</div>
  <div class="item7">Item 4 - 1fr</div>
  <div class="item8">Item 5 - 50px</div>
</div>