CSS：grid-column和grid-row不工作

Question

我想创建一个网格，第一列包含多个文本行，第二列包含相同数量的输入行。为此，我考虑只做一个网格的number of raw=number of line of text，并设置我需要的列数。

.AllScores{
    display: grid;
    grid-template-columns: 450px 200px auto 50px 50px 50px 50px 50px;
    grid-template-rows: 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px 30px;
}

.AllScores_text{
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 2;
    background-color: #289e19 ;
    text-align: right;
}

.AllScores_inputs{
    grid-column: 2;
    grid-row: 1;
    background-color: #199a9e ;
    text-align: left;
}

所以AllScores是我的“网格容器”，AllScores_text只是网格的第一个单元格，AllScores_inputs是第一行的第二个单元格。

我这么做只是为了一开始尝试一些简单的东西，因为我是CSS和HTML的新手，但我的问题是网格-列/行-开始/结束不起作用。我也尝试过只使用grid-column：和grid-row：但也不起作用

我还需要网格的灵活性，以供以后使用：现在，我可以只使用一个表，但以后，我将合并一些单元格，这就是为什么我尝试使用网格。

Answer 1

在第一次，网格列或网格行，它是一个速记。必须写入列/行的开头和列/行的结尾。例如：

.AllScores_text {
grid-column: 1 /2;
grid-row: 1 / 2;
}

所以.allscores_inputs不起作用，因为它缺少列的结尾和行的结尾。

您可以使用navigator internet中的inspect of元素查看结果。

我希望能帮到你。