什么是正确的网格列声明？

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; */ 
}