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)用作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>

Answer 2

我用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>

请注意：
-我删除了两个项目以提供更好的演示，
-由于填充，第一/最后一项的宽度为60。如果您将50作为最终结果，请将其设置为width:40px或box-sizing:border-box

Answer 3

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

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

P.S。如果您希望将它们放在一行上，则可以将display: inline用于子div。

编辑1：尝试设置50px子级的宽度，并为主要div设置grid-auto-flow: column。

https://jsfiddle.net/1p4sdt9y/

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

3 个答案: