CSS 网格创建一个简单的 CSS 布局的问题，其中行和多个 div 居中

Question

我是 CSS 网格的初学者，想为我的个人博客创建一个简单的 CSS 布局。我正在 codepen.io

内试用

我想要实现的是拥有多个具有全宽的行，并在这些行中具有不同宽度的额外 div 并在父级（行）中居中，也许不止一个原因我需要让在一行中从上到下说 10 个 div。但我被卡住了，它不工作。我已经为我正在寻找的东西创建了一个小图像。（link在底部）

这是我的 HMTL：

<div class="container">
  <div class="box menu">Menu with full width and elements in it</div>
  <div class="box header">Header with full with, but i cannot change the color on the full width background and have for the inner box a different color</div>
  <div class="box posts">Posts coming here   ... </div>
  <div class="box posts">
    <div class="post_small_width">smaller</div>
    <div class="post_medium_width">wider</div>
  </div>
  <div class="box pages">Pages, normally here should be a container inside which has not full width, maybe 900px and centered within this div</div>
  <div class="box footer">Footer</div>
</div>

这是 CSS:

* {
    /* box-sizing: border-box; */
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "menu"
    "header"
    "posts"
    "post_small_width"
    "post_medium_width"
    "pages"
    "footer"
  ;

  grid-template-rows: auto;
}

.menu {
  grid-area: menu;
  background-color: #444;
  padding: 10px;
}

.header {
  grid-area: header;
  background-color: pink;
  height: 100px;
  width: 600px;
  margin: auto;
}

.posts {
  margin:auto;
  background-color: yellow;
  grid-area: posts;
  padding-top: 10px;
  padding-bottom: 10px;
}

.pages {
  background-color: #ccc;
  grid-area: pages;
}

.post_small_width {
  background-color: #red;
  grid-area: post_small_width;
}

.post_medium_width {
  background-color: #red;
  grid-area: post_medium_width;
}

.footer {
  background-color: black;
  color: white;
  padding: 10px;
  grid-area: footer;
}

.box {

}

这是图片： Sample Layout for visualization

Answer 1

我认为这就是你想要实现的：https://codepen.io/binarytrance/pen/pWJPdN

您需要更好地了解如何构建 DOM。阅读响应式设计。出于某种原因，您想为父容器设置宽度。您应该做的是为您的父容器设置一个相等的最大宽度，并将您的内容放在其中。

.parent-container {
   max-width: 900px;
   width: 100%
   margin: auto;
 }

CSS 网格创建一个简单的 CSS 布局的问题，其中行和多个 div 居中

Problems with CSS Grid creating a simple CSS layout with rows and multiple divs centered

html

css

css-grid