”CSS 网格“二维布局系统（补充）——WEB开发系列32

已于 2024-09-07 16:16:45 修改
阅读量1k 收藏 16
点赞数 40
分类专栏： WEB前端 文章标签： 前端 css 网格布局 css3 HTML web前端
于 2024-09-07 15:10:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LEECOO666/article/details/141996351
版权

CSS 网格布局是一种二维布局系统，用于网页设计。通过使用网格，你可以将内容以行和列的形式进行排列。此外，网格布局还能够简便地实现一些复杂的布局结构。

一、什么是网格布局？

CSS网格布局是一种二维布局系统，它允许我们创建复杂的网页布局，既可以处理行也可以处理列。与传统的布局方法不同，网格布局将网页分成多个可控的区域，这些区域可以任意排列、对齐和调整大小。网格布局使得创建灵活且响应式的设计变得更加简单和高效。

一个网格通常具有许多的列（column）与行（row），以及行与行、列与列之间的间隙，这个间隙一般被称为沟槽（gutter）。

网格布局的基本概念

  1. 网格容器（Grid Container）： 网格布局的容器，它将子元素定义为网格项目，并控制它们的排列方式。
  2. 网格项（Grid Item）： 网格容器内的子元素，这些元素会按照网格规则进行排列。
  3. 网格线（Grid Line）： 网格容器中的虚拟线，用于定义行和列的位置。
  4. 网格单元（Grid Cell）： 行和列交汇处的单元格。
  5. 网格区域（Grid Area）： 由多个网格单元组成的区域，可以跨越多个行和列。

二、在 CSS 中创建自己的网格

1、定义一个网格

要创建一个网格布局，我们首先需要将一个元素定义为网格容器。我们可以使用 ​​display: grid​​ 属性来实现这一点。然后，我们可以定义网格的行和列，来确定网格项的排列方式。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Grid Layout</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 100px);
            gap: 10px;
            background-color: lightgray;
        }
        .grid-item {
            background-color: lightblue;
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>

我们创建了一个网格容器 ​​grid-container​​，它包含 3 列和 2 行。使用 ​​repeat(3, 1fr)​​ 语法，我们定义了 3 列，每列宽度为 ​​1fr​​（即容器宽度的均分）。​​gap​​​ 属性用于设置网格项之间的间隙。

2、使用 ​​fr​​ 单位的灵活网格

​​fr​​ 单位代表“可用空间的份额”，它用于创建响应式网格布局。当我们使用 ​​fr​​ 单位时，网格项会根据容器的可用空间进行自适应调整。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexible Grid Layout</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 2fr 1fr;
            grid-template-rows: 100px 200px;
            gap: 15px;
            background-color: lightgray;
        }
        .grid-item {
            background-color: lightcoral;
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
    </div>
</body>
</html>

在这个示例中，我们定义了 2 列网格，其中第一列的宽度是第二列的 2 倍。使用 ​​2fr​​ 和 ​​1fr​​​ 单位，可以创建灵活的列宽度，使得容器内的网格项能够自适应调整。

3、网格间隙

网格间隙（​​gap​​）用于设置网格项之间的距离。可以使用单个值设置行和列的间隙，或者使用两个值分别设置行间隙和列间隙。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Gaps</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(3, 100px);
            gap: 20px 10px; /* 行间隙20px，列间隙10px */
            background-color: lightgray;
        }
        .grid-item {
            background-color: lightgreen;
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">A</div>
        <div class="grid-item">B</div>
        <div class="grid-item">C</div>
        <div class="grid-item">D</div>
        <div class="grid-item">E</div>
        <div class="grid-item">F</div>
        <div class="grid-item">G</div>
        <div class="grid-item">H</div>
        <div class="grid-item">I</div>
    </div>
</body>
</html>

上述示例中，使用 ​​gap​​ 属性设置了行间隙为 20px，列间隙为 10px。这样可以在网格项之间添加不同的间隙，从而实现更灵活的布局效果。

三、网格布局的高级特性

1、显式网格与隐式网格

  • 显式网格（Explicit Grid）： 由 ​​grid-template-rows​​ 和 ​​grid-template-columns​​ 明确指定的网格。
  • 隐式网格（Implicit Grid）： 当网格项超出显式定义的网格范围时，浏览器自动创建的额外行和列。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Explicit vs Implicit Grid</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 100px);
            gap: 10px;
            background-color: lightgray;
        }
        .grid-item {
            background-color: lightpink;
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
        .item4 { grid-row: 3; }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item item4">4</div>
    </div>
</body>
</html>

示例中网格容器定义了 3 列和 2 行。但是，第四个网格项（​​item4​​​）被放置在第三行的位置，因此浏览器会自动创建一个新的隐式行来容纳它。

2、​​minmax()​​ 函数

​​minmax()​​ 函数用于设置网格行或列的最小和最大大小。它帮助我们创建自适应的布局，确保网格项不会过小或过大。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>minmax() Function</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, minmax(100px, 1fr));
            grid-template-rows: repeat(2, minmax(50px, auto));
            gap: 15px;
            background-color: lightgray;
        }
        .grid-item {
            background-color: lightblue;
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">Item 1</div>
        <div class="grid-item">Item 2</div>
        <div class="grid-item">Item 3</div>
        <div class="grid-item">Item 4</div>
    </div>
</body>
</html>

我们使用 ​​minmax()​​ 函数来设置列和行的大小。每列的宽度最小为 100px，最大为 ​​1fr​​。每行的高度最小为 50px，最大为 ​​auto​​​（即自动调整）。

3、自动使用多列填充

CSS Grid 允许使用 ​​grid-auto-flow​​ 属性来自动填充网格项。这可以用来控制项的排列方式，例如从左到右填充或从上到下填充。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto Flow</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-auto-flow: row dense;
            gap: 10px;
            background-color: lightgray;
        }
        .grid-item {
            background-color: lightcoral;
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
        .item1 { grid-column: span 2; }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>

示例中​​grid-auto-flow: row dense​​ 属性用于让浏览器按照行的顺序密集填充网格项。​​dense​​​ 模式会尽可能填满所有空白区域，优化网格项的布局。

四、网格项的高级排列

1、基于线的元素放置

CSS Grid 允许我们基于网格线来放置网格项。可以使用 ​​grid-column​​ 和 ​​grid-row​​ 属性来指定网格项在网格中的位置。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Line-based Placement</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: 100px 200px;
            gap: 10px;
            background-color: lightgray;
        }
        .grid-item {
            background-color: lightgreen;
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
        .item1 { grid-column: 1 / 3; }
        .item2 { grid-row: 2 / 3; grid-column: 2 / 4; }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item item1">Item 1</div>
        <div class="grid-item item2">Item 2</div>
    </div>
</body>
</html>

​​item1​​ 从第一列开始，跨越到第三列；​​item2​​​ 放置在第二行，从第二列开始，跨越到第三列。这种基于线的放置方式使得我们可以精确地控制网格项的位置和大小。

2、使用 ​​grid-template-areas​​ 属性放置元素

​​grid-template-areas​​ 属性允许我们使用命名区域的方式来定义网格项的位置。这种方法直观且易于理解。

​​grid-template-areas​​属性的使用规则：

  • 你需要填满网格的每个格子
  • 对于某个横跨多个格子的元素，重复写上那个元素​​grid-area​​属性定义的区域名字
  • 所有名字只能出现在一个连续的区域，不能在不同的位置出现
  • 一个连续的区域必须是一个矩形
  • 使用​​.​​​符号，让一个格子留空

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid Template Areas</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 2fr 1fr;
            grid-template-rows: 100px 200px;
            grid-template-areas:
                "header header header"
                "sidebar main main"
                "footer footer footer";
            gap: 10px;
            background-color: lightgray;
        }
        .header {
            grid-area: header;
            background-color: lightcoral;
            padding: 10px;
            text-align: center;
        }
        .sidebar {
            grid-area: sidebar;
            background-color: lightgreen;
            padding: 10px;
            text-align: center;
        }
        .main {
            grid-area: main;
            background-color: lightblue;
            padding: 10px;
            text-align: center;
        }
        .footer {
            grid-area: footer;
            background-color: lightpink;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="header">Header</div>
        <div class="sidebar">Sidebar</div>
        <div class="main">Main Content</div>
        <div class="footer">Footer</div>
    </div>
</body>
</html>

示例中我们使用 ​​grid-template-areas​​ 属性定义了四个区域：​​header​​、​​sidebar​​、​​main​​ 和 ​​footer​​。每个网格项都通过 ​​grid-area​​​ 属性指定到这些区域中。这种方法使得布局的定义更加直观和易于维护。

五、练习

题 1

题目： 创建一个网格布局，其中包含一个导航栏、一个主内容区域和一个侧边栏。导航栏应该占据整个第一行，侧边栏应该在第二行的第一列，主内容区域应该在第二行的第二列和第三列。使用 ​​grid-template-areas​​ 属性定义网格区域，并确保布局在不同屏幕尺寸下都能正常显示。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Grid Layout</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: 1fr 3fr;
            grid-template-rows: auto 1fr;
            grid-template-areas:
                "header header"
                "sidebar main";
            gap: 10px;
            background-color: lightgray;
        }
        .header {
            grid-area: header;
            background-color: lightcoral;
            padding: 10px;
            text-align: center;
        }
        .sidebar {
            grid-area: sidebar;
            background-color: lightgreen;
            padding: 10px;
        }
        .main {
            grid-area: main;
            background-color: lightblue;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="header">Header</div>
        <div class="sidebar">Sidebar</div>
        <div class="main">Main Content</div>
    </div>
</body>
</html>

题 2

题目： 创建一个响应式网格布局，包含 6 个网格项。使用 ​​grid-template-columns​​ 和 ​​grid-template-rows​​ 属性定义网格，确保网格项在大屏幕和小屏幕下都有良好的显示效果。使用 ​​minmax()​​ 函数设置行和列的最小和最大值。

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Grid with minmax()</title>
    <style>
        .grid-container {
            display: grid;
            grid-template-columns: repeat(3, minmax(100px, 1fr));
            grid-template-rows: repeat(2, minmax(100px, auto));
            gap: 10px;
            background-color: lightgray;
        }
        .grid-item {
            background-color: lightcoral;
            border: 1px solid #ddd;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="grid-container">
        <div class="grid-item">1</div>
        <div class="grid-item">2</div>
        <div class="grid-item">3</div>
        <div class="grid-item">4</div>
        <div class="grid-item">5</div>
        <div class="grid-item">6</div>
    </div>
</body>
</html>

如有表述错误及欠缺之处敬请指正补充。

一条晒干的咸魚
关注
  • 40
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS——Web静态页面开发
08-15
Flexbox适合处理一维布局，如导航栏或按钮组，而Grid则擅长处理二维布局，如复杂的网页布局。 响应式设计是现代网页开发的必备技能，它使网页能适应不同设备的屏幕尺寸。通过使用媒体查询（`@media`），我们可以...
CSS——web静态页面设计
08-13
5. 网格布局（Grid Layout）：提供二维网格系统，适用于复杂布局。 五、CSS层叠与继承 层叠是CSS的核心特性，当多个规则应用于同一个元素时，根据选择器的优先级决定哪个生效。继承则是子元素自动继承父元素的部分...
深入CSS 布局——WEB开发系列29
一条晒干的咸鱼的博客
09-04 1655
CSS 页面布局技术允许我们拾取网页中的元素，并且控制它们相对正常布局流、周边元素、父容器或者主视口/窗口的位置。
网站开发进阶（六十二）最强大的 CSS 布局——Grid 布局
热门推荐
IT全栈 华强工作室
03-15 9万+
Grid 布局相关的属性以及值众多，需要记忆的不少，建议可以跟 demo 一起结合起来，边敲代码边理解，再利用一些空闲时间记忆一下。笔者会在介绍每个属性的时候，做个小 demo 演示，建议大家可以自己修改看看效果加深记忆。Grid 布局属性可以分为两大类，一类是容器属性，一类是项目属性。我们先来看容器属性。可以指定网格项目所在的四个边框，分别定位在哪根网格线，从而指定项目的位置。属性：左边框所在的垂直网格线；属性：右边框所在的垂直网格线；属性：上边框所在的水平网格线；属性：下边框所在的水平网格线；
CSS-Grid网格布局笔记
学习，思考，输出
07-11 2224
显示网格：是指item在定义单元格范围内，比如一行三列的布局，若item在这布局中就是显示单元格，不在则为隐式单元格。前提是容器的子元素超过了网络布局定义范围，比如一行三列的布局，正常是三个元素，但隐式单元格就是超过了三个元素。单元格列数跟随容器宽度自适应，宽度最小不会小于100px，行数是一个隐式单元格属性，会自动适应容器大小。上面没有给网格布局设置宽度与高度，以及网格的列数、行数，都是跟随元素和分辨率自动调节网格的列数、行数。默认子元素都是独占一个单元格的，如果要进行合并单元格，除了前面提到的用。
CSS 布局 (二) 常规流、弹性盒子、网格
chinusyan的专栏
09-13 350
CSS 布局 (二) 常规流、弹性盒子、网格
CSS布局系列四：网格布局
betty_grant的博客
06-02 1430
概念 弹性盒子由容器和子元素组成。 容器(Flex container)：通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。 子元素(flex item)：容器中的每个单元称为子元素 容器中存在两条多轴：主轴（默认水平方向）和侧轴（默认垂直方向） ———————————————— 版权声明：本文为CSDN博主「betty_grant」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csd
Web前端开发之CSS学习笔记10—栅格布局（网格布局）
qq_45709187的博客
05-30 5050
目录【网格布局grid】1.网格布局的构成 2.父容器grid container3.生成网格容器 display:grid/inline-grid4.构建网格 grid-template-columns/grid-template-rows（1）grid-template-columns（2）grid-template-rows5.定位空间 grid-template-areas和grid-area4.设置间隙grid-gap5.网格对齐方式（1）justify-content ：区域内容的水平对齐（2）
CSS基础——布局
weixin_43207208的博客
06-05 3715
五种不同的布局方式的基本介绍
Web技术基础——CSS篇
m0_53302175的博客
06-04 979
文章目录引言一、写在前面 引言 博主通过自己制作的一个网页来总结分析整个CSS的框架、结构以及其基本元素和能够实现的基本功能。 一、写在前面 “工欲善其事必先利其器”，CSS可谓是网页的衣服、饰品，要想逻辑清楚、条理清晰的构建CSS，需要在VS Code上安装Live Sass Compiler。之后我们可以直接在工作区创建一个后缀为.scss的文件，点击底部的Watch Sass，插件会生成并随时更新你的.css文件 ...............
Web开发常用布局方式总结
青春木鱼的博客
11-08 6154
无论是前端还是客户端开发都离不开页面的展示，而页面是由布局和各种组件构成的。布局好比是建筑里的框架，而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列，就组成了用户所看见的界面。研究布局的目的是让我们的页面尽可能的还原UI设计给我们的设计图，适配各种尺寸的屏幕，使其在各种尺寸屏幕上能很好地显示出我们的视图。
《CSS网站布局实战》——实例源码包
10-30
CSS Grid提供了强大的二维定位系统，使得创建复杂的网格布局变得简单。 4. **Flexbox布局**：Flexbox（弹性盒模型）是用于处理单一轴线上的元素布局，如行或列。它能方便地实现元素的对齐、顺序调整和自适应填充...
Web-前端html+css从入门到精通 170. 布局扩展之等高布局.zip
05-23
2. **Grid布局**：CSS Grid布局是另一种现代的二维布局系统，适合创建复杂的网格布局。通过设置`display: grid;`和`grid-template-rows: auto;`，可以确保每一行的高度一致，从而实现等高效果。 3. **Table布局模拟...
Web-前端html+css从入门到精通 200. 移动端流式布局整页制作（2）.zip
05-23
Flexbox适用于一维布局，如行或列，而Grid布局则适合二维布局，能够更方便地处理复杂的网页结构。这两种技术都支持自动对齐、填充和分布，使得创建响应式布局变得更加简单。 在整页制作的过程中，你将学习如何将...
vue3+vite 通过js引入的src，在打包后为什么不能显示
肖肖肖丽珠的博客
09-02 318
页面有个图片我是动态设置的。但是打包之后一直没有找到。我本来使用的绝对定位发现不行，改成了相对的也不行，最后改成下面的这种就可以啦。
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 499
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
网页开发 HTML
ultramand的博客
09-06 957
这个例子中，我使用了多个HTML标签来构建一个包含图像、图表、视频和其他元素的综合页面。// JavaScript代码。
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 442
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值