CSS 布局

[goldEli]

学习 flex，grid

实现以下代码：

1. 用grid 实现圣杯布局
2. 用flex 实现水平垂直居中

[CONNLY-J]

1、grid实现圣杯布局：

<div class="container">
        <div class="middle">中间</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>

 .container{
            display: grid;
            height: 100px;
        }
        .middle{
            background-color: rgb(178, 236, 178);
            grid-row: 1;
            grid-column: 2/4;
        }
        .left{
            background-color: rgb(248, 144, 144);
            grid-row: 1;
            grid-column: 1/2;
        }
        .right{
            background-color: rgb(151, 151, 252);
            grid-row: 1;
            grid-column: 4/5;
        }

2、flex实现水平垂直居中

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

.container{
            display: flex;
            height: 600px;
            width: 600px;
            border: 1px solid #000;
            justify-content: center;
            align-items: center;
        }
        .content{
            width: 300px;
            height: 300px;
            background-color: #f73f3f;
        }