什麼是正確的網格列聲明？

Question

我很困惑。我正在閱讀關於CSS中的網格。我正在讀一本書微軟，他們已經寫了下面的屬性：

.container{ 
    grid-columns: 1; 
} 

但是，在一個視頻，我在YouTube上觀看，他們寫道：

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

哪一個是正確的？

Answer 1

grid-columns是在IE11和Edge中支持的舊版和過時版CSS Grid Spec的一個屬性。 grid-template-columns是你應該使用的，如果你想學習規範的新標準化版本。

我會建議學習新的，因爲它在星期二在Firefox 52中啓動，並且很快就會來到Safari和Chrome（據推測在稍後的日期會有Edge）。

Answer 2

準確，作爲MateBoy說已經過時：

「Abandonded WD的名稱已更改爲在新的草案網格定義 - 列。‘CSS網格式佈局’，但IE 10的實現是基於舊的名稱：http://msdn.microsoft.com/en-US/library/ie/hh772246.aspx「

Answer 3

與其他人一樣，MS規範已過時，但您希望對已聲明網格的元素使用grid-template-columns。這將設置在您的網格中可用於該父元素的列。然後你可以在子元素上使用grid-column-start和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; */ 
}