css - 正しいグリッド列の宣言は何ですか?

Question

私は混乱しています。CSS のグリッドについて読んでいます。私はマイクロソフトの本を読んでいますが、彼らは次のプロパティを書いています:

.container{
    grid-columns: 1;
}

しかし、私が YouTube で見たビデオの中で、彼らは次のように書いていました。

.container{
    grid-template-columns: 1;
}

どちらが正しいですか？

Answer 1

grid-columnsは、IE11 および Edge でサポートされている古いバージョンの CSS グリッド仕様のプロパティです。grid-template-columns仕様の新しく標準化されたバージョンを学習したい場合は、これを使用する必要があります。

火曜日に Firefox 52 でリリースされ、まもなく Safari と Chrome に導入される予定なので、新しい機能を学習することをお勧めします (Edge はおそらく後日)。

Answer 2

他の人が言ったように、MS 仕様は古くなっていgrid-template-columnsますが、グリッドを宣言した要素で を使用する必要があります。これにより、その親要素のグリッドで使用できる列が設定されます。次に、子要素grid-column-startで andを使用grid-column-endして、その要素をグリッド上に配置する場所を宣言します。その略記はgrid-column: value / value;

グリッド列構文を記述するいくつかの方法を示すペンがありますhttp://codepen.io/stacy/pen/zodXYp

ただし、いくつかのオプションがあります。

.foo {
    display: grid;
    // The repeat keyword will iterate how many you declare in the first number, and the second number is the size. The fr is a new unit for grid
    grid-template-columns: repeat(4, 1fr);
}

.yay {
    /* Grid Column Available Syntax/Shorthand 
       --------------------------------------*/
    /* 
    grid-column-start: 2;
    grid-column-end: 4;
    grid-column: 1 / 4; 
    grid-column: 2 / span 3; 
    */
    /* -1 below means to span remaining columns in that row */
    grid-column: 2 / -1; 

    /* Grid Row Available Syntax/Shorthand 
   -----------------------------------*/
    /* 
    grid-row-start: 1;
    grid-row-end: 3;
    grid-row: 1 / 3;
    grid-row: 1 / span 2; 
    grid-row: 2 / 4;
    grid-row: 2 / -1; 
    */ 


    /* Grid Area shorthand
    grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
    Can also used named lines if decalred in grid-template-*
    /* grid-area: 2 / 1 / 4 / 3; */
}