提问者:小点点

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


我想创建一个网格,第一列包含多个文本行,第二列包含相同数量的输入行。为此,我考虑只做一个网格的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:但也不起作用

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


共1个答案

匿名用户

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

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

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

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

我希望能帮到你。