使div高度与CSS网格相等

Question

我用CSS Grid创建了一行，它有4列。每列的高度不相等。我尝试使用grid-auto-rows，但是没有用。我该怎么办？

以下是HTML结构的简短示例： div.team> div.image | div.h1 | div.p | div.social

css：

        #team {
        margin-top: 50px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 10%;
        text-align: center;

        h1 {
            margin-top: 20px;
            font-size: 19px;
        }

        h2 {
            font-size: 15px;
            color: #30bae7;
        }

        p {
            margin-top: 7px;
            font-size: 12px;
        }

        #image {
            background-color: #3c4761;
            border-radius: 50%;
            width: 150px;
            height: 150px;
        }

        #social {
            margin-top: 10px;
            span {
            background-color: rgb(189, 209, 223);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            display: inline-block;
            margin-right: 5px;

            a {
                color: #fff;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                height: 30px;
                width: 30px;  
            }
            }

        }
    }