首先先上程式碼

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看看效果更直觀