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

确切地说，正如 MateBoy 所说，它已经过时了：

“废弃的WD。在较新的草案“CSS Grid Layout”中名称已更改为grid-definition-columns，但IE 10实现基于旧名称：http: //msdn.microsoft.com/en-US/库/ie/hh772246.aspx "

Answer 3

就像其他人所说的那样，MS 规范已经过时了，但您可能希望在grid-template-columns您已声明网格的元素上使用。这将设置在该父元素的网格中可用的列。然后，您将在子元素上使用grid-column-startandgrid-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; */
}