CSS:Grid网格布局1

<!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="container">
        <!-- div.item${item$}*9 -->
        <div class="item1">item1</div>
        <!-- <div class="item2">item2</div>
        <div class="item3">item3</div>
        <div class="item4">item4</div>
        <div class="item5">item5</div>
        <div class="item6">item6</div>
        <div class="item7">item7</div>
        <div class="item8">item8</div>
        <div class="item9">item9</div> -->
    </div>
    <style>
        /* grid容器 */
        .container{
            width: 24em;
            height: 24em;
            background-color: lightcyan;
            display: grid;
            grid-template-columns: 8em 8em 8em;
            grid-template-rows:  8em 8em 8em;
        }
        /* grid容器的子元素：.item 叫 grid项目 */
        .container > .item1{
            background-color: violet;
             /* 默认位置 */
        /* grid-row:起始行 、结束行 */
            grid-row:1/2;
            grid-column: 1/2;
            /* 默认占用一行，可以省略后面的 */
            grid-row:2;
            grid-column: 2;
            /* 网格区域 */
            grid-row:2/4;
            grid-column: 2/4;
            /* 跨越行列表示 */
            grid-row:1/ span 3;
            grid-column: 2/span 2;
            /* 将上面的创建网格区域的属性进行简化 */
            /* grid-area: 行开始/列开始/行结束/列结束; */
            grid-area: 2/2/3/4;
        }
    </style>
</body>
</html>
更多相关文章

随机推荐
