css grid fr |css如何设置表格里面的线

.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 三列，每列宽度为剩余空间的1/3 */
grid-template-rows: 1fr 2fr; /* 两行，第一行占1/3，第二行占2/3 */
}

在上述代码中，大家把网格容器分成了三列和两行，并且每列的宽度是剩余空间的1/3，第一行的高度占了1/3，第二行的高度占了2/3。

除了上面使用的repeat函数外，大家还可以使用fr来控制每一行或每一列的大小，例如

.grid-container {
display: grid;
grid-template-columns: 3fr 1fr; /* 两列，第一列占3/4，第二列占1/4 */
grid-template-rows: 1fr 1fr; /* 两行，每行都占1/2 */
}

在上述代码中，大家把网格容器分成了两列和两行，并且第一列占了3/4，第二列占了1/4，第一行和第二行都占了1/2。

总的来说，使用fr可以让大家更加方便的控制网格容器的大小和布局，同时也可以让大家轻松实现响应式布局，适应不同的设备和屏幕尺寸。