前端必知：34.网格布局认识与探索

目录

一.概述

二. 研究目的

1.了解网格布局的基本原理和概念：

2.探索网格布局的优势和适用性：

3.评估网格布局对用户体验的影响：

4.发展网格布局的最佳实践和指导原则：

三.网格布局的基础知识 

1.网格容器（Grid Container）：

2.网格项目（Grid Items）：

3.网格线（Grid Lines）：

4.网格单元格（Grid Cells）：

5.网格轨道（Grid Tracks）：

6.网格区域（Grid Areas）：

7.网格模板（Grid Template）：

8.网格对齐（Grid Alignment）：

四.网格布局的特性和功能 

1.自适应布局：

2.灵活的定位：

3.容错能力：

4.嵌套网格：

5.对齐和间距控制：

6.重叠布局：

五.网格布局的基础设置

1.声明网格布局的环境

2.设置列

3.设置行

4.行 列 合写

5.设置列间距

6.设置行间距

7.合写间距

8.指定开始行

9.指定结束行

10.指定开始列

11.指定结束列

相关代码 

 六.网格布局的局限性

兼容性：

学习曲线：

复杂性限制：

七.网格布局案例 

1.效果预览图

2.相关代码

---

一.概述

        网格布局是一种强大的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； 到第三行结束

相关代码 

    
    
    
    


    
    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
    

 六.网格布局的局限性

兼容性：

尽管现代浏览器对网格布局有很好的支持，但一些旧版本的浏览器可能不支持网格布局的某些功能。为了确保广泛的兼容性，设计师可能需要提供替代的布局方案或进行降级处理。

学习曲线：

相对于传统的布局技术，如浮动和定位，网格布局可能需要一些时间和学习成本才能掌握。设计师需要熟悉网格属性和规则，并理解它们在不同情况下的工作原理。

复杂性限制：

尽管网格布局可以实现复杂的页面结构，但在某些情况下，特定的布局需求可能难以通过网格布局来实现。在这种情况下，设计师可能需要结合其他布局技术或使用自定义CSS代码来满足特定的需求。

七.网格布局案例 

1.效果预览图

网格布局案例

2.相关代码