关于 CSS 中 Grid响应式布局

首先先上代码

CSS.container {
　　　　display: grid;
　　　　grid-gap: 15px;
　　　　grid-template-columns:  repeat(auto-fit, minmax(100px, 1fr));  
　　　　grid-template-rows: repeat(2, 100px);
}

.container>div{
       border:1px solid;
       display: flex;
       align-items: center;
       justify-content: center;
}

HTML<div class="container">
　　　　<div>1</div>
　　　　<div>2</div>
　　　　<div>3</div>
　　　　<div>4</div>
　　　　<div>5</div>
　　　　<div>6</div>
</div>

/* grid-template-columns：代表每一列的宽度，Grid 栅格布局带来了一个全新的值: fraction单位，fraction单位通常简写为fr，它允许你根据需要将容器拆分为多个块。 */

/* repeat()函数，这是一个强大的指定列和行的方法，第一个参数指定行与列的数量，第二个参数指定它们的宽度。 */

可以直接copy看看效果更直观