html+css第八天

grid布局(网格布局)

它可以将网页分为一个个网格，然后利用这些网格组合出各种各样的布局

1.容器和项目

<div class="con">               //容器

    <div class="item">          //项目

        <div>不是项目</div>

    </div>

    <div class="item"></div>

    <div class="item"></div>

    <div class="item"></div>

</div>

行，列，单元格，网格线

容器的几个重要属性：

1.display

  值:  grid                //块级

       inline-grid         //行内

2.定义行和列

grid-template-columns:用来指定列的宽度

grid-template-rows:用来指定行的高度

值的设置方式：

            1.  grid-template-rows: 200px 200px 200px;

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

            2.  grid-template-rows: 10% 30% 60%;

                grid-template-columns: 10% 30% 60%;

            3.  auto        由浏览器自己决定

                grid-template-rows: 10% auto 60%;

                grid-template-columns: 10% 30% auto;

            4.  repeat()    接收两个参数,第一个重复的次数，第二个重复的值

                grid-template-rows: repeat(3,33%);

                grid-template-columns: repeat(2,100px 80px 20px);

            5.  fr关键字

                width: 500px;

                grid-template-rows: 1fr 50px 4fr;

                grid-template-columns: 1fr 50px 4fr;      相当于(grid-template-columns: 90px 50px 360px;)

                一个fr的宽度:(500-50)/(1+4)

            6.  minmax()    设置范围

                grid-template-rows: 1fr 4fr minmax(100px,1fr);

                接收两个参数：分别是最小值和最大值

grid-column-gap      列与列之间的间距

grid-row-gap         行与行之间的间距

grid-gap:20px 10px;  简写：行  列

<div class="main"></div>

        *a{margin: 0;padding: 0;}
        .main{
            width: 600px;
            height: 600px;
            border: 1px solid red;
            margin: 100px auto;
            display: grid;
            grid-template-rows: 200px 200px 200px;
            grid-template-columns:200px 200px 200px;


            /*不同写法*/
            /* grid-template-rows: 10% auto 60%;
            grid-template-columns: 10% 30% auto;


            grid-template-rows: 2fr 1fr 1fr;
            grid-template-columns: 2fr 1fr 1fr;


            grid-template-rows: repeat(3,100px 80px 20px);
            grid-template-columns: repeat(3,100px 80px 20px);


            grid-template-rows: 1fr 520px minmax(50px,1fr);
            grid-template-columns: 1fr 520px minmax(50px,1fr); */


            grid-row-gap: 20px;
            grid-column-gap: 20px;
        }

设置单元格内容的对齐方式：

justify-items        设置单元格内容水平方向的对齐方式

align-items          设置单元格内容垂直方向的对齐方式

简写:place-items:垂直 水平;

    值:

        start    起始边缘

        end      结束边缘

        center   居中

        stretch  拉伸

整个内容区域在容器中的对齐方式：

justify-content      设置整个内容区域在容器中水平方向的对齐方式

align-content        设置整个内容区域在容器中垂直方向的对齐方式

简写:place-content:垂直 水平;

    值：

        start

        end

        center

        space-around

        space-between

        space-evenly

        stretch  

    <div class="con">
        <div class="item">1</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 class="item">9</div>
    </div>

        *{margin: 0;padding: 0;}
        .con{
            width: 600px;
            height: 600px;
            border: 1px solid black;
            display: grid;
            grid-template-rows: repeat(3,200px);
            grid-template-columns: repeat(3,200px);
            margin: 100px auto;
            justify-items:center;
            align-items: center;
        }
        /* .con{
            width: 600px;
            height: 600px;
            border: 1px solid black;
            display: grid;
            grid-template-rows: repeat(3,100px);
            grid-template-columns: repeat(3,100px);
            margin: 100px auto;
            justify-content:space-around;
            align-content: space-around;
        } */
        .item{
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: pink;
            color: #fff;
        }

 

给网格布局指定区域

grid-template-areas

.con{

    display:grid;

    grid-template-rows:100px 300px 200px;

    grid-template-columns:100px 300px 200px;

    grid-template-areas:'a b c'

                        'd e f'

                        'g h i'

}

多个单元格合并成几个区域

.con{

    grid-template-areas:'a a a'

                        'd d f'

                        'g h i'

}

如果某些区域不需要利用，则可以用(".")表示

.con{

    grid-template-areas:'a . a'

                        'd d f'

                        'g h i'

}

简写指定名字：

grid-area

 

指定项目位置：

通过指定项目的四个边框，分别定位在哪条边框线上。

grid-column-start     左边框所在的垂直网格线（开始位）

grid-column-end       右边框所在的垂直网格线（结束位）

grid-row-start        上边框所在的水平网格线（开始位）

grid-row-end          下边框所在的水平网格线（结束位）

简写：

grid-column:2/3

grid-row:2/3

justify-self          设置单元格内容的水平位置（左中右），只作用于单个项目

align-self            设置单元格内容的垂直位置（上中下），只作用于单个项目

place-self            简写：垂直 水平;

  值：

    start      起始边缘

    end        结束边缘

    center     居中

    stretch    拉伸

    <div class="con">
        <div class="item"></div>
        <div class="item"></div>
    </div>

        .con{
            width: 600px;
            height: 600px;
            border: 1px solid black;
            margin: 100px auto;
            display: grid;
            grid-template-columns: 200px 200px 200px;
            grid-template-rows: 200px 200px 200px;
            grid-template-areas: 'a b c'
                                 'd e f'
                                 'g h i'
        }
        .item:nth-child(1){
            background-color: pink;
            /* grid-row: 3/4;
            grid-column: 2/4; */
            grid-row: e;
            grid-column: e;
        }
        .item:nth-child(2){
            background-color: aqua;
            /* grid-row: 3/4;
            grid-column: 1/2; */
            grid-row: a;
            grid-column: a;
        }