grid，網格，將物件給拆成一個一個格子，與flex都是很好用的排版工具
透過給容器display:grid來使用，除了grid也有inline-grid，兩者分別是塊元素與行內元素的差別

        .grid-box {
            display:grid;
            grid-template-columns:150px;
            background-color: lightskyblue;

        }
        div{
            background-color: violet;
        }

   <div class="grid-box">
        <div>我是1</div>
        <div>我是2</div>
        <div>我是3</div>
        <div>我是4</div>
        <div>我是5</div>
        <div>我是6</div>
        <div>我是7</div>
        <div>我是8</div>
        <div>我是9</div>
    </div>

grid-template-columns，用來設定網格的橫向大小，可以用空格分開來設定多個大小，數量越多就表示橫向網格的數量愈多

         grid-template-columns:150px 170px 200px;

設gap就是讓每個格子之間有距離

有column的地方就會有row，grid-template-rows給網格縱向設定高度，網格會自動依照設定填充，像是columns設定了三個，div有9個，所以這時是columns與rows的網格都有三格，現在只設定一個的話，就只有第一列的高度會變

grid-template-rows:150px;

此時可以用repeat來設定，repeat(次數，大小)，repeat可以設兩個數字前著代表重複次數，後者代表你要的大小，底下表示重複設定兩次rows的大小事150px，所以第三列就不會變

grid-template-rows:repeat(2,150px);

minmax(最小值，最大值)，會隨著視窗大小自動縮放，當縮到最小值或放大到最大值後就不會動了，這裡給第二列設定來看看情況

grid-template-columns:150px minmax(100px,1000px) 200px;

當視窗縮小後