CSS网格内的2列答案

【问题标题】：2 colums inside a CSS gridCSS网格内的2列
【发布时间】：2021-01-30 09:03:20
【问题描述】：

我目前正在尝试一种叫做 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>

【问题讨论】：

标签： css flexbox css-float css-grid

【解决方案1】：

尝试不使用“grid-area: section;”。我想你想要什么。

【讨论】：

【解决方案2】：

我不确定，但我认为一个区域名称不能用于描述多个 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>

【讨论】：