CSS Grid：`grid-template-areas` — 使用句点的空白区域不起作用答案

【问题标题】：CSS Grid: `grid-template-areas` — empty area using period not workingCSS Grid：`grid-template-areas` — 使用句点的空白区域不起作用
【发布时间】：2018-03-13 13:34:20
【问题描述】：

我正在尝试将元素放置到一个简单的 9x9 网格中，但是当我尝试将元素放置在左下角或右下角时，它们并没有停留在那里，而是最终在它们应该在的位置上方一个框。 Here's a JSFiddle showing what I'm trying, and is not working.

根据spec，在定义grid-template-areas 时为空框放置. 就足够了……但我也尝试使用grid-area: 1/2/3/4 使用普通布局，但这也不起作用……

这就是我所拥有的，css：

grid-template-areas: 
"topBar topBar topBar"
". main ."
"aboutDiv . optionsDiv";

/* solarized theme colors, trimmed for brevity */
:root {
	--base2:     #eee8d5;
	--base3:     #fdf6e3;
	--yellow:    #b58900;
}
body {
	margin: 0;
	background-color: var(--base3); 
	height: 100%;
}
.wrapper {
	width: 100vw;
	height: 100vh;
  	display: grid; 
	grid-template-columns: 0.1fr 0.8fr 0.1fr;
    grid-template-rows: 0.1fr 0.8fr 0.1fr;
    grid-template-areas: 
    "topBar topBar topBar"
    ". main ."
    "aboutDiv . optionsDiv";
}
.topBar {
	background-color: var(--yellow);
	grid-area: topBar;
}
.main {
	grid-area: main;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
textarea {
	resize: vertical;
	background-color: var(--base2);
}
.aboutDiv {
	grid-area: aboutDiv;
}
.optionsDiv {
	grid-area: optionsDiv;
}

<div class="wrapper">
	<div class="topBar">
		
	</div>
	<div class="main">
		<div class="titleDiv">
			<p>QARI</p>
		</div>
		<div id="textDiv">
			<textarea id="message" cols="50"></textarea>
		</div>
		<div id="buttonDiv">
			<input type="submit" onclick="showMessage(); hideInput()" value="Enter" id="button"/>
		</div>
	</div>
	<div id="aboutDiv">
			about
	</div>
	<div id="optionsDiv">
			options
	</div>
</div>

我做错了什么？

【问题讨论】：

标签： html css css-grid

【解决方案1】：

您的 ID 和课程不匹配

您在 HTML 中拥有 ID，在 CSS 中拥有类

HTML

<div id="aboutDiv">
        about
</div>
<div id="optionsDiv">
        options
</div>

CSS

.aboutDiv {
    grid-area: aboutDiv;
}
.optionsDiv {
    grid-area: optionsDiv;
}

修复它，它就可以正常工作了。

/* solarized theme colors, trimmed for brevity */

:root {
  --base2: #eee8d5;
  --base3: #fdf6e3;
  --yellow: #b58900;
}

body {
  margin: 0;
  background-color: var(--base3);
  height: 100%;
}

.wrapper {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-columns: 0.1fr 0.8fr 0.1fr;
  grid-template-rows: 0.1fr 0.8fr 0.1fr;
  grid-template-areas: "topBar topBar topBar" ". main ." "aboutDiv . optionsDiv";
}

.topBar {
  background-color: var(--yellow);
  grid-area: topBar;
}

.main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

textarea {
  resize: vertical;
  background-color: var(--base2);
}

#aboutDiv {
  grid-area: aboutDiv;
}

#optionsDiv {
  grid-area: optionsDiv;
}

<div class="wrapper">
  <div class="topBar">

  </div>
  <div class="main">
    <div class="titleDiv">
      <p>QARI</p>
    </div>
    <div id="textDiv">
      <textarea id="message" cols="50"></textarea>
    </div>
    <div id="buttonDiv">
      <input type="submit" onclick="showMessage(); hideInput()" value="Enter" id="button" />
    </div>
  </div>
  <div id="aboutDiv">
    about
  </div>
  <div id="optionsDiv">
    options
  </div>
</div>

【讨论】：