CSS 网格不起作用，不知道为什么

Question

我正在尝试构建一个简单的网格布局 aa/bc/dd，但无法弄清楚出了什么问题，有点没有想法了...

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

.content {
  background-color: red;
}

.1 {
  grid-area: head;
}

.2 {
  grid-area: nav;
}

.3 {
  grid-area: main;
}

.4 {
  grid-area: foot;
}

<main>
  <div class="container">
    <div class="content 1">header</div>
    <div class="content 2">nav</div>
    <div class="content 3">aside</div>
    <div class="content 4">footer</div>
  </div>
</main>

它所做的只是将我的元素放置在头部导航/主脚 2:2 网格中，由于某种原因头部永远不会延伸到填充第一行。

最后我只是从不同的来源获得了代码并对其进行了修改，但我想从我自己的代码中做错的事情中吸取教训。

Answer 1

你犯了一个大错误。 CSS 中的类名不能是数字。您必须使用字符串作为类名。

我提供更新的代码。

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

      .content {
        background-color: red;
        padding: 10px;
      }

      .header {
        grid-area: head;
      }

      .nav {
        grid-area: nav;
      }

      .main {
        grid-area: main;
      }

      .footer {
        grid-area: foot;
      }
    </style>
  </head>

  <body>
    <main>
      <div class="container">
        <div class="content header">header</div>
        <div class="content nav">nav</div>
        <div class="content main">aside</div>
        <div class="content footer">footer</div>
      </div>
    </main>
  </body>
</html>

CSS 网格不起作用，不知道为什么

问题描述投票：0回答：1

1个回答

最新问题

CSS 网格不起作用，不知道为什么

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1