老师上课案例
一、第一种布局方法
![](https://i-blog.csdnimg.cn/blog_migrate/2a770ad505ee76725b5be3ec4e96d6b7.png)
二、第二种方法
![](https://i-blog.csdnimg.cn/blog_migrate/d1034dd5f4c03d406925bf56fe237292.png)
1、创建好HTML和CSS
![](https://i-blog.csdnimg.cn/blog_migrate/1003f74ed340015701c7164d41882d94.png)
![](https://i-blog.csdnimg.cn/blog_migrate/d9d37e17da6b50fca929cd765f961c50.png)
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布局
其它的案例
第一种:
<!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>
代码效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/2ee0976825bb8b3215589345124c8a99.png)
第二种
<!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>
代码效果图:
![](https://i-blog.csdnimg.cn/blog_migrate/a138394d0969790fedf73cdaf03fa2a5.png)