CSS Grid如何将高度和宽度拉伸至容器大小

Question

我无法使CSS Grid在高度和宽度上都延伸到其父元素的大小。当将宽度设置为100％时，宽度会很好地拉伸，但是高度将保持其初始大小？我不确定高度大小是在哪里计算的。

当将grid-template-rows设置为所有行的25％时，我认为这将为我提供所需的100％高度，但它没有起作用。 JSFiddle

body {
  margin: 10px;
  background-color: red;
  height: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 1px;
  background-color: #fff;
  color: #444;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: 
    "a b c d" 
    "e f f g" 
    "h f f i" 
    "j k l m";
  height: 100%;
  width: 100%;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

.g {
  grid-area: g;
}

.h {
  grid-area: h;
}

.i {
  grid-area: i;
}

.j {
  grid-area: j;
}

.k {
  grid-area: k;
}

.l {
  grid-area: l;
}

.m {
  grid-area: m;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

- user616

---

将 height: 100% 添加到 html 中，参见 https://dev59.com/JHI_5IYBdhLWcg3wAd82 - kukkuz

Answer 1

为了适应不同屏幕高度，可以使用视窗单位vh代替px或%；

使用CSS3的vw和vh单位进行尺寸调整

body {
  background-color: red;
  height: 100%;
}

.wrapper {
  display: grid;
  grid-gap: 1px;
  background-color: #fff;
  color: #444;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: "a b c d" "e f f g" "h f f i" "j k l m";
  height: 100vh;
  width: 100%;
}

.box {
  background-color: #444;
  color: #fff;
  padding: 20px;
  font-size: 150%;
}

.a {
  grid-area: a;
}

.b {
  grid-area: b;
}

.c {
  grid-area: c;
}

.d {
  grid-area: d;
}

.e {
  grid-area: e;
}

.f {
  grid-area: f;
}

.g {
  grid-area: g;
}

.h {
  grid-area: h;
}

.i {
  grid-area: i;
}

.j {
  grid-area: j;
}

.k {
  grid-area: k;
}

.l {
  grid-area: l;
}

.m {
  grid-area: m;
}

<div class="wrapper">
  <div class="box a">A</div>
  <div class="box b">B</div>
  <div class="box c">C</div>
  <div class="box d">D</div>
  <div class="box e">E</div>
  <div class="box f">F</div>
  <div class="box g">G</div>
  <div class="box h">H</div>
  <div class="box i">I</div>
  <div class="box j">J</div>
  <div class="box k">K</div>
  <div class="box l">L</div>
  <div class="box m">M</div>
</div>

- Majid Parvin

Answer 2

尝试这个，将高度从100％更改为100vh

.wrapper {
  display: grid;
  grid-gap: 1px;
  background-color: #fff;
  color: #444;
  grid-template-rows: 25% 25% 25% 25%;
  grid-template-columns: auto auto auto auto;
  grid-template-areas: "a b c d" "e f f g" "h f f i" "j k l m";
  height: 100vh;
  width: 100%;
}

- Varun Raval