我想创建一个网格,第一列包含多个文本行,第二列包含相同数量的输入行。为此,我考虑只做一个网格的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:但也不起作用
我还需要网格的灵活性,以供以后使用:现在,我可以只使用一个表,但以后,我将合并一些单元格,这就是为什么我尝试使用网格。
在第一次,网格列或网格行,它是一个速记。必须写入列/行的开头和列/行的结尾。例如:
.AllScores_text {
grid-column: 1 /2;
grid-row: 1 / 2;
}
所以.allscores_inputs不起作用,因为它缺少列的结尾和行的结尾。
您可以使用navigator internet中的inspect of元素查看结果。
我希望能帮到你。