CSS Grid布局失效排查：aa/bc/dd布局头部无法占满整行

你的代码核心问题是CSS类名不能以数字开头，浏览器会直接忽略.1、.2这类无效选择器，导致grid-area属性完全没生效，头部元素自然不会按照你定义的grid-template-areas规则布局。

修正后的代码： #

CSS部分：

.container {
  display: grid;
  grid-template-areas: 'head head' 'nav main' 'foot foot';
  gap: 10px;
}

.content {
  background-color: red;
}

.head {
  grid-area: head;
}

.nav {
  grid-area: nav;
}

.main {
  grid-area: main;
}

.foot {
  grid-area: foot;
}

HTML部分：

<main>
  <div class="container">
    <div class="content head">header</div>
    <div class="content nav">nav</div>
    <div class="content main">aside</div>
    <div class="content foot">footer</div>
  </div>
</main>

补充说明： #

HTML的类名允许以数字开头，但CSS选择器规则明确禁止类名直接以数字起始（若非要用数字开头需转义，比如.\31，但不推荐这种写法），所以最好给类名添加字母前缀或使用语义化名称，避免这类语法问题。

内容的提问来源于stack exchange，提问作者user27294229