CSS 网格：`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 与类

不匹配

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

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

CSS Grid: `grid-template-areas` — empty area using period not working

html

css

css-grid