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

Question

我很困惑。我正在阅读 CSS 中的网格。我正在读一本 Microsoft 的书，他们写了以下内容属性:

.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 所说的已过时：

"Abandonded WD. The name has been changed to grid-definition-columns in the newer draft “CSS Grid Layout”, but IE 10 implementation is based on the older name: http://msdn.microsoft.com/en-US/library/ie/hh772246.aspx"

Answer 3

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

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

What is the correct grid-columns declaration?

css

css-grid