更少的网格模板列

Question

我正在尝试在CSS中进行网格布局，但使用.less

我有这个

.item-view-component{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: [grid-col-first] 20% [grid-col-2] 20% [grid-col-3] 20% [grid-col-4] 20% [grid-col-last] 20%;
    grid-template-rows: [grid-row-first] 20% [grid-row-2] 20% [grid-row-3] 20% [grid-row-4] 20% [grid-row-last] 20%;
}

遗憾的是，我找不到正确命名列和行的方法。

它返回编译错误。

Answer 1

您可以使用变量和e（）函数（它不会更改内容，只删除引号）：

@gridcolumns: "[grid-col-first] 20% [grid-col-2] 20% [grid-col-3] 20% [grid-col-4] 20% [grid-col-last] 20%";
@gridrows: "[grid-row-first] 20% [grid-row-2] 20% [grid-row-3] 20% [grid-row-4] 20% [grid-row-last] 20%";
.item-view-component{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: e(@gridcolumns);
    grid-template-rows: e(@gridrows);
}