Grid布局方法案例

m0_74118186

已于 2024-04-17 15:54:26 修改

阅读量310

点赞数 7

分类专栏： HTML5+CSS3 文章标签： css3 html5

于 2024-04-16 19:51:44 首次发布

本文链接：https://blog.csdn.net/m0_74118186/article/details/137836509

版权

HTML5+CSS3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

老师上课案例

一、第一种布局方法

二、第二种方法

1、创建好HTML和CSS

2、接下来写HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 指定文档字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配不同设备的视口设置 -->
    <title>Document</title> <!-- 文档标题 -->
    <link rel="stylesheet" href="./css/grid.css"> <!-- 引入外部样式表 -->
</head>
<body>
    <div class="contauner"> <!-- 容器元素，用于包含所有项目 -->
        <div class="item">1</div> <!-- 项目1 -->
        <div class="item row1">2</div> <!-- 标记为第一行的项目2 -->
        <div class="item row1">3</div> <!-- 标记为第一行的项目3 -->
        <div class="item row1">4</div> <!-- 标记为第一行的项目4 -->
        <div class="item row1">5</div> <!-- 标记为第一行的项目5 -->
        <div class="item row2">6</div> <!-- 标记为第二行的项目6 -->
        <div class="item row2">7</div> <!-- 标记为第二行的项目7 -->
        <div class="item row2">8</div> <!-- 标记为第二行的项目8 -->
        <div class="item">9</div> <!-- 项目9 -->
        <div class="item">10</div> <!-- 项目10 -->
    </div>
</body>
</html>

3、写上相应的CSS代码

/* 定义根元素的自定义属性，用于后续样式中 */
:root{
    --width:100px;
    --height:100px
}

/* 重置所有元素的外边距和内边距，并设置元素边框大小计算方式为包含边框 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 设置HTML元素的字体大小、文本对齐方式和上外边距与左外边距 */
html{
    font-size: 16px;
    text-align: center;
    margin-top: 200px;
    margin-left: 600px;
}

/* 将body元素设置为固定定位 */
body{
    position: fixed;
}

/* 定义一个容器，设置其宽度、高度和居中显示 */
.contauner{
    width: 1226px;
    height: 686px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);/* 使用网格布局，将容器均分为5列 */
    grid-template-rows: repeat(4, 1fr);/* 使用网格布局，将容器均分为4行 */
}

/* 给网格项设置字体大小和边框 */
.item{
    font-size: 3rem;
    border: 3px solid white;
}

/* 第一个网格项跨4行 */
.item:nth-child(1){
    grid-row:1/5;
}

/* 第一行中的网格项跨2行 */
.row1{
    grid-row:1/3;
}

/* 第二行中的网格项跨2行 */
.row2{
    grid-row:3/5;
}

/* 为每个网格项设置不同的背景颜色 */
.item:nth-child(1){
    background-color: red;
}
.item:nth-child(2){
    background-color: rgb(53, 138, 32);
}
.item:nth-child(3){
    background-color: rgb(255, 162, 0);
}
.item:nth-child(4){
    background-color: rgb(149, 0, 255);
}
.item:nth-child(5){
    background-color: rgb(0, 174, 255);
}
.item:nth-child(6){
    background-color: rgba(26, 37, 15, 0.323);
}
.item:nth-child(7){
    background-color: rgb(159, 137, 137);
}
.item:nth-child(8){
    background-color: rgb(0, 38, 255);
}
.item:nth-child(9){
    background-color: rgb(255, 0, 179);
}
.item:nth-child(10){
    background-color: rgb(0, 255, 106);
}

4、最后代码实现效果如下：

这些视频可以让你快速掌握Grid布局

Grid布局教程先1再2
1、【迄今为止最易懂】2分钟掌握 CSS Grid 布局

2、Grid网格布局真香，比flex方便太多了，grid-template-columns用法

其它的案例

第一种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        body {
            background-color: black;
        }

        .gird {
            padding: 30px;

            border: 1px solid white;
            background-color: black;
            
            /* 设置为 grid容器 */
            display: grid;

            /* 设置每个子元素的排列方式 */
            /* 有几个参数就代表一行只能有几个元素 */
            /* 值可以不同，可以理解为 fr为单位，全部加一起然后按所占的百比分算 */
            /* 下面这行代码表示一行只能有两个元素，并且宽度均分 */
            /* grid-template-columns: 1fr 1fr;  */
            /* grid-template-columns: 100px 100px 100px;  */

            /* 这里讲一下 grid-templace-columns 的 repeat() */
            /* repeat(参数1, 参数2) */
            /* 参数1：一行中的格子有几个 */
            /* 参数2：每个格子的宽度是多少 */
            grid-template-columns: repeat(4, 1fr);

            /* 列与列之间的间距 */
            /* column-gap: 24px;  */

            /* 行与行之间的间距 */
            /* row-gap: 24px; */

            /* gap 复合属性 */
            /* 当1值时 行列都设置 */
            gap: 30px;
            /* 当2值时，第一个值代表行，第二个代表列 */
            /* gap: 20px 20px; */

            /* 子项在 块轴方向( 竖轴 也叫 Y轴 )的对齐方式 */
            /* start center end */
            /* 注意：它们排列时，是按照自己所处的行(块)的上中下来进行排列 */
            /* align-items: start; */

            /* 子项在 行轴方向（横轴 也叫 X轴 ）的对齐方式 */
            /* start center end */
            /* space-between */
            /* 排列时，按照 自己所处的行(块)的 左中右 来排列 */
            /* justify-items: space-between; */
            /* 浏览器似乎不支持 */

            /* 所有的子项，相对于它们的父元素 grid容器 的 块轴(Y轴) 去布局 */
            /* start center end */
            /*   上    中   下  */
            /* align-content: center; */

            /* 所有的子项，相对于它们的父元素 grid容器 的 行轴(X) 去布局 */
            /* start center end                 space-between                                  */
            /*  左    中     右  和flex用法一样  设置后子元素均分它们之间的间距  */
            /* justify-content: space-between; */

            width: 600px;
            min-height: 500px;

        }
        .gird div {
            padding: 10px;
            text-align: center;
            border: 1px solid black;
            background-color: skyblue;
        }

        .column1 {
            background-color: red !important;
            
            /* 经典包头不包尾 */
            /* grid-row 可以控制该格子的 行(一行一行 竖着的 Y轴) 占用领域（位置） */
            /* 用法：从第几个格子开始 / 到哪里结束(占用不包括结束位置) */
            grid-row: 1/3;
            
            /* grid-column 可以控制该格子的 列(列与列之间 横着的 X轴) 占用领域（位置） */
            /* 用法和 grid-row 一样 */
            grid-column: 1/3;
        }
    </style>
</head>
<body>
    <div class="gird">
        <div class="column1">column1</div>
        <div class="column2">column2</div>
        <div class="column3">column3</div>
        <div class="column4">column4</div>
        <div class="column5">column5</div>
        <div class="column6">column6</div>
        <div class="column7">column7</div>
        <div class="column8">column8</div>
        <div class="column9">column9</div>
        <div class="column10">column10</div>
        <div class="column11">column11</div>
    </div>
</body>
</html>

代码效果图：

第二种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"> <!-- 指定文档字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配不同设备的视口设置 -->
    <title>Document</title>
    <style>
        .wrapper {
            margin: 0px auto; /* 页面居中设置 */
            display: grid; /* 使用网格布局 */
            grid-template-columns: repeat(5,234px); /* 网格列定义，重复5次，每列宽度234px */
            gap: 14px; /* 网格列之间的间距 */

            max-width: 1226px; /* 最大宽度设置 */
            min-height: 500px; /* 最小高度设置 */
            background-color: red; /* 背景颜色设置 */
        
            justify-content: space-evenly; /* 网格内容在水平方向上均匀分布 */
        }
        .column {
            background-color: blue; /* 列的背景颜色设置 */
            text-align: center; /* 文本居中 */
            position: relative; /* 相对定位 */
            
        }
        .column span {
            background-color: red; /* 文本背景颜色设置 */
            font-size: 32px; /* 文本字体大小 */
            position: absolute; /* 绝对定位 */
            left: 50%; /* 文本水平居中 */
            top: 50%; /* 文本垂直居中 */
            transform: translateY(-50%) translateX(-50%); /* 调整定位偏移，实现完全居中 */
        }

        
        /* 定义每列的网格位置 */
        .column-1-2-1 {
            grid-row: 1/3; /* 行定义，起始行1，结束行3 */
            grid-column: 2/3; /* 列定义，起始列2，结束列3 */
        }
        .column-1-2-2 {
            grid-row: 1/3;
            grid-column: 3/4;
        }
        .column-1-2-3 {
            grid-row: 1/3;
            grid-column: 4/5;
        }
        .column-1-2-4 {
            grid-row: 1/3;
            grid-column: 5/6;
        }
        .column-1-2-5 {
            grid-row: 3/5;
            grid-column: 2/3;
        }
        .column-1-2-6 {
            grid-row: 3/5;
            grid-column: 3/4;
        }
        .column-1-2-7 {
            grid-row: 3/5;
            grid-column: 4/5;
        }

        .column-1-4 {
            grid-row: 1/5; /* 占用4行 */
            grid-column: 1/1; /* 占用1列 */
            background-color: yellow; /* 背景颜色设置为黄色 */
        }

    </style>
</head>
<body>
    <div class="wrapper">
        <!-- 网格布局的列元素 -->
        <div class="column column-1-4"><span>1</span></div>
        
        <div class="column column-1-2-1"><span>2</span></div>
        <div class="column column-1-2-2"><span>3</span></div>
        <div class="column column-1-2-3"><span>4</span></div>
        <div class="column column-1-2-4"><span>5</span></div>
        <div class="column column-1-2-5"><span>6</span></div>
        <div class="column column-1-2-6"><span>7</span></div>
        <div class="column column-1-2-7"><span>8</span></div>

        <div class="column column-1-1-1"><span>9</span></div>
        <div class="column column-1-1-2"><span>10</span></div>
        
    </div>
</body>
</html>