グリッドがCSSグリッドで正しくレイアウトされていない

Question

CSSグリッドシステムを使用してウェブサイトを作成したいが、動作していないようです。ここに私のコードは次のとおりです。

.grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; 
 
    grid-template-rows: 1fr 1fr; 
 
    grid-template-areas: "logo faq" "about-us"; 
 
} 
 

 
.logo { 
 
    background-color: blue; 
 
    grid-area: logo; 
 
} 
 

 
.faq { 
 
    background-color: red; 
 
    grid-area: faq; 
 
} 
 

 
.aboutUs { 
 
    background-color: cyan; 
 
    grid-area: about-us; 
 
}

<div class="grid"> 
 
    <div class="logo"> 
 
    LOGO 
 
    </div> 
 
    <div class="faq"> 
 
    FAq 
 
    </div> 
 
    <div class="aboutUs"> 
 
    About-us 
 
    </div> 
 
</div>

Answer 1

grid-template-areasプロパティを使用して、文字列値は、列の数が同じでなければなりません。

.grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; 
 
    grid-template-rows: 1fr 1fr; 
 
    grid-template-areas: "logo faq" "about-us about-us"; 
 
} 
 

 
.logo { 
 
    background-color: blue; 
 
    grid-area: logo; 
 
} 
 

 
.faq { 
 
    background-color: red; 
 
    grid-area: faq; 
 
} 
 

 
.aboutUs { 
 
    background-color: cyan; 
 
    grid-area: about-us; 
 
}

<div class="grid"> 
 
    <div class="logo"> 
 
    LOGO 
 
    </div> 
 
    <div class="faq"> 
 
    FAq 
 
    </div> 
 
    <div class="aboutUs"> 
 
    About-us 
 
    </div> 
 
</div>

空のセル（spec reference）を表すために、期間、または期間の切れ目のない線を使用することができます。グリッド・スペックから

.grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; 
 
    grid-template-rows: 1fr 1fr; 
 
    grid-template-areas: "logo faq" " ... about-us"; 
 
} 
 

 
.logo { 
 
    background-color: blue; 
 
    grid-area: logo; 
 
} 
 

 
.faq { 
 
    background-color: red; 
 
    grid-area: faq; 
 
} 
 

 
.aboutUs { 
 
    background-color: cyan; 
 
    grid-area: about-us; 
 
}

<div class="grid"> 
 
    <div class="logo"> 
 
    LOGO 
 
    </div> 
 
    <div class="faq"> 
 
    FAq 
 
    </div> 
 
    <div class="aboutUs"> 
 
    About-us 
 
    </div> 
 
</div>

：

7.3. Named Areas: the grid-template-areas property

すべての文字列は同じ数の列を持っている必要があります、または他の宣言は無効です。

名前付きグリッド領域が複数のグリッドセルにまたがっているが、それらのセルが1つの塗りつぶし矩形を形成しない場合、その宣言は無効です。

このモジュールの将来のバージョンでは、非長方形または切断された領域が許可されている可能性があります。

注：列の等しい数に加えて、仕様に記載されているように、格子領域も矩形でなければならない（see this post for more details）。

Answer 2

この場合：

は望ましい結果です、そして、あなたがマイナーエラーのみを作りました。

現在の正方形の2×2のようにグリッドを設定しました：

grid-template-columns: 1fr 1fr; 
    grid-template-rows: 1fr 1fr; 

しかし、あなたはすべてのスペースを埋めるされていません。

grid-template-areas: "logo faq", "about-us"; 

コード行が言っている「それぞれのロゴとFAQを入れて上の2つの正方形で。下の2行では、約-たち置く」と、それはエラーが発生します。 grid-areaがスペース全体を埋めるようにするには、を2回と宣言する必要があります。したがって、上記の行は次のようになる。

grid-template-areas: "logo faq", "about-us about-us"; 

.grid { 
 
    display: grid; 
 
    grid-template-columns: 1fr 1fr; 
 
    grid-template-rows: 1fr 1fr; 
 
    grid-template-areas: "logo faq", "about-us"; 
 
} 
 

 
.logo { 
 
    background-color: blue; 
 
    grid-area: logo; 
 
} 
 

 
.faq { 
 
    background-color: red; 
 
    grid-area: faq; 
 
} 
 

 
.aboutUs { 
 
    background-color: cyan; 
 
    grid-area: about-us; 
 
}

<div class="grid"> 
 
    <div class="logo"> 
 
    LOGO 
 
    </div> 
 
    <div class="faq"> 
 
    FAq 
 
    </div> 
 
    <div class="aboutUs"> 
 
    About-us 
 
    </div> 
 
</div>