当前位置：首页 > news >正文

【前端】CSS Grid 布局详解

news 来源：原创 2025/9/12 17:54:49

CSS Grid 布局详解（通俗易懂版）

一、概述

CSS Grid 是一种二维布局系统，可以同时控制行和列，相比 Flex（一维布局），更适合用在整体页面布局或复杂模块结构中。

二、基础概念

Grid 容器（Container）：设置 display: grid 的元素。
Grid 项目（Item）：容器中的直接子元素。
轨道（Track）：行或列。
单元格（Cell）：行列交叉的区域。
网格线（Line）：行或列的边界，编号从 1 开始。

三、创建 Grid 容器

.container {display: grid;
}

四、定义网格行和列

.container {grid-template-columns: 100px 1fr 2fr;grid-template-rows: 50px auto;
}

grid-template-columns/rows 用于定义列/行的数量与宽度
- px：固定宽度
- fr：按比例分配空间（如 1fr）
- auto：根据内容自动撑开

示例解释：定义了 3 列（100px、1 份、2 份）和 2 行（第一行固定 50px，第二行自动撑开）。

五、设置行列间距

grid-column-gap: 10px;
grid-row-gap: 20px;/* 简写形式 */
gap: 20px 10px; /* row-gap column-gap */

六、项目在网格中的定位

.item {grid-column: 1 / 3; /* 跨两列：第1列开始，第3列前结束 */grid-row: 1 / 2;     /* 跨一行 */
}

说明：类似在 Excel 中选择 A1 到 B1。

七、自动填充与自适应布局

grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

repeat()：重复列
auto-fill：尽可能多地填充
minmax()：定义最小最大宽度

效果：列宽至少 150px，宽度不够就自动换行，适合响应式布局。

八、对齐方式

1. 控制单元格内项目对齐

justify-items: start | end | center | stretch;
align-items: start | end | center | stretch;

justify-items：水平方向对齐
align-items：垂直方向对齐

2. 控制整个网格在容器中对齐

justify-content: start | center | end | space-between | space-around | space-evenly;
align-content: start | center | end | stretch;

九、命名区域（语义化布局）

.container {display: grid;grid-template-areas:"header header""sidebar main""footer footer";grid-template-columns: 200px 1fr;grid-template-rows: auto 1fr auto;
}.header  { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main    { grid-area: main; }
.footer  { grid-area: footer; }

说明：使用区域名定义布局结构，清晰直观、语义明确。

十、grid 简写写法

grid: auto / 100px 1fr 1fr;
/* 等价于：
grid-template-rows: auto;
grid-template-columns: 100px 1fr 1fr;
*/

十一、常用属性速查表

属性名	说明
`display: grid`	开启 Grid 布局
`grid-template-columns`	定义列宽
`grid-template-rows`	定义行高
`grid-column`	控制项目跨列范围
`grid-row`	控制项目跨行范围
`gap` / `row-gap` / `column-gap`	设置网格间距
`grid-area`	命名区域
`justify-items` / `align-items`	控制格子内项目对齐方式
`justify-content` / `align-content`	控制整个网格对齐方式

十二、总结

Grid 是一种强大而灵活的二维布局系统。
通过 grid-template-* 系列属性可精确控制行列数量和尺寸。
使用 fr 单位和 auto-fill 可轻松实现响应式。
命名区域提升语义性和可维护性。

【前端】CSS Grid 布局详解

CSS Grid 布局详解（通俗易懂版） 一、概述 CSS Grid 是一种二维布局系统，可以同时控制行和列，相比 Flex（一维布局），更适合用在整体页面布局或复杂模块结构中。二、基础概念 Grid 容器&#x…...

编程日记 2025/9/12 17:54:49

物美“外贸转内销”极速绿色通道正式开启

「TMT星球」获悉，在国家“提振消费、扩大内需”及“内外贸一体化”战略指引下，物美集团依托自身零售生态优势，打造“云超绿通”专项通道，助力中国优质外贸企业实现“出口转内销”的高效转型，通过极速绿通、线上线下全渠…...

编程日记 2025/9/9 3:36:30

【说明书#1】Node.js 和 npm安装与使用

系统提示 npm 不是内部或外部命令，也不是可运行的程序或批处理文件，也就是 npm 命令无法识别。这个错误通常是因为 Node.js 和 npm 没有正确安装，或者它们的路径没有添加到系统的环境变量中。解决方法如下： 1. 安装 Node.js 和 npm：如果你还没有安装 Node.js，可以从…...

编程日记 2025/9/12 10:55:52

【触想智能】安卓工业平板电脑和普通商业平板电脑的区别

安卓工业平板电脑是基于ARM架构开发的一种工业平板电脑，它在自助终端、智能制造、产线车间、智慧物流、商业金融等诸多领域有着广泛的应用。触想安卓工业平板电脑TPC-A2系列安卓工业平板电脑和普通商业平板电脑在一些方面存在一些区别，包括设计、硬件规…...

编程日记 2025/9/12 10:59:01

Java基于SSM的课程答疑微信小程序【附源码、文档说明】

博主介绍：✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末获取源码联系🍅 👇🏻 精彩专栏推荐订阅👇&#x1f3…...

编程日记 2025/9/8 17:55:46

模板引擎语法-变量

模板引擎语法-变量文章目录模板引擎语法-变量（一）在Django框架模板中使用变量的代码实例（二）在Django框架模板中使用变量对象属性的代码实例（三）在Django框架模板中使用变量显示列表 （一&…...

编程日记 2025/9/7 16:29:20

1260 最大公约数

1260 最大公约数 ⭐️难度：中等 🌟考点：GCD 📖 📚 import java.util.Scanner; import java.util.Arrays;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int t …...

编程日记 2025/9/12 17:52:17

Node.js中net模块详解

Node.js 中 net 模块 API 详解 Node.js 的 net 模块提供了基于 TCP/IP 的网络功能，用于创建 TCP 服务器和客户端。以下是 net 模块的所有 API 详解： 1. 创建 TCP 服务器 const net require(net);// 1. 基本服务器 const server net.createServer((s…...

编程日记 2025/9/12 17:52:53

【从零开始学习JVM | 第三篇】虚拟机的垃圾回收学习（一）

堆空间的基本结构 Java 的自动内存管理主要是针对对象内存的回收和对象内存的分配。同时，Java 自动内存管理最核心的功能是堆内存中对象的分配与回收。 Java 堆是垃圾收集器管理的主要区域，因此也被称作 GC 堆（Garbage Collected Heap&am…...

编程日记 2025/9/7 11:59:34

参考资料激活 https://www.microcharon.com/tech/5.htmlja-netfilter-all下载地址：https://drive.microcharon.com/OneDrive/Software/JetBrains%20ja-netfilter-all%20Build%202024.1.11.zip 步骤及问题下载后：安全前确保旧版本的idea已经卸载。安…...

编程日记 2025/9/5 14:26:27

redis之缓存击穿

一、前言本期我们聊一下缓存击穿，其实缓存击穿和缓存穿透很相似，区别就是，缓存穿透是一些黑客故意请求压根不存在的数据从而达到拖垮系统的目的，是恶意的，有针对性的。缓存击穿的情况是，数据确实存在&…...

编程日记 2025/9/8 0:25:52

Node.js中path模块详解

Node.js path 模块全部 API 详解 Node.js 的 path 模块提供了处理文件路径的工具函数，支持跨平台路径操作。以下是 path 模块的所有 API 详解： 1. 路径解析与操作 const path require(path);// 1. 路径连接 const fullPath path.join(__dirname, fi…...

编程日记 2025/9/12 17:52:17

重构艺术 | 内联与查询替代临时变量

重构艺术 | 内联与查询替代临时变量在代码重构的殿堂里，临时变量常常扮演着双面角色：既是代码清晰的助力器，也可能成为代码腐败的温床。本文将深入探讨两种处理临时变量的重要手法：内联临时变量（Inline Temp&#xf…...

编程日记 2025/9/12 17:52:16

数据分析-数据预处理

数据分析-数据预处理处理重复值 duplicated( )查找重复值 import pandas as pd apd.DataFrame(data[[A,19],[B,19],[C,20],[A,19],[C,20]],columns[name,age]) print(a) print(--------------------------) aa.duplicated() print(a)只判断全局不判断每个 any() import p…...

编程日记 2025/9/8 8:21:38

Java基础 4.12

1.方法的重载（OverLoad） 基本介绍 Java中允许同一个类，多个同名方法的存在，但要求形参列表不一致！ 如 System.out.println(); out是PrintStream类型重载的好处减轻了起名的麻烦减轻了记名的麻烦 2.重载的快速入…...

编程日记 2025/9/9 3:55:44

PostgreSQL有类似oracle的move表吗

PostgreSQL有类似oracle的move表吗 PostgreSQL 提供了类似 Oracle MOVE 表功能的重组操作，但实现方式和具体命令有所不同。以下是详细对比和 PostgreSQL 中的实现方案： 一 Oracle MOVE 与 PostgreSQL 对比特性Oracle MOVEPostgreSQL 等效操作主要用途…...

编程日记 2025/8/30 15:09:42

AUTO-RAG: AUTONOMOUS RETRIEVAL-AUGMENTED GENERATION FOR LARGE LANGUAGE MODELS

Auto-RAG：用于大型语言模型的自主检索增强生成单位：中科院计算所代码： https://github.com/ictnlp/Auto-RAG 拟解决问题：通过手动构建规则或者few-shot prompting产生的额外推理开销。贡献：提出一种以LLM决策为中…...

编程日记 2025/9/12 17:52:54

ABC-CNN-GRU-Attention、CNN-GRU-Attention、ABC-CNN-GRU和CNN-GRU四类对比模型多变量时序预测

人工蜂群算法四模型对比！ABC-CNN-GRU-Attention系列四模型多变量时序预测目录人工蜂群算法四模型对比！ABC-CNN-GRU-Attention系列四模型多变量时序预测预测效果基本介绍程序设计参考资料预测效果基本介绍本研究针对多变量时间序列预测任务&#xf…...

编程日记 2025/9/9 17:09:32

ssh 免密登录服务器（vscode +ssh 免密登录）

每次打开vscode连接服务器都需要输入密码，特别繁琐。然后自己在网上翻阅了一下教程，发现说的内容比较啰嗦，而且个人感觉非常有误导性倾向。因此自己直接干脆写一个简便易懂的教程算了。 （以经过本人亲测，真实可靠&am…...

编程日记 2025/9/10 18:22:36

Elasticsearch 系列专题 - 第七篇：实战项目

理论学习固然重要，但实战才能真正巩固知识。本篇将通过两个项目，带你从需求分析到实现，体验 Elasticsearch 在真实场景中的应用。 1. 项目一：日志分析系统 1.1 需求分析与架构设计需求：实时采集服务器日志。按时间和日志级别（INFO、ERROR）分析。可视化错误趋势。架构…...

编程日记 2025/9/9 6:45:57

C++初阶-类和对象（上）

本章内容相对于之后的类和对象中和下都比较简单，但是整体还是有些难度的。目录 1.类的定义 1.1类定义格式 1.2访问限定符 1.3类域 2.实例化 2.1实例化概念 2.2对象大小 3.this指针 4.练习 4.1选择题1 4.2选择题2 5.总结 1.类的定义 1.1类定义格式 &am…...

编程日记 2025/9/4 8:29:32

（十九）安卓开发中的Application类的使用详解

在 Android 开发中，Application 类是一个全局的单例类，代表应用进程本身。它常用于初始化全局资源、维护应用级别的状态和注册全局生命周期回调。以下是详细讲解和代码示例： 一、自定义 Application 类 1. 创建子类 public class MyApplica…...

编程日记 2025/9/9 21:19:04

算法思想之位运算(一)

欢迎拜访：雾里看山-CSDN博客本篇主题：算法思想之位运算(一) 发布时间：2025.4.12 隶属专栏：算法目录滑动窗口算法介绍六大基础位运算符常用模板总结例题位1的个数题目链接题目描述算法思路代码实现比特位计数题目链接题目描述…...

编程日记 2025/9/11 10:18:27

十八、TCP多线程、多进程并发服务器

1、TCP多线程并发服务器服务端： #include<stdio.h> #include <arpa/inet.h> #include<stdlib.h> #include<string.h> #include <sys/types.h> /* See NOTES */ #include <sys/socket.h> #include <pthread.h>…...

编程日记 2025/9/9 0:45:58

『生成内容溯源系统』详解

生成内容溯源系统详解 1. 定义与核心目标生成内容溯源系统（Generative Content Provenance System）是指能够追踪AI生成内容的来源、生成过程、版权归属及修改历史的技术体系。其核心目标是： 验证真实性：证明内容由特定AI模型生…...

编程日记 2025/9/11 19:56:39

mac 解压 nsz 文件

nsz 地址下载 nsz PIP 套餐使用以下命令安装仅限 Console 的版本： pip3 install --upgrade nsz使用以下命令安装 GUI 版本： pip3 install --upgrade nsz[gui]解压 nsz 文件 nsz -D 文件路径...

编程日记 2025/9/2 19:32:20

Python进阶(3):函数(接上篇)

上一篇我们初步介绍python中函数的定义与调用 Python进阶(2):函数-CSDN博客这里继续: 关键字参数: 形参1实参1,形参2实参2,...... 关键字参数是指使用形式参数的名字来确定输入的参数值。通过该方式指定实际参数时,不再需要与形式参数的位置完全一致。只要将参数名写正确…...

编程日记 2025/9/11 6:31:22

卒/兵过河前的判断和走法触发器优化

兵(卒)：兵(卒)在未过河前，只能向前一步步走，过河以后，除不能后退外，允许左右移动，但也只能一次一步。迷你世界地图已上传优化...

编程日记 2025/8/17 19:20:11

生物信息Rust-01

前言-为什么想学Rust？ 一直想多学一门编译语言，主要有几个原因吧（1. 看到一位老师实验室要求需要掌握一门编译语言；2. 自己享想试着开发一些实用的生信工具，感觉自己现在相比于数据分析，探索生物学层面的意…...

编程日记 2025/9/4 16:48:59

基于HTML + jQuery + Bootstrap 4实现（Web）地铁票价信息生成系统

地铁票价信息表生成系统 1. 需求分析 1.1 背景地铁已经成为大多数人出行的首选,北京地铁有多条运营线路, 截至 2019 年 12 月，北京市轨道交通路网运营线路达 23 条、总里程 699.3 公里、车站 405 座。2019 年，北京地铁年乘客量达到 45.3 亿人次，日均客流为 1241.1 万人次…...

编程日记 2025/9/1 11:54:18

智慧水务项目（八）基于Django 5.1 版本PyScada详细安装实战

一、说明 PyScada，一个基于Python和Django框架的开源SCADA（数据采集与监视控制系统）系统，采用HTML5技术打造人机界面（HMI）。它兼容多种工业协议，如Modbus TCP/IP、RTU、ASCII等，并具…...

编程日记 2025/9/11 22:33:45

DeepSeek在消防救援领域的应用解决方案

DeepSeek在消防救援领域的应用解决方案一、火灾风险动态感知与早期预警火灾风险动态感知与早期预警是智慧消防的关键环节，DeepSeek通过多模态数据分析，融合烟雾传感器、热成像摄像头和气体浓度检测等数据，能够识别传统阈值法难以捕捉的火…...

编程日记 2025/9/9 4:09:11

VSCode CMake调试CPP程序

文章目录 1 安装C与CMake插件2 配置CMakeLists.txt3 使用CMake编译调试3.1 编译3.2 调试 4 自定义构建调试参考 1 安装C与CMake插件 C插件 CMake插件 2 配置CMakeLists.txt 编写测试程序 #include<iostream>int main(int argc, char const *argv[]) {int a 1, b 2;i…...

编程日记 2025/9/12 10:41:52

AI Agent工程师认证-学习笔记（3）——【多Agent】MetaGPT

学习链接：【多Agent】MetaGPT学习教程源代码链接（觉得很好，star一下）：GitHub - 基于MetaGPT的多智能体入门与开发教程 MetaGPT链接：GitHub - MetaGPT 前期准备 1、获取MetaGPT （1&#xff…...

编程日记 2025/9/8 22:32:43

Spring AI 结构化输出详解

一、Spring AI 结构化输出的定义与核心概念 Spring AI 提供了一种强大的功能，允许开发者将大型语言模型（LLM）的输出从字符串转换为结构化格式，如 JSON、XML 或 Java 对象。这种结构化输出能力对于依赖可靠解析输出值的下游应用程…...

编程日记 2025/9/7 8:07:50

AMGCL库使用示例

AMGCL库使用示例 AMGCL是一个用于解决大规模稀疏线性方程组的C库，它实现了代数多重网格(AMG)预处理器和Krylov子空间迭代求解器。下面是一些AMGCL的使用示例。基本示例：求解稀疏线性系统 #include <iostream> #include <vector> #includ…...

编程日记 2025/9/10 21:36:27

关于 Java 预先编译（AOT）技术的详细说明，涵盖 GraalVM 的配置、Spring Boot 3.x 的集成、使用示例及优缺点对比

以下是关于 Java 预先编译（AOT）技术的详细说明，涵盖 GraalVM 的配置、Spring Boot 3.x 的集成、使用示例及优缺点对比： 1. 预先编译（AOT）技术详解 1.1 核心概念 AOT（Ahead-of-Time&#xff09…...

编程日记 2025/9/8 17:46:18

Video Encoder：多模态大模型如何看懂视频

写在前面大型语言模型（LLM）已经掌握了理解文本的超能力，而多模态大模型（MLLM）则更进一步，让 AI 拥有了“看懂”图像的眼睛。但这还不够！真实世界是动态的、流动的，充满了运动、变化和声音。视频，正是承载这一切动态信息的关键媒介。让 LLM 看懂视频，意味着 AI 需…...

编程日记 2025/9/6 15:45:31

leetcode0622. 设计循环队列-medium

1 题目：设计循环队列官方标定难度：中设计你的循环队列实现。循环队列是一种线性数据结构，其操作表现基于 FIFO（先进先出）原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓冲器”。循环队列的一…...

编程日记 2025/9/3 0:41:56

专题十四：动态路由——OSPF

一、OSPF简介开放式最短路径优先OSPF（Open Shortest Path First）是IETF组织开发的一个基于链路状态的内部网关协议（Interior Gateway Protocol），采用DIjkstra算法，协议号是89。用于自治系统（A…...

编程日记 2025/9/8 14:00:34

【蓝桥杯】第十六届蓝桥杯 JAVA B组记录

试题 A: 逃离高塔很简单，签到题，但是需要注意精度，用int会有溢出风险答案：202 package lanqiao.t1;import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.PrintWrit…...

编程日记 2025/9/11 13:54:59

一个项目的架构演进

1，单体架构垂直升级：4核16GB -> 8核64G 水平扩展：一台服务器扩展成多台存在以下几个问题 1，提升的性能是有限的 2，更新，维护成本非常高，对于系统中要修改或增加的功能，整个发…...

编程日记 2025/9/10 14:14:35

创建虚拟环境无法加载到pycharm当conda环境，只能为python环境

conda create -n myenv python3.8 然后，在pycharm中，点击 ..." 按钮并浏览到您的 Conda 环境路径。通常，Conda 环境路径位于 ~/.conda/envs/<Your Environment Name> 或 ~/miniconda3/envs/<Your Environment Name> 或 ~/an…...

编程日记 2025/9/6 20:15:48

暴雨打造智能化时代源动力

当清晨的智能管家为您调节室温、日间数字员工自动生成会议纪要、深夜AI外教仍在纠正发音……这不是科幻片，2025年的世界正被智能体悄然重塑。这些能听会想的数智化助理，正在医疗会诊、工业质检、金融风控等多个领域创造着价值。那么，智能体…...

编程日记 2025/9/7 11:42:05

【ROS2】行为树：BehaviorTree

1、简介与状态机不同，行为树强调执行动作，而不是状态之间的转换。行为树是可组合的。可以重复使用简单的行为来构建复杂的行为。在游戏领域，行为树已经比较流行了。主要用于维护游戏角色的各种动作和状态。 ROS2的导航框架Navigation2中引入了行为树来组织机器人的工作流…...

编程日记 2025/9/10 19:35:36

【HTTP】：应用层协议HTTP（1）

1.HTTP协议虽然我们说,应用层协议是我们程序猿自己定的.但实际上,已经有大佬们定义了一些现成的,又非常好用的应用层协议,供我们直接参考使用.HTTP(超文本传输协议)就是其中之一。在互联网世界中，HTTP（HyperTextTransfer Protocol，超文本…...

编程日记 2025/9/12 1:46:12

Boost Graph Library (BGL) 介绍与使用示例

Boost Graph Library (BGL) 介绍与使用示例 Boost Graph Library (BGL) 是 Boost 库中用于图论计算的模块，提供了处理图数据结构的通用接口和多种图算法实现。 BGL 主要特性提供多种图表示方式：邻接表、邻接矩阵等包含常用图算法：DFS、BF…...

编程日记 2025/9/10 12:47:38