Question

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

.container{
    grid-columns: 1;
}

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

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

哪一个是正确的？

Answer 1

this.functionone(){ this.scope.$on('changeTime', (event, args) => { console.log(args.currentTime); }); } this.functiontwo(){ this.scope.$on('changeTime', (event, args) => { console.log(args.currentTime); }); }是IE11和Edge支持的CSS Grid Spec旧版本和过时版本中的属性。如果您想学习规范的新标准版本，则应使用grid-columns。

我建议学习新版本，因为它在周二推出了Firefox 52，很快将会推出Safari和Chrome（大概是在以后的日期）。

Answer 2

正如MateBoy说的那样过时了：

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

Answer 3

就像其他人所说的那样，MS规范已经过时，但你想在你声明网格的元素上使用grid-template-columns。这将设置在该父元素的网格中可用的列。然后，您将在子元素上使用grid-column-start和grid-column-end来声明元素应放置在网格上的位置。简而言之就是grid-column: value / value;

我有一个Pen来展示编写网格列语法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; */
}

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

3 个答案: