<div class="wrapper"><div class="item">grid-tamplate-columns：设置容器每列的宽度(项目的宽度)grid-template-rows：设置容器每行的宽度(项目的高度)grid-row-gap：设置每行之间的行间距grid-column-gap：设置每列之间的列间距grid-gap：上面两个设置的简写grid-column-gap：设置每列之间的列间距grid-gap：上面两个设置的简写 grid-column-gap：设置每列之间的列间距</div><div class="item">2</div><div class="item">3</div><div class="item">4</div><div class="item">5</div><div class="item">6</div><div class="item">7</div><div class="item">8</div></div>.wrapper {width: 80%;margin: 0 auto;display: grid;box-shadow: 0 0 20px #689ce4;padding: 20px;/* 每一列的宽 *//* grid-template-columns:  repeat(3, 150px); *//* grid-template-columns: repeat(4,2fr); *//* 如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。 *//* grid-template-columns: 200px 2fr 2fr;*//* 每一行的高 *//* grid-template-rows: repeat(auto-fill, 200px); *//* grid-template-columns: 200px 2fr 2fr; *//* grid-row-gap: 20px;grid-column-gap: 20px; *//* 自适应 */grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));gap: 20px;}.item {text-align: center;display: flex;align-items: center;justify-content: center;background: #689ce4;color: #fff;aspect-ratio: 1 / 1;/* aspect-ratio: 16 / 9; *//* //等同于 1/2 *//* aspect-ratio: 0.5;  */}/* 兼容性，如果浏览器不支持  aspect-ratio，使用@supports，也可以是在浏览器中某些样式不支持时书写*/@supports not(aspect-ratio: 1 / 1){.item{height: 500px;}}/* @supports not(display: grid){.wrapper{display: flex;}} */