【Web前端实操15】利用Grid布局完成九宫格

墨倾许

已于 2024-01-25 22:35:21 修改

阅读量646

点赞数 5

分类专栏： Web前端实操文章标签：前端 css javascript html 开发语言

于 2024-01-25 22:33:11 首次发布

本文链接：https://blog.csdn.net/qq_45498824/article/details/135853425

版权

Web前端实操专栏收录该内容

22 篇文章 0 订阅

订阅专栏

本文介绍了如何使用CSSGrid布局创建一个三行三列的九宫格，通过`column-count`,`column-gap`,和`column-rule`属性来设置列数、间距和边框样式。展示了如何通过`grid-template-columns`和`grid-template-rows`控制每个单元格的大小。

摘要由CSDN通过智能技术生成

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>利用Grid布局完成九宫格</title>
</head>
<style>
    .container{
        display: grid;
        /* grid-template-columns 属性定义每一列的列宽， grid-template-rows 属性定义每一行的行高
        定义一个三行三列的网格，列宽和行高都是 100px ，使用了网格布局，就无须单独控制子项的宽高 */
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: 100px 100px 100px;
    }
    .it{
        border: 1px solid gold;
        /* 让文字在div中垂直水平居中 */
        line-height: 100px;
        text-align: center;
    }
    .item1{
        background-color: pink;
    }
    .item2{
        background-color: blueviolet;
    }
    .item3{
        background-color: forestgreen;
    }
    .item4{
        background-color: brown;
    }
    .item5{
        background-color: darkolivegreen;
    }
    .item6{
        background-color: darkorange;
    }
    .item7{
        background-color: fuchsia;
    }
    .item8{
        background-color: violet;
    }
    .item9{
        background-color: navy;
    }
</style>
<body>
    <div class="container">
        <div class="it item1">1</div>        
        <div class="it item2">2</div>
        <div class="it item3">3</div>      
        <div class="it item4">4</div>        
        <div class="it item5">5</div>
        <div class="it item6">6</div>
        <div class="it item7">7</div>
        <div class="it item8">8</div>        
        <div class="it item9">9</div>
    </div>
</body>
</html>

实现效果：

墨倾许

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【Web前端实操15】利用Grid布局完成九宫格

一类定义在容器上面，称为容器属性；另一类定义在项目上面，称为项目属性。属性指定了列与列间的边框样式。属性指定了需要分割的列数。属性指定了列与列间的间隙。属性指定了两列的边框厚度。属性指定了两列的边框颜色。指定一个容器采用网格布局。
复制链接

扫一扫