使用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 { 

}

这是图像： Sample Layout for visualization

来源

2017-09-15 Y. Bog

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

You ne以更好地理解如何构建DOM。阅读响应式设计。出于某种原因，您希望将宽度设置为父容器。你应该做的是有一个相等的最大宽度为你的父容器，并有你的内容。

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

来源

2017-09-15 07:29:08 snow

使用CSS Grid创建简单的CSS布局的问题集中了行和多个div

回答

相关问题