CSSグリッドレイアウトを使用して行を正しくレイアウトできない

CSSグリッドレイアウトをdescribed hereとして使用しようとしています。CSSグリッドレイアウトを使用して行を正しくレイアウトできない

私の問題は、グリッドレイアウトの2つの行を正常にコーディングした後、3番目の行のレイアウトを正しく取得できないことです。 3行目は何とか2行目をカバーしています。

以下は、私がしようとしていることのアイデアを与えるためのコードの基本的な構造です。私のリポジトリはすべてhereです。

公開されたページを見ると、最初の2つの行が正しくレイアウトされていることは明らかですが、残念ながら3番目の行はグリッドレイアウトに従わず（2番目の行にオーバーレイされます）。

どのように私は適切に3番目の行をレイアウトすることができます知っていますか？私のHTMLの

構造：CSSの

<body> 

    <header class="hero"> 
    </header> 

    <main role="main"> 

    <section class="tech"> 
    </section> 

    <section class="afford"> 
     <h1>This heading should be in the next section</h1> 
    </section> 

    </main> 

    </body>

構造：

body { 
    font-family: 'Lato', sans-serif; 
    width: 100%; 
    margin: 0 auto; 
    display: grid; 
    margin: 0 auto; 
    grid-template-columns: 10% auto auto 10%; 
    grid-template-rows: auto auto auto auto auto; 
    grid-template-areas: "hero   hero   hero   hero" 
         "tech   tech   tech   tech" 
         "afford  afford  afford  afford" 
         ". . . ." 
         ". . . ."; 
    box-sizing: border-box; 
    height: 100vh; 
} 

.hero { 
    grid-area: hero; 
    background-image: url('../images/people-working.jpg'); 
    width: 100%; 
    height: 928px; 
    background-size: cover; 
    background-position: center; 
} 

.tech { 
    grid-area: tech; 
    width: 100%; 
    height: 712px; 
    position: absolute; 
    text-align: center; 
} 

.afford { 
    grid-area: afford; 
    width: 100%; 
    height: 832px; 
    position: absolute; 
    text-align: center; 
}

出典

2016-10-29 orlando21

あなたがポジションを削除する場合：絶対;マークアップが積み重ねられます。私は、この例では、コードの大部分を削除しますが、私はそれはあなたが基本的な構造レベルでのために行くしているものだと思う：

http://codepen.io/stacy/pen/157042a40a8b4c23f1bad5c12719c8f5?editors=1100

body { 
    font-family: 'Lato', sans-serif; 
    height: 100vh; 
    display: grid; 
    // grid-template-columns: 1fr; 
    // grid-template-rows: auto; 
    grid-template-areas: "hero" 
         "tech" 
         "afford"; 
    margin: 0 auto; 
    width: 100%; 
} 

.hero { 
    grid-area: hero; 
} 

.tech { 
    grid-area: tech; 
} 

.afford { 
    grid-area: afford; 
}

あなたは番号のいずれかを宣言する場合は、幅のを必要としません各テンプレート領域が塗りつぶす列の数、またはgrid-template-columnsの幅を宣言した場合。

グリッドをボディに追加すると、グリッドエリア内の要素には適用されません。ある日、うまくいけば、サブグリッド仕様が生まれるのが見えるだろうが、それまではフレックスボックスと同じようにそれを適用しなければならないだろう。私はあなたが4つの列を宣言し、これまでに各グリッド領域を4回スパンしていることに気付きました。

これが役に立ちます。

出典

2016-10-30 00:25:57 Stacy

ありがとうございました。私は 'position：absolute'がこれで果たした役割を理解していなかったので、私はそれを取り除き、現在は機能しています。 – orlando21

CSSグリッドレイアウトを使用して行を正しくレイアウトできない

答えて

関連する問題