使用CSS Grid创建简单的CSS布局的问题集中了行和多个div
问题描述:
我是一位CSS Grid初学者,希望为我的个人博客创建一个简单的CSS布局。我想它内codepen.io使用CSS Grid创建简单的CSS布局的问题集中了行和多个div
什么,我想实现是有其有充分的宽度多行和这些行内有不同宽度的额外的div和父中心(行),也许还有不止一个原因,我需要让我们说一行中从上到下的10个div。但我卡住了,它不工作。我创建了我正在寻找的一个小图像。 (底部链接)
这是我的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 {
}
答
我想这就是你想实现:https://codepen.io/binarytrance/pen/pWJPdN
You ne以更好地理解如何构建DOM。 阅读响应式设计。出于某种原因,您希望将宽度设置为父容器。你应该做的是有一个相等的最大宽度为你的父容器,并有你的内容。
.parent-container {
max-width: 900px;
width: 100%
margin: auto;
}