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

对grid布局有哪些了解【css】

news 来源：原创 2025/5/28 8:29:35

CSS Grid 布局是现代网页设计中非常强大的布局方式之一，它能够使你以更加灵活且直观的方式来设计网页的布局，特别适用于复杂的多行多列的布局。它允许你在网页上创建非常精确的网格，帮助你把内容放置在多个行和列中。

1. Grid 布局的基本概念

CSS Grid 布局允许你将网页划分为多个“网格单元”，这些单元可以以不同的方式进行布局，横向（列）和纵向（行）的设计都非常灵活。

主要概念：
Grid 容器：一个父元素，被声明为 display: grid 或 display: inline-grid。
Grid 项目：这个容器内的直接子元素，它们会按照网格系统排列。
行和列：Grid 的核心，允许你在容器内定义行和列的大小。

2. 如何实现 Grid 布局

2.1 设置 Grid 容器

在父元素上，设置 display: grid 来启用 Grid 布局。

2.2 定义列和行

通过 grid-template-columns 和 grid-template-rows 来定义网格的行列数以及它们的大小。

2.3 定义网格单元位置

使用 grid-column 和 grid-row 来控制每个 Grid 项目所在的位置。你可以将项目放置在特定的行和列上。

3. 示例代码

以下是一个简单的 HTML 和 CSS 示例，展示了如何使用 CSS Grid 布局创建一个三行三列的网格布局。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS Grid Layout</title><style>/* 设置 Grid 容器 */.grid-container {display: grid;grid-template-columns: repeat(3, 1fr); /* 定义 3 列，每列宽度为 1fr */grid-template-rows: repeat(3, 100px); /* 定义 3 行，每行高度为 100px */gap: 10px; /* 设置网格单元之间的间隔 */margin: 20px;}/* 设置 Grid 项目 */.grid-item {background-color: lightblue;text-align: center;line-height: 100px; /* 使文本垂直居中 */border: 1px solid #000;}/* 特定项目的定位 */.item1 {grid-column: 1 / 3; /* 跨越第一列到第三列 */grid-row: 1; /* 位于第一行 */}.item2 {grid-column: 3; /* 位于第三列 */grid-row: 1; /* 位于第一行 */}.item3 {grid-column: 1; /* 位于第一列 */grid-row: 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 class="grid-item item3">Item 3</div><div class="grid-item">Item 4</div><div class="grid-item">Item 5</div><div class="grid-item">Item 6</div><div class="grid-item">Item 7</div><div class="grid-item">Item 8</div><div class="grid-item">Item 9</div>
</div></body>
</html>

4. 代码解析

定义网格容器： .grid-container 使用 display: grid 来启用 Grid 布局。使用 grid-template-columns: repeat(3, 1fr) 和 grid-template-rows: repeat(3, 100px) 分别定义了 3 列，每列宽度为 1fr，以及 3 行，每行高度为 100px。gap: 10px 设置了网格项之间的间距。

Grid 项目：每个 .grid-item 都是网格中的一个项目，通过 text-align: center 和 line-height: 100px 使内容居中。

位置控制：通过 grid-column 和 grid-row 控制每个项的位置。例如，.item1 跨越第一列到第三列，.item3 跨越第二行到第四行。

5. 可以实现的效果

响应式布局：你可以使用媒体查询来根据不同的屏幕宽度调整列和行的数量，使页面在移动端、平板和桌面设备上都有良好的显示效果。

动态布局：Grid 布局使得内容的位置能够灵活地进行调整，特别适用于动态内容的展示。例如，当有更多内容时，网格项会自动扩展或收缩。

复杂的设计：可以实现一些复杂的布局，如瀑布流、响应式网格布局等，通常会比传统的浮动布局更简洁和可维护。

6. 常用属性

grid-template-columns：定义网格列的宽度。
grid-template-rows：定义网格行的高度。
grid-gap（或者 gap）：定义网格项之间的间距。
grid-column：定义一个元素所跨越的列。
grid-row：定义一个元素所跨越的行。

对grid布局有哪些了解【css】

CSS Grid 布局是现代网页设计中非常强大的布局方式之一，它能够使你以更加灵活且直观的方式来设计网页的布局，特别适用于复杂的多行多列的布局。它允许你在网页上创建非常精确的网格，帮助你把内容放置在多个行和列中。 1. Grid 布局的基本概念…...

编程日记 2025/5/28 8:29:35

IOS 安全机制拦截 window.open

摘要在ios环境，在某些情况下执行window.open不生效一、window.open window.open(url, target, windowFeatures) 1. url：「可选参数」，表示你要加载的资源URL或路径，如果不传，则打开一个url地址为about:blank的空…...

编程日记 2025/5/28 8:15:44

低空经济（9）低空飞行器零部件供应商国内外厂家

低空飞行器零部件供应商国内外厂家 1.概述2.国内供应商2.1 动力系统2.2 航电系统2.3 机身结构部件2.4 传动系统2.5 液压系统与气动系统 3.国外供应商3.1 动力系统3.2 航电系统3.3 机身结构部件3.4 传动系统3.5 液压与气动系统 tips：资料来自网络，仅供参考…...

编程日记 2025/5/28 8:22:04

3b1b线性代数基础

零、写在前面 3b1b之前没认真看，闲了整理整理。一、向量学习物理的时候，向量是空间中的箭头。由其方向和长度决定。学习数据结构的时候，向量是有序的数字列表。向量的每一维度有着不同含义。线性代数中，我们通常认为**向量…...

编程日记 2025/5/27 10:34:27

困境如雾路难寻，心若清明步自轻---2024年创作回顾

文章目录前言博客创作回顾第一次被催更第一次获得证书周榜几篇博客互动最多的最满意的引发思考的写博契机碎碎念时也运也部分经验尾前言今年三月份，我已写下一篇《近一年多个人总结》，当时还没开始写博客。四月份写博后，就顺手将那篇总…...

编程日记 2025/5/28 7:26:48

文章目录 1 : Introduction2 : Summary3: Reerence document4 : Example 1 : Introduction In the abap development we deal with data and the carrier is internal table . it is transfered in the whole programe. In the interview we offten meet it . What is the dif…...

编程日记 2025/5/28 7:09:11

从0到1学习机器学习实践--1 安装Anaconda

机器学习首先安装conda环境，这个是比较靠谱手把手执行的安装教程最新最全（亲测）的conda安装教程和虚拟环境安装环境配置...

编程日记 2025/5/6 7:52:57

整合管理输入、工具与技术、输出

过程输入工具与技术输出制定项目章程1.项目立项文件2.协议3.事业环境因素4.组织过程资产1.专家判断2.数据收集头脑风暴、焦点小组、访谈3.人际关系与团队技能冲突管理、引导、会议管理4.会议1.项目章程2.假设日志制订项目管理计划1.项目章程2.其他过程输出3.事业环境因素4.组织…...

编程日记 2025/5/24 15:04:07

sed — 流编辑器：从入门到精通

内容速览简介 sed（Stream Editor）是一个功能强大的文本处理工具，广泛应用于文本文件的自动化编辑和批量处理。它通过逐行读取文件内容并在内存中的临时缓冲区（即“模式空间”）中处理文本，实现高效的文本…...

编程日记 2025/5/28 6:52:25

【玩转全栈】----Django基本配置和介绍

目录 Django基本介绍： Django基本配置： 安装Django 创建项目创建app 注册app Django配置路由URL Django创建视图启动项目 Django基本介绍： Django是一个开源的、基于Python的高级Web框架，旨在以快速、简洁的方式构建高质量的Web…...

编程日记 2025/5/24 15:03:26

【Linux】文件操作、系统IO相关操作、inode和输入输出重定向

⭐️个人主页：小羊 ⭐️所属专栏：Linux 很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~ 目录 1、理解文件1.1 狭义理解1.2 广义理解1.3 文件操作1.4 系统角度 2、系统文件IO2.1 文件相关操作2.2 文件描述符2.3 重定向 3、动静…...

编程日记 2025/5/27 17:54:31

Prometheus+grafana实践：Doris数据库的监控

文章来源：乐维社区 Doris数据库背景 Doris（Apache Doris）是一个现代化的MPP（Massive Parallel Processing，大规模并行处理）数据库，主要用于在线分析处理（OLAP）场景。 D…...

编程日记 2025/5/28 7:07:51

c语言（转义字符）

前言： 内容： 然后记一下转义字符 \? 在书写连续多个问号时使用，防止他们被解析成三字母词 \ 用于表示字符常量 \\ 用于表示一个反斜杠，防止他被解析为一个转义序列符 \n 换行 \r …...

编程日记 2025/5/28 7:21:39

TOGAF之架构标准规范-信息系统架构 | 数据架构

TOGAF是工业级的企业架构标准规范，信息系统架构阶段是由数据架构阶段以及应用架构阶段构成，本文主要描述信息系统架构阶段中的数据架构阶段。如上所示，信息系统架构（Information Systems Architectures）在TOGAF标准规…...

编程日记 2025/5/26 9:18:42

快速排序：一种高效的排序算法

前言排序是最基本和最常用的操作之一。无论是数据处理、搜索优化，还是各种应用程序的内部逻辑，排序算法的选择都直接影响到程序的性能。快速排序（Quick Sort）作为一种典型的分治算法，以其平均时间复杂度 O(n log n) 和优越的实际表现，成为了现代编程中最常用的排序算法…...

编程日记 2025/5/28 6:52:25

PHP：从入门到进阶的编程之旅

在Web开发的广阔天地中，PHP（Hypertext Preprocessor，超文本预处理器）无疑是一颗璀璨的明星。自1995年问世以来，PHP凭借其开源、跨平台、易于学习和使用的特性，迅速成为Web开发领域中最受欢迎的语言之一。本…...

编程日记 2025/5/28 7:51:12

Windows的docker中安装gitlab

一.Windows的docker中安装gitlab 1.通过阿里云拉取镜像 docker pull registry.cn-hangzhou.aliyuncs.com/lab99/gitlab-ce-zh 2.在本地创建备份数据的目录 mkdir -p D:home/software/gitlab/etc mkdir -p D:home/software/gitlab/logs mkdir -p D:home/software/gitlab/dat…...

编程日记 2025/5/27 11:29:34

计算机网络（58）无线局域网WLAN

前言无线局域网WLAN（Wireless Local Area Network）是一种利用无线通信技术将计算机设备互联起来，构成可以互相通信和实现资源共享的网络体系。一、定义与特点定义： WLAN通过无线信道代替有线传输介质连接两个或多个设备形成一个…...

编程日记 2025/5/28 7:41:27

LeetCode： 45.跳跃游戏II

跟着carl学算法，本系列博客仅做个人记录，建议大家都去看carl本人的博客，写的真的很好的！ 代码随想录 LeetCode： 45.跳跃游戏II 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。每个元素 nums[i] 表示…...

编程日记 2025/5/27 3:46:46

Blazo-Blazor Web App项目结构

让我们还是从创建项目开始，来一起了解下Blazor Web App的项目情况创建项目呈现方式这里我们可以看到需要选择项目的呈现方式，有以上四种呈现方式 ● WebAssembly ● Server ● Auto(Server and WebAssembly) ● None 纯静态界面静态SSR呈现方式 WebAs…...

编程日记 2025/5/27 17:55:09

汇编语法及相关指令

1.汇编指令的基本格式： <opcode>{<cond>}{s} <Rd>, <Rn>, <shifter_operand> opcode：指令的功能码，用来表示当前指令的作用 cond：条件码，需要在指令执行之前先判断条件受否满足&…...

编程日记 2025/5/28 7:35:02

数据结构——堆（介绍，堆的基本操作、堆排序）

我是一个计算机专业研0的学生卡蒙Camel🐫🐫🐫（刚保研） 记录每天学习过程（主要学习Java、python、人工智能），总结知识点（内容来自：自我总结网上借鉴&#xff0…...

编程日记 2025/5/28 7:39:32

linux+docker+nacos+mysql部署

一、下载 docker pull mysql:5.7 docker pull nacos/nacos-server:v2.2.2 docker images 二、mysql部署 1、创建目录存储数据信息 mkdir ~/mysql cd ~/mysql 2、运行 MySQL 容器 docker run -id \ -p 3306:3306 \ --name mysql \ -v $PWD/conf:/etc/mysql/conf.d \ -v $PWD/…...

编程日记 2025/5/25 10:28:00

10个非常基础的 Javascript 问题

Javascript是一种用于Web开发的编程语言。JavaScript在网络的客户端上运行。根据MDN，JavaScript（通常缩写为JS）是一种轻量级的，解释性的，面向对象的语言，具有一流的功能，并且最著名的是Web页面…...

编程日记 2025/5/24 1:08:11

SCP收容物221~225

注 ：此文接SCP收容物211~215,本文只供开玩笑 ,与steve_gqq_MC合作 --------------------------------------------------------------------------------------------------------------------------------- 目录 scp-221 scp-222 scp-223 scp-224 scp-225 s…...

编程日记 2025/5/28 7:46:40

基于迁移学习的ResNet50模型实现石榴病害数据集多分类图片预测

完整源码项目包获取→点击文章末尾名片！ 番石榴病害数据集背景描述番石榴 （Psidium guajava） 是南亚的主要作物，尤其是在孟加拉国。它富含维生素 C 和纤维，支持区域经济和营养。不幸的是，番石榴生产受到降…...

编程日记 2025/5/28 7:49:50

网络(三) 协议

目录 1. IP协议; 2. 以太网协议; 3. DNS协议, ICMP协议, NAT技术. 1. IP协议: 1.1 介绍: 网际互连协议, 网络层是进行数据真正传输的一层, 进行数据从一个主机传输到另一个主机. 网络层可以将数据主机进行传送, 那么传输层保证数据可靠性, 一起就是TCP/IP协议. 路径选择: 确…...

编程日记 2025/5/28 7:32:19

【mptcp】ubuntu18.04和MT7981搭建mptcp测试环境操作说明

目录安装ubuntu18.04，可以使用虚拟机安装... 2 点击安装VMware Tool 2 更新ubuntu18.04源... 4 安装ifconfig指令工具包... 5 安装vim工具包... 5...

编程日记 2025/5/22 22:00:17

递归的本质

字节面试题叠罗汉，很遗憾没想出来，看了答案挺巧妙的，但是居然是个案例题。。。复习一下递归的本质正面解决问题利用子问题来解决可以通过规约推导的，基本可以用递归解决！ 在写这道算法题时，我想规…...

编程日记 2025/5/28 2:11:25

如何使用tmux !

在tmux的界面按住shift，就可以和普通linux界面一样！！！！！！！！ 单击右键可以复制粘贴，滚动鼠标可以上下翻页！！！！…...

编程日记 2025/5/28 7:44:10

【Vim Masterclass 笔记25】S10L45：Vim 多窗口的常用操作方法及相关注意事项

文章目录 S10L45 Working with Multiple Windows1 水平分割窗口2 在水平分割的新窗口中显示其它文件内容3 垂直分割窗口4 窗口的关闭5 在同一窗口水平拆分出多个窗口6 关闭其余窗口7 让四个文件呈田字形排列8 光标在多窗口中的定位9 调节子窗口的尺寸大小10 变换子窗口的位置11…...

编程日记 2025/5/28 0:54:06

C语言练习（16）

猴子吃桃问题。猴子第一天摘下若干个桃子，当即吃了一半，还不过瘾，又多吃了一个。第二天早上又将剩下的桃子吃掉一半，又多吃了一个。以后每天早上都吃了前一天剩下的一半加一个。到第10天早上想再吃时，见只剩一个桃子了…...

编程日记 2025/5/27 10:34:33

【0x0012】HCI_Delete_Stored_Link_Key命令详解

目录一、命令参数二、命令格式及参数 2.1. HCI_Delete_Stored_Link_Key 命令格式 2.2. BD_ADDR 2.3. Delete_All 三、生成事件及参数 3.1. HCI_Command_Complete事件 3.2. Status 3.3. Num_Keys_Deleted 四、命令执行流程 4.1. 命令发送阶段 4.2. 控制器处理阶段…...

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

学习ASP.NET Core的身份认证（基于JwtBearer的身份认证10）

基于Cookie传递token的主要思路是通过用户身份验证后，将生成的token保存到Response.Cookies返回客户端，后续客户端访问服务接口时会自动携带Cookie到服务端以便验证身份。之前一直搞不清楚的是服务端程序如何从Cookie读取token进行认证（一般都…...

编程日记 2025/5/28 8:10:22

应用层协议 HTTP 讲解实战：从0实现HTTP 服务器

🌈 个人主页：Zfox_ 🔥 系列专栏：Linux 目录一：🔥 HTTP 协议 🦋 认识 URL🦋 urlencode 和 urldecode 二：🔥 HTTP 协议请求与响应格式 🦋 HTTP 请求…...

编程日记 2025/5/28 7:59:33

Linux权限管理：从用户切换到文件权限

在Linux系统中，权限管理是确保系统安全和资源合理分配的核心机制。它通过用户和用户组的管理、文件权限的设置以及特殊权限的使用，实现了对系统资源的精细控制。一、用户切换：su 和 sudo 1. 用户切换命令 su su（switch user&a…...

编程日记 2025/5/23 19:12:43

PyQt5超详细教程终篇

PyQt5超详细教程前言接： [【Python篇】PyQt5 超详细教程——由入门到精通（序篇）](【Python篇】PyQt5 超详细教程——由入门到精通（序篇）-CSDN博客) 建议把代码复制到pycahrm等IDE上面看实际效果，方便理…...

编程日记 2025/5/27 13:04:12

Alibaba Spring Cloud 四 Seata 的核心组件：TC

Seata 的 Transaction Coordinator (TC) 是分布式事务架构中的核心组件之一，它负责管理全局事务的生命周期，包括事务的创建、状态维护以及协调各分支事务的提交和回滚。以下是有关 TC 的详细解析及其配置和使用方法： 1. TC 的核心功能全局事…...

编程日记 2025/5/23 4:05:11

机器学习-线性回归（简单回归、多元回归）

这一篇文章，我们主要来理解一下，什么是线性回归中的简单回归和多元回归，顺便掌握一下特征向量的概念。一、简单回归简单回归是线性回归的一种最基本形式，它用于研究**一个自变量（输入）与一个因变量&…...

编程日记 2025/5/22 11:59:13

Java如何向http/https接口发出请求

用Java发送web请求所用到的包都在java.net下，在具体使用时可以用如下代码，你可以把它封装成一个工具类 import javax.net.ssl.*; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import java.io.Outpu…...

编程日记 2025/5/28 7:49:08

three.js+WebGL踩坑经验合集(1):THREE.Line无故消失的元凶

在项目开发过程中，笔者两次遇到同事的一个提问，我场景中的Line在相机旋转到某些角度或者移动到某些位置的时候会无故消失。由于业务场景复杂，所以这两位同事都是先花费了大量时间排查业务问题，然后才找我求助。这个问题抽象出来的…...

编程日记 2025/5/27 21:55:01

【ROS】RViz2源码分析（四）：初始化、启动

【ROS】郭老二博文之：ROS目录 1、简述 RViz2在main函数中，首先注册日志处理函数；将 RCLCPP_DEBUG 等日志记录函数，通过 rviz_common::set_logging_handlers() 注册到 rviz_common 中。然后，创建界面类 rviz_common::VisualizerApp，并执行初始化 vapp.init(argc, argv)…...

编程日记 2025/5/26 13:47:42

【MySQL】库的操作

欢迎拜访：雾里看山-CSDN博客本篇主题：【MySQL】库的操作发布时间：2025.1.23 隶属专栏：MySQL 目录库的创建语法使用编码规则认识编码集查看数据库默认的编码集和校验集查看数据库支持的编码集和校验集指定编码创建数据库验证不…...

编程日记 2025/5/28 8:24:16

豆包MarsCode 蛇年编程大作战 | 高效开发“蛇年运势预测系统”

🌟 嗨，我是LucianaiB！ 🌍 总有人间一两风，填我十万八千梦。 🚀 路漫漫其修远兮，吾将上下而求索。豆包MarsCode 蛇年编程大作战 | 🐍 蛇年运势预测在线体验地址：蛇年…...

编程日记 2025/5/28 6:56:57

新能源汽车充电桩选型以及安装应用

摘要:随着当前经济的不断发展,国家的科技也有了飞速的进步,传统的燃油汽车已经不能适应当前社会的发展,不仅对能源造成巨大的消耗,还对环境造成了污染,当前一种新型的交通运输工具正在占领汽车市场。在环境问题和能源问题愈发严重的当今社会,节能减排已经成为全世界的共同课题,…...

编程日记 2025/5/27 13:01:06

docker Ubuntu实战

目录 Ubuntu系统环境说明一、如何安装docker 二、发布.netcore应用到docker中三、查看docker信息 Ubuntu系统环境说明 cat /etc/os-release PRETTY_NAME"Ubuntu 22.04.5 LTS" NAME"Ubuntu" VERSION_ID"22.04" VERSION"22.04.5 LTS (…...

编程日记 2025/5/27 7:51:37

w-form-select.vue（自定义下拉框组件）(与后端字段直接相关性)

文章目录 1、w-form-select.vue 组件中每个属性的含义2、实例3、源代码 1、w-form-select.vue 组件中每个属性的含义好的，我们来详细解释 w-form-select.vue 组件中每个属性的含义，并用表格列出它们是否与后端字段直接相关： 属性解释表格&…...

编程日记 2025/5/27 5:50:20

深入探索 Nginx 的高级用法：解锁 Web 服务器的强大潜能

在当下互联网技术飞速发展的浪潮中，Nginx 凭借其轻量级、高性能的特性，在 Web 服务器和反向代理服务器领域脱颖而出，成为众多开发者和运维工程师的得力工具。它不仅能高效处理静态资源，在负载均衡、反向代理等方面也表现出色。然而…...

编程日记 2025/5/24 15:42:59

iOS开发设计模式篇第二篇MVVM设计模式

目录一、什么是MVVM 二、MVVM 的主要特点三、MVVM 的架构图四、MVVM 与其他模式的对比五、如何在iOS中实现MVVM 1.Model 2.ViewModel 3.View (ViewController) 4.双向绑定 5.文中完整的代码地址六、MVVM 的优缺点 1.优点 2.缺点七、MVVM 的应用场景八、结…...

编程日记 2025/5/28 1:55:42

kettle与Springboot的集成方法，完整支持大数据组件

目录概要整体架构流程技术名词解释技术细节小结概要在现代数据处理和ETL（提取、转换、加载）流程中，Kettle（Pentaho Data Integration, PDI）作为一种强大的开源ETL工具，被广泛应用于各种数据处理场景。…...

编程日记 2025/5/27 19:38:56