如何在 3 列网格设置中拉伸中间列 [关闭]答案

【问题标题】：How to stretch middle column in a 3 column grid setup [closed]如何在 3 列网格设置中拉伸中间列 [关闭]
【发布时间】：2019-12-26 15:45:24
【问题描述】：

我正在尝试设置具有单行和三列“grid”系统的标题。如：

* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: 100px,1fr,100px;
  grid-template-rows: 1fr;

  grid-template-areas: "a b c";

}
.item1 {
  grid-area: a;
  justify-self:start;
}
.item2 {
  grid-area: b;
  justify-self:stretch;
}
.item3 {
  grid-area: c;
  justify-self:end;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>
</div>

但是，中间列只会居中而不是拉伸。这是小提琴https://jsfiddle.net/mmo7534/pnxtys79/2/

我怎样才能让它伸展？

【问题讨论】：

标签： css css-grid grid-layout

【解决方案1】：

从您的 grid-template-columns 值中删除逗号，然后您就不必担心为单个项目设置样式：

* {
  box-sizing: border-box;
}

.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
  display: grid;
  grid-template-columns: 100px 1fr 100px;
}

.wrapper>div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
}

<div class="wrapper">
  <div class="item1">Item 1</div>
  <div class="item2">Item 2</div>
  <div class="item3">Item 3</div>

</div>

【讨论】：

【解决方案2】：

* {box-sizing: border-box;}

.wrapper {
    border: 2px solid #f76707;
    border-radius: 5px;
    background-color: #fff4e6;
}

.wrapper > div {
    border: 2px solid #ffa94d;
    border-radius: 5px;
    background-color: #ffd8a8;
    padding: 1em;
    color: #d9480f;
}
.wrapper {
  display: grid;
  grid-template-columns: 100px 1fr 100px; /* there are no commas. */
  grid-template-rows: 1fr;

  grid-template-areas: "a b c";

}

.item2 {
  grid-area: b;
  justify-self:stretch;
} /* Item1 and Item2 automatically will be aligned at start and end. */

【讨论】：

【解决方案3】：

只需从您的 grid-template-columns 值中删除逗号。

 grid-template-columns: 100px 1fr 100px;

https://jsfiddle.net/3cv6ypq5/

【讨论】：