css 初识grid布局

grid是二维布局

元素设置dispaly:grid就是grid布局

<style>
        .grid {
            display: grid;
            grid-template-columns: 100px 100px 100px;//每个子元素宽度100px
            border: 10px solid #999999;
            width: 400px;
        }

        .grid>div {
            background: #00a0a0;
            text-align: center;
            line-height: 40px;
        }
    </style>
<div class="grid">
        <div class="column1">column1</div>
        <div class="column2">column2</div>
        <div class="column3">column3</div>
        <div class="column4">column4</div>
        <div class="column6">column5</div>
        <div class="column6">column6</div>
    </div>

grid-template-columns: 1fr 1fr 1fr 是grid特有的布局单位，均分布局各占三分之一

column-gap: 24px; 列间距

row-gap: 24px; 行间距

gap:20px; 列，行，统一设置