Question

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

中尝试

我想要实现的是拥有多个具有全宽度的行，并且在这些行中具有不同宽度的额外div并且在父（行）中居中，也许还有多个因为我需要让10个在一行中从上到下分开。但是我被困住了，但是没有用。我已经创建了一个我正在寻找的小图像。（链接在底部）

这是我的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 Grid的问题创建一个简单的CSS布局，其中行和多个div居中

1 个答案: