CSSグリッドの問題行と複数のdivを中心としたシンプルなCSSレイアウトを作成する

Question

私はCSSグリッドの初心者で、私の個人的なブログのためのシンプルなCSSレイアウトを作成したいと思っていました。私は何を私が達成したいことは全幅を持つ複数の行を持っているし、それらの行の中に異なる幅の追加divを持っているし、親の中央にあるcodepen.io

codepen.io

以内にそれをしようとしています（行）、多分私が持っている必要がある1つ以上の原因は、1つの行の上から下に10 divsを言うことができます。しかし、私は立ち往生し、それは動作していません。私は私が探しているものの小さなイメージを作成しました。 （下部にリンク）

これは私の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; 
}