Grid 实现网格

/*设置整体表格样式*/
        .grid-resdownload-table{
            display: grid;
            grid-template: 'table table table table'30px 'content content content content'auto / 10% 40% 40% 10%;
        }
        /*设置表格头部样式*/
        .grid-resdownload-th{
            grid-area: table;
            display: grid;
            grid-template: '表头序号 表头资源标题 表头文件名称 表头操作'30px / 10% 40% 40% 10%;
            background-color: aqua;
            text-align: center;
            line-height: 30px;
        }
        /*设置表格画线*/
        /*.grid-resdownload-th div{*/
        /*    border: 1px solid #aaa;*/
        /*}*/
        /*td 获取td内容*/
        .grid-resdownload-td {
            grid-area: content;
        }

        .grid-resdownload-td-content{
            display: grid;
            grid-template: '序号 资源标题 文件名称 操作'minmax(23px, auto) /10% 40% 40% 10%;
            text-align: center;
        }
        /*表格数据填充*/
        .item{
            display: grid;
            justify-content: center;
            align-items: center;
            border: 1px solid #aaa;
        }

CSS 样式

 <!--下载内容 -->
            <div class="grid-resdownload-table"  id="reslist">
                <div class="grid-resdownload-th">
                    <div>序号</div>
                    <div>资源标题</div>
                    <div>文件名称</div>
                    <div>下载</div>
                </div>
                <div class="grid-resdownload-td">
                    <div class="grid-resdownload-td-content">
                        <div class="item" id="">1</div>
                        <div class="item" id="title">资源XXX标题</div>
                        <div class="item" id="filename">文件XXXX名称</div>
                        <div class="item" id="download">下载</div>
                    </div>
                </div>

            </div>