grid初尝试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>grid 初尝试</title>
</head>
<body>
    <div class="rongqi">
        <div class="test1"><h2>1</h2></div>
        <div class="test2"><h2>3</h2></div>
        <div class="test3"><h2>5</h2></div>
        <div class="test4"><h2>7</h2></div>
        <div class="test5"><h2>9</h2></div>
        <div class="test6"><h2>11</h2></div>
    </div>
    <style>
        .rongqi {
            width: 1000px;
            height: 500px;
            /* 设置容器 */
            display: grid;
            /* 设置三列，每列200像素 */
            grid-template-columns: repeat(3, 100px);
            /* 设置三行，每行100像素 */
            grid-template-rows: repeat(3,50px);
            /* 设置项目在单元格中居中 */
            place-items: center;
            /* 设置容器内项目间隙20像素 */
            gap: 20px;
        }
        .rongqi > .test1 {
            grid-area: 1 / 1 / span 1 / span 1;
            place-self: end  ;
        }
        .rongqi > .test2 {
            grid-area: 1 / 3/ span 1/ span 1;
            place-self: end ;
        }
        .rongqi > .test3 {
            grid-area: 2 / 2/ span 1/ span 1;
        }
        .rongqi > .test4 {
            grid-area: 3 / 1/ span 1/ span 1;
            place-self: start;
        }
        .rongqi > .test5 {
            grid-area: 3 / 3/ span 1/ span 1 ;
            place-self: end;
        }
        /* 隐式网格 */
        .rongqi > .test6 {
            grid-area: 4 / 2/ span 1/ span 1 ;
        }
    </style>
</body>
</html>
相关文章
