Question

我通过在2个表单字段中输入我的列表项。为了给列表项（10个项）设置样式，我正在使用外部css文件和CSS网格。最终输出时，我的网格应该看起来像金字塔，但是相反，所有内容都在具有10行的一列中输出。我的商品样式如下：

.Task .container ul {
        display: grid;
        grid-template-columns: 25% 25% 25% 25%;
        grid-template-rows: auto auto auto auto auto auto auto auto auto auto auto auto;
        justify-items: center;
        align-items: center;
        padding-left: 0px;
    }

.Task .container ul li:nth-of-type(1) {
        grid-row: 1 / 13;
        grid-column: 1 / 2
    }

.Task .container ul li:nth-of-type(2) {
        grid-row: 1 / 7;
        grid-column:  2 / 3;
    }

.Task .container ul li:nth-of-type(3) {
        grid-row: 7 / 13;
        grid-column:  2 / 3;
    }

.Task .container ul li:nth-of-type(4) {
        grid-row: 1 / 5;
        grid-column:  3 / 4;
    }

.Task .container ul li:nth-of-type(5) {
        grid-row: 5 / 9;
        grid-column:  3 / 4;
    }

.Task .container ul li:nth-of-type(6) {
        grid-row: 9 / 13;
        grid-column:  3 / 4;
    }

.Task .container ul li:nth-of-type(7) {
        grid-row: 1 / 4;
        grid-column: 4 / 5;
    }

.Task .container ul li:nth-of-type(8) {
        grid-row: 4 / 7;
        grid-column: 4 / 5;
    }

.Task .container ul li:nth-of-type(9) {
        grid-row: 7 / 10;
        grid-column: 4 / 5;
    }

.Task .container ul li:nth-of-type(10) {
        grid-row: 10 / 13;
        grid-column: 4 / 5;
    }

当我签入代码检查器时，将应用所有这些类/样式，但不是获取金字塔，而是获取具有按行排列的项目的单列。我的问题是，是否可以设置此类样式（通过表单字段和外部CSS文件接收）以实现网格，否则这没有任何意义吗？你有什么建议吗？

将通过表单字段接收的项目安排到网格中

0 个答案: