grid布局的基础

display:grid;//确定子元素进行网格布局

grid-template-rows://分多少行，每一行的大小

grid-template-columns //分多少列，每一列的大小

总结: 先满足列再满足行。网格的空间一旦确定下来，但是没有足够的div进行空间的填充，那么会先满足列，然后再满足行。

grid第一个布局样式的代码:

    .container{
            width: 1000px;
            border:solid 1px black;
            /* height: 100px; */
            display: grid;
            grid-template-rows:20px 40px 40px;
            grid-template-columns:200px 100px 100px;
    }
    .container div{
        /* height: 100px; */
        background:red;
        /* width:200px; */
        border:solid 1px blue;
    }
    

html的结果代码:

<div class="container">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
</div>

显示效果如下：

自适应宽度列

代码如下:

            grid-template-rows:40px 40px 40px;
            grid-template-columns:auto auto auto;

显示效果：