网格项目在必要时占用了尽可能多的空间

时间:2018-11-29 17:11:19

标签: html css css3 css-grid

我想如下创建View: small left box, right extended box in one row, then second row, one box which takes whole area

我只能用来实现Grid View功能(没有flexbox)。

目前,我已经准备好像这样的网格:

.item1 { grid-area: left; }
.item2 { grid-area: right; }
.item3 { grid-area: content; }

.grid-container {
  display: grid;
  grid-template-areas:
    'left right'
    'content content';
  grid-gap: 5px;
  background-color: #2196F3;
  padding: 5px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 5px 0;
  font-size: 30px;
  }
<div class="grid-container">
  <div class="item1">left</div>
  <div class="item2">right</div>
  <div class="item3">content</div>
</div>

这是js小提琴:https://jsfiddle.net/d32phsyu/3/

我有左,右和内容网格模板区域的地方。

问题是,我希望左侧区域仅占用其内容(如内联块)的空间,而右侧区域则占用所有其他空间。

是否有可能需要剩余多少像素?

如果是,那么如何实现?

1 个答案:

答案 0 :(得分:3)

您需要定义列宽,第一个为auto,第二个为1fr(其余空格)。

.item1 {
  grid-area: left;
}

.item2 {
  grid-area: right;
}

.item3 {
  grid-area: content;
}

.grid-container {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'left right' 'content content';
  grid-gap: 5px;
  padding: 5px;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 5px;
  font-size: 30px;
  border: 2px solid blue;
}
<div class="grid-container">
  <div class="item1">left</div>
  <div class="item2">right</div>
  <div class="item3">content</div>
</div>