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

Web前端开发：Grid 布局（网格布局）

news 来源：原创 2025/8/24 4:00:40

一、Grid 是什么？

Grid（网格布局） 是 CSS 中一种二维布局系统，可以同时控制行和列的排列方式。相比传统的浮动布局和 Flexbox（一维布局），Grid 更适合构建复杂的网页结构（比如仪表盘、卡片布局等）。

二、核心概念

1. 网格容器（Grid Container）

通过 display: grid 将一个元素定义为网格容器，它的直接子元素自动成为网格项目（Grid Items）。

.container {display: grid;
}

2. 行与列（Rows & Columns）

轨道（Track）：行或列的集合
单元格（Cell）：行和列的交叉区域
网格线（Grid Line）：分隔行或列的线（编号从 1 开始）

三、基础用法

1. 定义行列大小

.container {grid-template-columns: 100px 200px 1fr; /* 3列：100px、200px、剩余空间 */grid-template-rows: 50px auto; /* 2行：50px、自适应高度 */
}

fr 单位：按比例分配剩余空间（类似“份”）
repeat()：简化重复值
grid-template-columns: repeat(3, 1fr); → 3 列等宽

2. 间距控制

.container {gap: 10px; /* 行和列间距均为 10px */row-gap: 20px; /* 单独设置行间距 */column-gap: 15px;
}

四、定位网格项目

1. 按网格线定位

.item {grid-column-start: 1; /* 起始于第1列线 */grid-column-end: 3;   /* 结束于第3列线（跨2列） */grid-row: 2 / 4;      /* 简写：从第2行线到第4行线 */
}

2. 使用 `span` 关键字

.item {grid-column: 1 / span 2; /* 从第1列开始，跨越2列 */
}

五、对齐方式

1. 整体对齐

.container {justify-content: center; /* 水平居中整个网格 */align-content: end;      /* 垂直底部对齐 */
}

2. 单元格内对齐

.container {justify-items: center; /* 所有项目水平居中 */align-items: stretch;  /* 默认拉伸填满单元格 */
}/* 单独控制某个项目 */
.item {justify-self: start;align-self: end;
}

六、响应式布局技巧

1. 自动填充列

.container {grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

auto-fill：自动填充尽可能多的列
minmax(200px, 1fr)：列宽最小 200px，最大按比例分配

2. 命名区域（适合复杂布局）

.container {grid-template-areas:"header header""sidebar main""footer footer";
}.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }

七、Grid vs Flexbox

特性	Grid	Flexbox
维度	二维（行+列）	一维（行或列）
适用场景	整体页面布局	组件内部排列
内容优先	容器控制布局	内容决定布局

Web前端开发：Grid 布局（网格布局）

一、Grid 是什么？ Grid（网格布局） 是 CSS 中一种二维布局系统，可以同时控制行和列的排列方式。相比传统的浮动布局和 Flexbox（一维布局），Grid 更适合构建复杂的网页结构（比如仪表盘、…...

编程日记 2025/8/24 4:00:40

时间同步服务

时间同步:多主机协作工作时，各个主机的时间同步很重要，时间不一致会造成很多重要应用的故障，如:加密协议，日志，集群等，利用NTP(Network Time Protocol )协议使网络中的各个计算机时间达到同步。目前NTP协议…...

编程日记 2025/8/21 7:45:16

全球化电商平台Azure云架构设计

业务需求： 支撑全球三大区域（北美/欧洲/亚洲）用户访问，延迟<100ms处理每秒50,000订单的峰值流量混合云架构整合本地ERP系统全年可用性99.99%满足GDPR和PCI DSS合规要求建议在实施时使用Azure Landing Zone框架进行部署&…...

编程日记 2025/8/23 4:06:01

【SaaS多租架构】数据隔离与性能平衡

SaaS多租户架构：数据隔离与性能平衡一、技术背景及发展二、技术特点：数据隔离与性能优化的双核心三、技术细节：实现路径与关键技术四、实际案例分析五、未来发展趋势结语一、技术背景及发展多租户架构是云计算与SaaS（软件即服务）模式的核心技术，其核心目标是通过共享基…...

编程日记 2025/8/24 3:56:39

ARM介绍及其体系结构

目录一、ARM介绍 （一）公司层面 （二）技术层面 （三）微处理器芯片或产品方面二、ARM体系结构 （一）指令集 （二）寄存器组织 （三）存…...

编程日记 2025/8/24 3:58:06

3DGS-slam:splatam公式

配套讲解视频：https://www.bilibili.com/video/BV1ZgfBYdEpg/?spm_id_from333.1387.homepage.video_card.click&vd_sourced4c3e747c32049ddd90dcce17208f4e0 1、多维高斯分布公式: 对于多维（多变量）高斯分布，概率密度函数的…...

编程日记 2025/8/24 3:58:31

阿里云服务器深度科普：技术架构与未来图景

阿里云服务器深度科普：技术架构与未来图景一、起源与演进：从虚拟化到云原生阿里云服务器（Elastic Compute Service, ECS）诞生于阿里巴巴集团对云计算技术的早期探索。2009年，阿里云团队启动自主研发&#xff0c…...

编程日记 2025/8/24 3:56:36

物联网之对接MQTT最佳实践

小伙伴们，你们好呀，我是老寇，跟我一起学习对接MQTT 安装EMQX 采用docker-compose一键式，启动！！！ 还没有安装docker朋友，参考文章下面两篇文章 # Ubuntu20.04安装Docker # Cento…...

编程日记 2025/8/20 21:21:11

基于C++实现的深度学习(cnn/svm)分类器Demo

1. 项目简介本项目是一个基于C实现的深度学习与传统机器学习结合的分类器Demo，主要流程为： 从CSV文件读取样本数据用卷积神经网络（CNN）进行特征提取用支持向量机（SVM）进行最终分类支持模型的保存与加载提…...

编程日记 2025/8/24 4:00:16

探寻适用工具：AI+3D 平台与工具的关键能力及选型考量 (AI+3D 产品经理笔记 S2E03)

引言：从技术光谱到落地选择的桥梁在前两篇笔记中，我们首先（S2E01）宏观地探讨了 AI 生成 3D 技术兴起的驱动力、核心价值与面临的挑战，随后（S2E02）深入辨析了 Text-to-3D、Image-to-3D、NeRF 等…...

编程日记 2025/8/24 3:58:30

软考系统架构设计师系列知识点 —— 黑盒测试与白盒测试（1）

本文内容参考： 黑盒测试和白盒测试详解-CSDN博客软件测试中的各种覆盖（Coverage）详解-CSDN博客特此致谢！ 零、概述黑盒测试又名为功能测试，主要目的是发现软件设计的需求或者是软件设计规格说明书中的错误缺陷。…...

编程日记 2025/8/24 3:56:37

配变运行检测：算法与实现逻辑

在现代电网系统中，配电变压器（简称配变）作为电力分配的关键设备，其运行状态的稳定与否直接关系到整个电网的供电质量和可靠性。配变运行检测通过实时监测和分析配变的各项运行参数，及时发现潜在故障隐患，为…...

编程日记 2025/8/24 3:56:40

brpc 安装及使用

介绍 brpc（Baidu Remote Procedure Call）是百度开源的一个高性能、通用的 RPC（远程过程调用）框架，其目标是让使用者能轻松构建高并发、分布式的应用程序。以下从多个方面详细介绍brpc： 核心特性高性能 …...

编程日记 2025/8/24 3:56:14

ComfyUI学习笔记，案例四：inpaint

背景 ComfyUI学习笔记，案例四：inpaint，就是将一张图抠掉一块区域后还原，或者在一个图上重绘某个区域，感觉还是比较简单的。它包含四个案例： inpaint_example，正向提示词 closeup photograph …...

编程日记 2025/8/24 3:59:02

【C++】智能指针RALL实现shared_ptr

个人主页 ： zxctscl 专栏【C】、【C语言】、【Linux】、【数据结构】、【算法】如有转载请先通知文章目录 1. 为什么需要智能指针？2. 内存泄漏2.1 什么是内存泄漏，内存泄漏的危害2.2 内存泄漏分类（了解）2.3 如何…...

编程日记 2025/8/24 3:56:13

利用迁移学习实现食物分类：基于PyTorch与ResNet18的实战案例

利用迁移学习实现食物分类：基于PyTorch与ResNet18的实战案例在深度学习领域，训练一个高性能的模型往往需要大量的数据和计算资源。然而，通过迁移学习，我们能够巧妙地利用在大规模数据集上预训练好的模型，将其知识迁移…...

编程日记 2025/8/24 3:58:29

列日-巴斯通-列日：与VELO Senso TT+见证精彩时刻

近日，第111届列日-巴斯通-列日自行车赛落下帷幕，波加查毫无悬念地再度单飞夺冠。这场赛事不仅是速度与耐力的较量，更是装备与技术的完美结合。　　在2025年第111届列日-巴斯通-列日自行车赛中，波加查以绝对优势再度单飞夺冠&a…...

编程日记 2025/8/24 3:54:29

C++笔记之委托

C++笔记之委托 code review! 文章目录 C++笔记之委托一、什么是委托？二、委托的常见应用场景2.1 事件委托（Event Delegation）2.2 C# 的委托类型（Delegate）2.3 对象组合中的委托（Design Delegation Pattern）三、C++ 委托模式示例四、委托的优点五、委托与23种设计模式的…...

编程日记 2025/8/24 4:00:19

Windows11 VS code 安装 Cline 调用 Github MCP 配置过程坑点汇总

背景为了调研 MCP 在 windows 上如何使用本地的命令执行一些操作而实现自动化的过程，在 B 站视频的指导下，进行相应填坑过程，最终运行起来，并实现 github 自动化编程并提交代码的过程。 B 站 Cline 视频演示 Cline Cline 是一…...

编程日记 2025/8/24 3:53:33

一、配置优先级(高到低) 命令行参数bootstrap.yaml/propertiesnacos配置config/applicaion.properties > config/applicaion.yml > config/applicaion.yamlapplicaion.properties > applicaion.yml > applicaion.yaml 有环境配置的会覆盖基础配置5的重复项&#…...

编程日记 2025/8/23 5:48:44

多语言笔记系列：Polyglot Notebooks 中运行 BenchmarkDotnet 基准测试

运行 BenchmarkDotnet 基准测试在多语言笔记中，可以很方便的使用 BenchmarkDotnet 进行基准测试。使用步骤 1. 安装 BenchmarkDotNet 包 // 默认包源 #i "nuget:https://api.nuget.org/v3/index.json"#r "nuget: BenchmarkDotNet, 0.13.12&quo…...

编程日记 2025/8/24 3:56:14

Model Context Protocol (MCP)笔记

目录摘要MCP理论MCP的作用MCP 传输机制 Stdio 与 SSESTDIOSSE 传输部署模式模型是如何确定工具的选用的？Fc x MCP x LangChain MCP快速开始编写客户端基于golang的mcp 摘要 Model Context Protocol（MCP，模型上下文协议）是由 An…...

编程日记 2025/8/21 10:54:29

【codeforces 2070c】二分答案详解

【codeforces 2070c】二分答案详解二分答案转化成判定对于任何问题，如果我们有了一个判定算法，那把解空间枚举并判定一遍，当然就可以得到解了。而当解空间具有单调性时，我们就可以使用二分法代替枚举。考虑如下问题&#xf…...

编程日记 2025/8/23 7:30:33

启发式算法-禁忌搜索算法

禁忌搜索是一种可以用于解决组合优化问题的启发式算法，通过引入记忆机制跳出局部最优，避免重复搜索。该算法从一个初始解开始，通过邻域搜索策略来寻找当前解的邻域解，并在邻域解中选择一个最优解作为下一次迭代的当前解&#xff0…...

编程日记 2025/8/21 10:54:24

simulink 外循环与内循环执行流程

目录前言一、外循环模型执行流程二、内循环模型执行流程仓库前言某些需求需要使用到simulink外循环和内循环，本篇通过对其执行顺序进行记录，以便后续查阅。一、外循环模型下面是我搭建的简单模型执行流程 0-step:执行en step…...

编程日记 2025/8/22 16:49:25

Gradio全解20——Streaming：流式传输的多媒体应用（6）——构建视频流目标检测系统

Gradio全解20——Streaming：流式传输的多媒体应用（6）——构建视频流目标检测系统本篇摘要20. Streaming：流式传输的多媒体应用20.6 RT-DETR模型构建视频流目标检测系统20.6.1 RT-DETR模型1. 模型介绍2. 使用示例 20.6.2 系统配置…...

编程日记 2025/8/22 23:14:41

比较两种判断相同二叉树的方法：递归与遍历序列对比

在二叉树操作中，判断两棵树是否相同是一个常见的问题。本文将对比两种不同的解决方案：递归法和遍历序列对比法，分析它们的优缺点，并探讨为何递归法是更优的选择。问题描述给定两棵二叉树的根节点 p 和 q，判断它们是…...

编程日记 2025/8/21 10:54:20

Java IO流核心处理方式详解

一、IO流概述 Java IO（Input/Output）流是处理输入输出操作的核心机制，通过流（Stream）的形式实现设备间的数据传输。所有操作都基于以下两个核心抽象： InputStream/OutputStream：字节流基类 Re…...

编程日记 2025/8/22 11:40:28

C++竞赛指南

关注支持，好运连连目录关注支持，好运连连一、竞赛C核心优势二、必备语法与STL组件 1. 输入输出优化 2. 常用STL容器 3. 算法函数三、竞赛常用算法 1. 时间复杂度分析 2. 高频算法模板二分查找快速幂（模运算） …...

编程日记 2025/8/23 12:42:43

Python字符串全面指南：从基础到高级操作

字符串是Python编程中最基础也是最重要的数据类型之一。本文将全面介绍Python字符串的相关知识，从基础概念到高级操作，帮助您彻底掌握字符串的使用。 1. 字符串基础 1.1 字符串的概念字符串是由一系列字符组成的不可变序列容器，存储的是字…...

编程日记 2025/8/23 1:46:55

【推荐】智慧矿山矿业信息化智能化资料汇总-共25份

智慧矿山矿业信息化智能化资料汇总 25 份： 有色金属矿山智能化采选生产线智能矿山建设与示范智能矿山建设实践与思考智慧矿山建设解决方案与实现途径以信息化、智能化为手段打造生态型、效益型国际一流示范矿山新型智能 X 荧光多通道高精度在线品位分析仪的研制与应…...

编程日记 2025/8/21 10:54:12

Oracle OCP认证考试考点详解083系列08

题记： 本系列主要讲解Oracle OCP认证考试考点（题目），适用于19C/21C,跟着学OCP考试必过。 36. 第36题： 题目解析及答案： 关于数据库闪回（FLASHBACK DATABASE）功能，以下…...

编程日记 2025/8/21 10:54:10

备战蓝桥杯国赛第一天-atcoder-beginner-contest404

B. 因为只有四种情况，旋转90/180/270度后替换，直接替换，暴力即可 C. 循环图的定义是每个点出度为2，而且只有一个环的，所以先判断出度，再判断是否成环 #include <bits/stdc.h> using namespace st…...

编程日记 2025/8/21 10:54:08

Python异步编程进阶：深入探索asyncio高级特性

异步上下文管理器 (async with) 异步上下文管理器允许你在异步环境中管理资源，比如数据库连接或文件操作。基本实现 class AsyncDatabaseConnection:async def __aenter__(self):print("建立数据库连接")await asyncio.sleep(0.5) # 模拟连接建立return selfas…...

编程日记 2025/8/21 10:54:06

【Java ee初阶】多线程（7）

一、线程池线程池的一些参数： corePoolSize：核心线程数量 maximumPoolSize:核心线程数量临时线程数量上述是“java 的线程池策略”（其他语言，其他库的线程池可能不同） keepAliveTime :临时线程的存活时间.临时线程…...

编程日记 2025/8/22 21:08:47

【PostgreSQL数据分析实战：从数据清洗到可视化全流程】6.2 预测分析基础（线性回归/逻辑回归实现）

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 PostgreSQL数据分析实战：预测分析基础（线性回归/逻辑回归实现）6.2 预测分析基础——线性回归与逻辑回归实现6.2.1 预测分析核心理论框架1…...

编程日记 2025/8/21 10:54:02

【NLP】29. 高效训练与替代模型：让语言模型更轻、更快、更强

高效训练与替代模型：让语言模型更轻、更快、更强本文介绍语言模型如何通过结构优化与新模型探索，提升训练和推理的效率，适应资源受限环境，同时概述了一些 Transformer 替代模型的最新进展。一、如何让语言模型更高效&#xff1f…...

编程日记 2025/8/23 2:30:16

【LaTeX+VSCode本地Win11编译教程】

LaTeXVSCode本地编译教程参考视频： LaTeXVSCode本地编译教程下面提供一种Win11的Latex环境配置和设置方案，首先vscode安装参考博客：【VscodeGit教程】，然后准备安装Latex相关组件在 https://miktex.org/download 下载 miktex 并…...

编程日记 2025/8/21 10:53:57

组合两个表 --- MySQL [Leetcode 题目详解]

目录题目链接往期相关基础内容讲解博客题目详解 1. 题目内容 2. 解题思路 3. 代码编写题目链接 // 175. 组合两个表往期相关基础内容讲解博客 // 聚合查询和联合查询博客题目详解 1. 题目内容 // 编写解决方案，报告 Person 表中每个人的姓、名、城市…...

编程日记 2025/8/21 10:53:55

STM32 PulseSensor心跳传感器驱动代码

STM32CubeMX中准备工作： 1、设置AD 通道 2、设置一个定时器中断，间隔时间2ms，我这里采用的是定时器7 3、代码优化01 PulseSensor.c文件 #include "main.h" #include "PulseSensor/PulseSensor.h"/******************…...

编程日记 2025/8/22 11:10:22

macOS 上是否有类似 WinRAR 的压缩软件？

对于习惯使用 Windows 的用户来说，WinRAR 是经典的压缩/解压工具，但 macOS 系统原生并不支持 RAR 格式的解压，更无法直接使用 WinRAR。不过，macOS 平台上有许多功能相似甚至更强大的替代工具，以下是一些推荐&#xff1…...

编程日记 2025/8/21 10:53:51

Java求职面试：Spring Boot与微服务的幽默探讨

Java求职者面试：技术与幽默的碰撞场景概述在某互联网大厂的面试现场，面试官严肃认真，程序员则是一个搞笑的水货角色。面试者名叫张伟，年龄28岁，硕士学历，拥有5年的Java开发经验。以下是面试的详细过程。…...

编程日记 2025/8/21 10:53:49

《数字图像处理（面向新工科的电工电子信息基础课程系列教材）》封面颜色空间一图的选图历程

禹晶、肖创柏、廖庆敏《数字图像处理（面向新工科的电工电子信息基础课程系列教材）》学图像处理的都知道，彩色图像的颜色空间很多，而且又是三维，不同的角度有不同的视觉效果，MATLAB的图又有有box和没有box。…...

编程日记 2025/8/24 1:56:53

Docker 使用下（二）

Docker 使用下 （二） 文章目录 Docker 使用下 （二）前言一、初识Docker1.1 、Docker概述1.2 、Docker的历史1.3 、Docker解决了什么问题1.4 、Docker 的优点1.5 、Docker的架构图二、镜像三、容器四、数据卷4.1、数据卷的概念4.2 、…...

编程日记 2025/8/23 15:41:33