Question

我刚刚开始学习CSS网格。我创建了一个具有七个div的HTML文件。我正在尝试使用grid-template-columns:1fr 1fr将每个div的宽度转换为50％，但这是行不通的。所有的div都会占据整个身体的宽度。

我不明白为什么会这样。向我解释为什么所有div都占用整个空间而不是仅占用50％的空间。

body {
  display: grid;
  box-sizing: border-box;
}

div {
  grid-template-columns: 1fr 1fr;
  border: 0.5px solid black;
  height: 100px;
}

#one{background-color:#9f9}
#two{background-color:#f99}
#three{background-color:#99f}
#four{background-color:#555}
#five{background-color:rgb(25, 233, 25)}
#six{background-color:rgb(255, 214, 153)}
#seven{background-color:rgb(255, 253, 153)}

<div id=one></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>

Answer 1

grid-template-columns属性适用于网格容器，因此将其放在与display: grid相同的声明中。

body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  box-sizing: border-box;
}

div {
  border: 0.5px solid black;
  height: 100px;
}

#one{background-color:#9f9}
#two{background-color:#f99}
#three{background-color:#99f}
#four{background-color:#555}
#five{background-color:rgb(25, 233, 25)}
#six{background-color:rgb(255, 214, 153)}
#seven{background-color:rgb(255, 253, 153)}

<div id=one></div>
<div id="two"></div>
<div id="three"></div>
<div id="four"></div>
<div id="five"></div>
<div id="six"></div>
<div id="seven"></div>

网格模板列在网格中不起作用

1 个答案: