Grid布局实例-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Grid布局</title>
    <style>
        .main{
            width: 1200px;
            margin: 30px auto 0;
        }
        .grid-container{
            display: grid;
            grid-template-columns: 385px 180px 180px 180px 180px;  /*设置列宽*/
            grid-template-rows: 180px 180px 180px 180px;  /*设置行高*/
            grid-column-gap: 24px;
            grid-row-gap: 24px;
        }
        .grid-item{
            border: 1px solid #FFDAB9;
            background-color: #FFF8DC;
            border-radius: 5px;
        }
        .grid-item.one{
            grid-row-start: 1;  /*设置开始行线位置*/
            grid-row-end: 3;    /*设置结束行线位置*/
        }
        .grid-item.two{
            grid-column-start: 2; /*设置开始列线位置*/
            grid-column-end: 4;  /*设置结束列线位置*/
        }
        .grid-item.three{
            grid-column-start: 4;
            grid-column-end: 6;
        }
        .grid-item.six{
            grid-column-start: 4;
            grid-column-end: 6;
        }
        .grid-item.eight{
            grid-row-start: 3;
            grid-row-end: 5;
            grid-column-start: 2;
            grid-column-end: 4;
        }
        .grid-item.ten{
            grid-row-start: 3;
            grid-row-end: 5;
            grid-column-start: 5;
            grid-column-end: 6;
        }
    </style>
</head>
<body>
    <div class="main">
        <div class="grid-container">
            <div class="grid-item one">1</div>
            <div class="grid-item two">2</div>
            <div class="grid-item three">3</div>
            <div class="grid-item four">4</div>
            <div class="grid-item five">5</div>
            <div class="grid-item six">6</div>
            <div class="grid-item seven">7</div>
            <div class="grid-item eight">8</div>
            <div class="grid-item nine">9</div>
            <div class="grid-item ten">10</div>
            <div class="grid-item eleven">11</div>
            <div class="grid-item twelve">12</div>
        </div>
    </div>

</body>
</html>