grid-template-columns中使用repeat属性值来实现重复绘制元素，
repeat中指定auto-fit意为根据父容器的宽度填充元素，
minmax意为通常按照1fr大小绘制元素，但是该元素的最小值为200px。

body {

    margin: 0;

}

.grid {

    display: grid;

    gap: 10px;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    .item {

        border-radius: 10px;

        background: #edf;

        padding: 15px;

        text-align: center;
        img {

            max-width: 100%;

            height: auto;

        }
        p {

            text-align: left;

        }

    }

}