CSS Grid：`grid-template-areas` - 使用句点无效的空白区域

Question

我正在尝试将元素放入一个简单的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>

我做错了什么？

Answer 1

您的ID＆amp; amp;＆amp;类

您在HTML中的ID和CSS中的类

<强> HTML

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

<强> CSS

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

修复它并且工作正常。

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;