时间戳

首页 > 解决方案 > 为什么我的网格模板行设置会影响列？

css - 为什么我的网格模板行设置会影响列？

问题描述

我正在尝试将行设置为grid-template-rows: 30px 1fr;使第一行30px和所有后续行占据他们需要的高度，但看起来这种样式正在影响列中的第三项。

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.cont {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 30px 1fr;
  grid-gap: 2px;
}
.cont div {
  background: red;
  height: 90px;
}
<div class="cont">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

标签： csscss-grid

解决方案

你有一个溢出。您将一个高度等于的元素放在等于90px的行内30px

添加一些不透明度以更好地理解：

* {
  margin: 0;
}

html,
body {
  height: 100%;
}

.cont {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 30px 1fr;
  grid-gap: 2px;
}

.cont div {
  background: red;
  border:5px solid ;
  height: 90px;
  opacity: 0.5;
}
<div class="cont">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

您可以清楚地看到第一行的元素如何覆盖第二行的元素：

推荐阅读