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

2024-09-07 18:04
文章标签 系统 布局 开发 css web 系列 补充 frontend 二维 32 网格

本文主要是介绍”CSS 网格“二维布局系统（补充）——WEB开发系列32，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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>

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

这篇关于”CSS 网格“二维布局系统（补充）——WEB开发系列32的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1145766。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
HarmonyOS学习(七)——UI（五）常用布局总结

HarmonyOS学习(七)——UI（五）常用布局总结

自适应布局 1.1、线性布局（LinearLayout） 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列，Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距，达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式，且在各类尺寸屏幕上表现一致，其中交叉轴为垂直时，取值为Vert
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
不懂推荐算法也能设计推荐系统

不懂推荐算法也能设计推荐系统

本文以商业化应用推荐为例，告诉我们不懂推荐算法的产品，也能从产品侧出发， 设计出一款不错的推荐系统。 相信很多新手产品，看到算法二字，多是懵圈的。 什么排序算法、最短路径等都是相对传统的算法（注：传统是指科班出身的产品都会接触过）。但对于推荐算法，多数产品对着网上搜到的资源，都会无从下手。特别当某些推荐算法 和 “AI”扯上关系后，更是加大了理解的难度。 但，不了解推荐算法，就无法做推荐系
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
基于人工智能的图像分类系统

基于人工智能的图像分类系统

目录 引言项目背景环境准备 硬件要求软件安装与配置系统设计 系统架构关键技术代码示例 数据预处理模型训练模型预测应用场景结论 1. 引言 图像分类是计算机视觉中的一个重要任务，目标是自动识别图像中的对象类别。通过卷积神经网络（CNN）等深度学习技术，我们可以构建高效的图像分类系统，广泛应用于自动驾驶、医疗影像诊断、监控分析等领域。本文将介绍如何构建一个基于人工智能的图像分类系统，包括环境
阅读更多...
水位雨量在线监测系统概述及应用介绍

水位雨量在线监测系统概述及应用介绍

在当今社会，随着科技的飞速发展，各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中，水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术，其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成，形成了一个完整的闭环系统。 数据采集单元：这是系统的“眼睛”，
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
Hadoop企业开发案例调优场景

Hadoop企业开发案例调优场景

需求 （1）需求：从1G数据中，统计每个单词出现次数。服务器3台，每台配置4G内存，4核CPU，4线程。 （2）需求分析： 1G / 128m = 8个MapTask；1个ReduceTask；1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务（4    3    3） HDFS参数调优 （1）修改：hadoop-env.sh export HDFS_NAMENOD
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2