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

【问题标题】：What is the correct grid-columns declaration?什么是正确的网格列声明？
【发布时间】：2017-03-09 07:23:59
【问题描述】：

我很困惑。我正在阅读有关 CSS 中的网格的信息。我正在读一本微软的书，他们写了以下属性：

.container{
    grid-columns: 1;
}

但在我在 YouTube 上观看的一段视频中，他们写道：

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

哪个是正确的？

【问题讨论】：

标签： css css-grid

【解决方案1】：

grid-columns 是 IE11 和 Edge 支持的旧版 CSS 网格规范中的属性。 grid-template-columns 是您想要学习规范的新标准版本时应该使用的。

我建议学习新版本，因为它于周二在 Firefox 52 中推出，并且很快就会出现在 Safari 和 Chrome 上（大概是 Edge 之后）。

【讨论】：

谢谢。我正在准备 microsoft html5 css3 考试。在我看来这本书已经过时了..

【解决方案2】：

正是，正如 MateBoy 所说，它已经过时了：

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

【讨论】：

【解决方案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; */
}

【讨论】：