目录
一.概述
网格布局是一种强大的CSS布局技术，用于将网页划分为行和列的网格结构，并通过定义网格单元格来定位和对齐网页中的元素。这种布局方法可以使开发者以直观且灵活的方式进行网页布局，实现自适应和响应式设计。
二. 研究目的
1.了解网格布局的基本原理和概念：
研究目的之一是深入了解网格布局的原理和概念，包括如何将页面划分为网格系统、如何定义网格的大小和间距以及如何在网格中放置内容等。通过研究，我们可以获得对网格布局的全面理解，为进一步的应用和实践打下基础。
2.探索网格布局的优势和适用性：
网格布局在响应式设计和网页布局中具有许多优势，例如可以实现自适应布局、提高页面的可读性和可导航性等。研究目的之一是探索网格布局的适用场景和优势，了解何时使用网格布局可以产生最佳的效果，并与传统布局方法进行比较。
3.评估网格布局对用户体验的影响：
研究目的之一是评估网格布局对用户体验的影响。通过实验和用户调研，我们可以了解网格布局对用户的理解和使用的影响，包括页面的可用性、可访问性和用户满意度等指标。这些评估结果可以帮助我们更好地优化和改进网格布局设计。
4.发展网格布局的最佳实践和指导原则：
通过研究网格布局，我们可以积累经验并形成一套最佳实践和指导原则，以帮助设计师和开发人员更好地应用网格布局。这些最佳实践可以涉及网格系统的设计、内容排版和响应式调整等方面，从而提高网页设计的效果和效率。
总体而言，网格布局研究的目的是深入理解网格布局的原理和概念，探索其优势和适用性，并评估其对用户体验的影响，以发展出最佳实践和指导原则，从而推动网页设计领域的发展和创新。
三.网格布局的基础知识
当涉及网页设计和排版时，网格布局是一种常用的技术，用于将内容和元素组织成可视化网格结构。它通过使用水平和垂直的行和列来划分页面，并将内容放置在这些行和列的交点上。以下是网格布局的基础知识点：
1.网格容器（Grid Container）：
网格布局的父元素称为网格容器。通过设置网格容器的 display 属性为 grid 或 inline-grid，可以将其定义为网格布局。
2.网格项目（Grid Items）：
网格容器中的子元素称为网格项目。网格项目可以是页面上的任何元素，例如 div、span、img 等。每个网格项目都可以放置在网格的一个单元格中。
3.网格线（Grid Lines）：
网格线是网格中的水平或垂直线，用于划分网格的行和列。网格线可以通过索引值或命名来引用。
4.网格单元格（Grid Cells）：
网格单元格是由相邻的四个网格线所围成的矩形区域。一个网格项目可以占据一个或多个网格单元格。
5.网格轨道（Grid Tracks）：
网格轨道是相邻网格线之间的空间，可以是行轨道或列轨道。行轨道是水平方向的空间，列轨道是垂直方向的空间。
6.网格区域（Grid Areas）：
通过网格模板（Grid Template）定义的网格区域是一个或多个网格单元格的集合。每个网格区域可以分配给一个或多个网格项目。
7.网格模板（Grid Template）：
网格模板用于定义网格的行和列的大小和结构。它可以通过使用 repeat()、fr（分数单位）等属性来指定网格的布局。
8.网格对齐（Grid Alignment）：
网格对齐定义了网格项目在网格单元格中的位置。通过使用 justify-content、align-content、justify-items、align-items 等属性，可以控制网格项目在行和列上的对齐方式。
四.网格布局的特性和功能
1.自适应布局：
网格布局使得网页可以自动调整和适应不同屏幕尺寸和设备，从而实现响应式设计。通过定义网格的列数、行高、项目大小等属性，可以以一种灵活的方式布局和排列内容。
2.灵活的定位：
可以精确控制网格项目在网格单元格中的位置。通过指定项目所占据的行数、列数以及项目在网格单元格内的起始和结束位置，可以实现精确的定位。
3.容错能力：
网格布局具有容错性，即使某项目的尺寸不同，也可以在网格中自动调整和对齐。这种灵活性使得网格布局适用于各种内容和元素的组合。些
4.嵌套网格：
网格布局可以嵌套，也就是说，网格项目本身也可以是一个网格容器，从而实现更复杂的布局结构。嵌套网格可以在一个网格区域内创建更细粒度的布局。
5.对齐和间距控制：
通过网格布局，可以很容易地控制网格项目在网格单元格内的对齐方式，并添加间距和空白空间来提升页面布局的美观性和可读性。
6.重叠布局：
利用网格布局的层叠性质，可以将元素重叠在彼此之上，从而实现各种创意的布局效果。
五.网格布局的基础设置
1.声明网格布局的环境
display: grid; （最常用）
display：inline-grid
2.设置列
grid-template-columns
值是 fr ， 1fr 就代表一个比例划分有几列就可以设置几个fr
每一个fr所占据的 宽度比例为1fr，如果需要设置其他比例的宽度
则可以设置整倍fr
grid-template-columns：1fr 2fr 3fr；
设置了当前网格为三列，第一列的宽度为1fr，第二列的宽度是第一列
的2倍，第三列宽度是第一列的3倍
有几个fr值就有几列
还可以直接设置 具体宽度
grid-template-columns：100px 100px 200px;
也可以设置宽度加+auto auto 是除了具体宽度之外的 自适应宽度
（auto实质上是一个宽度值 auto的宽度=总宽度-具体设置的宽度）
也可以 宽度 + fr 组合
3.设置行
grid-template-rows
值是行高，有几个值就设置几个行高
grid-template-rows：100px 200px 300px；
以上案例的含义是，设置了三行，第一行行高是 100px，第二行行高
是200px，第三行行高是300px
如果总行高小于父级wp的宽高，则父级剩余的高度会被剩余的子元素平分
4.行 列 合写
grid-template:行 / 列;
grid-template:100px 100px 100px/1fr 1fr 1fr;
5.设置列间距
column-gap：具体数值
6.设置行间距
row-gap:具体数值
7.合写间距
gap:行（row） 列（column）；
8.指定开始行
grid-row-start:1; 从第一行开始跨行
9.指定结束行
grid-row-end：span 3； 到第三行结束
10.指定开始列
grid-column-start:1; 从第一行开始跨行
11.指定结束列
grid-column-end：span 3； 到第三行结束
相关代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>网格布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.wp{
/* 创建网格布局 */
display: grid;
width: 600px;
height: 400px;
margin: 20px auto;
border: 1px #f00 solid;
/* 设置列 */
/* grid-template-columns:1fr 1fr 1fr; */
grid-template-columns:100px 100px 1fr 4fr;
/* 设置行 */
grid-template-rows:100px 100px auto;
/* 行列合写 */
grid-template: auto auto auto/1fr 1fr 1fr;
/* 列间距 */
column-gap: 20px;
/* 行间距 */
row-gap: 20px;
/* 合写间距 */
gap: 40px 20px;
}
.wp div{
border: 1px #f00 solid;
}
/* .row-s{
grid-row-start: 1;
} */
.row-span{
grid-row-start: 1;
grid-row-end:span 3;
}
.col-span{
grid-column-start: 1;
grid-column-end:span 3;
}
</style>
</head>
<body>
<!--
网格布局，是css3新出的一种布局方式，常见的适用案例为 九宫格布局
声明网格布局的环境
display: grid; （最常用）
display：inline-grid
设置列
grid-template-columns
值是 fr ， 1fr 就代表一个比例划分有几列就可以设置几个fr
每一个fr所占据的 宽度比例为1fr，如果需要设置其他比例的宽度
则可以设置整倍fr
grid-template-columns：1fr 2fr 3fr；
设置了当前网格为三列，第一列的宽度为1fr，第二列的宽度是第一列
的2倍，第三列宽度是第一列的3倍
有几个fr值就有几列
还可以直接设置 具体宽度
grid-template-columns：100px 100px 200px;
也可以设置宽度加+auto auto 是除了具体宽度之外的 自适应宽度
（auto实质上是一个宽度值 auto的宽度=总宽度-具体设置的宽度）
也可以 宽度 + fr 组合
设置行
grid-template-rows
值是行高，有几个值就设置几个行高
grid-template-rows：100px 200px 300px；
以上案例的含义是，设置了三行，第一行行高是 100px，第二行行高
是200px，第三行行高是300px
如果总行高小于父级wp的宽高，则父级剩余的高度会被剩余的子元素平分
行 列 合写
grid-template:行 / 列;
grid-template:100px 100px 100px/1fr 1fr 1fr;
设置列间距
column-gap：具体数值
设置行间距
row-gap:具体数值
合写间距
gap:行（row） 列（column）；
指定开始行
grid-row-start:1; 从第一行开始跨行
指定结束行
grid-row-end：span 3； 到第三行结束
指定开始列
grid-column-start:1; 从第一行开始跨行
指定结束列
grid-column-end：span 3； 到第三行结束
-->
<div class="wp">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div class="row-span">5</div>
<div>6</div>
<div>7</div>
<div class="col-span">8</div>
<div class="col-span">9</div>
</div>
</body>
</html>六.网格布局的局限性
兼容性：
尽管现代浏览器对网格布局有很好的支持，但一些旧版本的浏览器可能不支持网格布局的某些功能。为了确保广泛的兼容性，设计师可能需要提供替代的布局方案或进行降级处理。
学习曲线：
相对于传统的布局技术，如浮动和定位，网格布局可能需要一些时间和学习成本才能掌握。设计师需要熟悉网格属性和规则，并理解它们在不同情况下的工作原理。
复杂性限制：
尽管网格布局可以实现复杂的页面结构，但在某些情况下，特定的布局需求可能难以通过网格布局来实现。在这种情况下，设计师可能需要结合其他布局技术或使用自定义CSS代码来满足特定的需求。
七.网格布局案例
1.效果预览图
网格布局案例
2.相关代码
<!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>
*{
margin: 0;
padding: 0;
}
.wp{
width: 80vw;
height: 80vh;
display: grid;
margin: 20px auto;
grid-template: auto auto auto auto auto/1fr 1fr 1fr 1fr 1fr;
}
.wp div{
text-align: center;
}
img{
width: 80%;
height: 80%;
}
</style>
</head>
<body>
<div class="wp">
<div><img src="../img(4)/img/TB12iJnQV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1EnOXQV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1FmxFQV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1GBxKQV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1JomaQV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1kZRHQV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1OalFQV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1oCR6QV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1UeN.QV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1XhNOQV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1xQKXQV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1XYlAQV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1ylFIQV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1oCR6QV-160-160.png" alt=""></div>
<div><img src="../img(4)/img/TB1oCR6QV-160-160.png" alt=""></div>
</div>
</body>
</html>
4487
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
