CSS网格内有2个列

问题描述

我目前正在尝试一些新的CSS网格。通常，我使用Bootstrap 4来构建网站，但是这次我想让我们学习一些新知识。我尝试通过在部分中添加背景色来做一些基本的事情，以了解实际发生的情况

我有一个名为“ main”的部分，我想在该部分中有2列，其中一列位于左侧，另一列位于右侧。我尝试在网格内添加一个网格，但这覆盖了所有对我都不起作用的东西

* {
  margin: 0;
  padding: 0;
}

.nav {
  grid-area: nav; 
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  background-color: #2196F3;
  color: white;
}
.section{
  grid-area: section;
}
.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    'section section';

  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  background-color: #2196F3;
  color: white;
}

.footer{
  grid-area: footer; 
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  background-color: #2196F3;
  color: white;
}

body {
  display: grid;
  grid-template-columns: 1fr 500px 500px 1fr;
  grid-template-areas:
    '. nav nav .'
    '. main main .'
    '. footer footer .';
  grid-gap: 10px;
}

<nav class="grid-item nav">
    navigition
</nav>

<main class="grid-item main">
    <section class="grid-item section">
        1
    </section>
    <section class="grid-item section">
        2
    </section>
</main>

<footer class="grid-item footer">
    footer
</footer>

<script src="javascript/script.js"></script>

解决方法

尝试不带“ grid-area：section;”。它满足了我的想法。

,

我不确定，但是我认为一个区域名称不能用于描述多个html元素？它将解释为什么您可以将两个区域分配给同一项目（。main main。），却不能将两个不同的项目“ .section”分配给同一名称部分（它像一个唯一元素一样理解）。我可以让您检查this W3C link：

还可以使用grid-area属性为网格项分配名称。然后可以通过网格容器的grid-template-areas属性引用命名的网格项目。

但是，如果有帮助，可以解决您的问题：

* {
  margin: 0;
  padding: 0;
}

.nav {
  grid-area: nav; 
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  background-color: #2196F3;
  color: white;
}
.main {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr 1fr; /* just describe that you want two columns*/
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  background-color: #2196F3;
  color: white;
}

.footer{
  grid-area: footer; 
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
  background-color: #2196F3;
  color: white;
}

body {
  display: grid;
  grid-template-columns: 1fr 1000px 1fr; /*change this*/
  grid-template-areas:
    '. nav .'
    '. main .'
    '. footer .'; /*removing useless repetition*/
  grid-gap: 10px;
}

<nav class="grid-item nav">
    navigition
</nav>

<main class="grid-item main">
    <section class="grid-item section">
        1
    </section>
    <section class="grid-item section">
        2
    </section>
</main>

<footer class="grid-item footer">
    footer
</footer>

<script src="javascript/script.js"></script>