Grid實現table表格布局

HTML

　　　　　　<div class="table">
            <div class="th">
                <div>日期</div>
                <div>時間</div>
                <div>主題</div>
            </div>
            <div class="td-date">
                2019-07-02(周二)
            </div>
            <div class="td">
                <div class="td-content">
                    <div class="item">23:23-12:12</div>
                    <div class="item">小明在回家的路上</div>
                </div>
                <div class="td-content">
                    <div class="item">23:23-12:12</div>
                    <div class="item">小明在上班的路上，發生了什么. 小明在上班的路上，發生了什么.小明在上班的路上，發生了什么.小明在上班的路上，發生了什么.小明在上班的路上，發生了什么.小明在上班的路上，發生了什么.小明在上班的路上，發生了什么.小明在上班的路上，發生了什么.</div>
                </div>
                <div class="td-content">
                    <div class="item">23:23-12:12</div>
                    <div class="item">小明在回家的路上</div>
                </div>
                <div class="td-content">
                    <div class="item">23:23-12:12</div>
                    <div class="item">小明在回家的路上</div>
                </div>
            </div>
        </div>

CSS　　

　　　　.table{
                display: grid;
                grid-template: '表頭 表頭 表頭'60px '日期 內容 內容'auto / 1fr 1fr 1fr;
            }
            .th{
                grid-area: 表頭;
                display: grid;
                grid-template: '表頭日期 表頭時間 表頭主題'60px / 1fr 1fr 1fr;
                background-color: aqua;
                text-align: center;
                line-height: 60px;
            }
            .th div:nth-child(2){
                border-left: none;
                border-right: none;
            }
            .th div{
                border: 1px solid #aaa;
            }
            .td-date {
                grid-area: 日期;
                display: grid;
                align-items: center;
                justify-content: center;
                border: 1px solid #aaa;
                border-top: none;
            }
            .td {
                grid-area: 內容;
            }
            .td-content{
                display: grid;
                grid-template: '時間 具體內容'minmax(60px, auto) /1fr 1fr;
                text-align: center;
            }
            .item{
                display: grid;
                justify-content: center;
                align-items: center;
                border: 1px solid #aaa;
                border-left: none;
                border-top: none;
            }