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

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

我用display flex做了。通过给它们所有flex:1它们是相同的，并且对于第一个和最后一个我们设置宽度：

.container{
      background:peru;
      padding:10px;
      display:flex;
}

.container div{
  flex: 1;
  background:#f0ff00;
  margin:5px;
  padding:5px;
  text-align: center;
  color:#333333;
}
.container div:first-child,
.container div:last-child{
  width: 50px;
  flex: none;
}

<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="item8">Item 8 - 50px</div>
</div>

Please note:
- I've removed two items to give a better demo,
- the first/last item are 60 width because of the padding. If you 50 as end result, either make it width:40px or box-sizing:border-box

Answer 2

您可以将grid-template-columns: 50px auto 50px用于container div，然后将内部未知数量的div放入另一个div中，并将该div的display: grid设置为包含子div。

工作JsFiddle：https://jsfiddle.net/7mgnaf5L/

附：如果您想在一行上使用display: inline，可以使用grid-auto-flow: column。

编辑1：尝试设置50px子项的宽度，并为主div设置https://jsfiddle.net/1p4sdt9y/。

100px

Answer 3

问题在于你的min（在狭窄的布局上，它对于calc((100% - 100px)/6)值变得太大，迫使网格布局中断）。

你应该使用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>

0

...其中6是列数 - 2.你说它是“任意数量的列”，但在DOM中它是非常精确的列数。如果需要，使用JavaScript在（重新）渲染页面时（重新）计算它。或者使用gridTemplateColumns作为分钟。

---

这是一个JavaScript脚本，它计算

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>

qazxswpoi