CSS Grid布局:从入门到实战

CSS Grid布局:从入门到实战

一、初识Grid布局

还在为网页布局发愁吗?Flexbox虽然好用,但当遇到复杂布局时,CSS Grid才是真正的王者。Grid布局是CSS中最强大的二维布局系统,它就像一张无形的网格纸,让我们可以精准控制每个元素的位置。

.container {display: grid;grid-template-columns: 100px 200px auto;grid-template-rows: 80px auto 60px;gap: 15px;
}

这段简单的代码就创建了一个3列3行的网格系统,是不是很像Excel表格?但Grid可比Excel灵活多了!

二、核心概念解析

1. 网格容器(Grid Container)

就像Flexbox需要一个flex容器一样,Grid布局也需要一个容器元素:

<div class="grid-container"><div class="item1">1</div><div class="item2">2</div><!-- 更多子元素 -->
</div>

2. 网格线(Grid Lines)

网格线是Grid布局的精髓所在。想象一下,网格中的垂直线和水平线都有编号,我们可以通过这些线号来定位元素。

3. 网格轨道(Grid Tracks)

轨道就是相邻两条网格线之间的空间,可以是行轨道(row track)或列轨道(column track)。

三、常用属性详解

1. 定义网格

.grid-container {display: grid;grid-template-columns: 1fr 2fr 1fr; /* 三列,比例1:2:1 */grid-template-rows: 100px auto 50px; /* 三行 */gap: 10px; /* 行列间距 */
}

fr单位是Grid特有的,表示剩余空间分配比例。

2. 项目定位

.item1 {grid-column: 1 / 3; /* 从第1列线到第3列线 */grid-row: 1; /* 占据第1行 */
}.item2 {grid-area: 2 / 2 / 4 / 3; /* 简写:行开始/列开始/行结束/列结束 */
}

四、实战案例

1. 经典三栏布局

.layout {display: grid;grid-template-areas:"header header header""sidebar main ads""footer footer footer";grid-template-columns: 200px 1fr 200px;grid-template-rows: auto 1fr auto;height: 100vh;
}.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.ads { grid-area: ads; }
.footer { grid-area: footer; }

2. 响应式图片墙

.gallery {display: grid;grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));gap: 15px;
}@media (max-width: 600px) {.gallery {grid-template-columns: 1fr;}
}

五、Grid布局小技巧

  1. 命名网格线:给网格线起名字更方便定位

    grid-template-columns: [start] 1fr [center] 1fr [end];
    
  2. 隐式网格:当项目超出定义的范围时自动创建

    grid-auto-rows: minmax(100px, auto);
    
  3. 对齐方式

    justify-items: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    

六、Grid vs Flexbox

  • Flexbox:适合一维布局(行或列)
  • Grid:适合二维布局(行和列)

两者不是竞争关系,而是互补关系。在实际项目中,我经常在Grid容器中使用Flexbox来排列子元素。

七、浏览器兼容性

现代浏览器对Grid的支持已经相当完善,包括Edge、Firefox、Chrome、Safari等。对于旧版浏览器,可以使用特性查询(@supports)提供回退方案。

@supports (display: grid) {/* Grid布局样式 */
}

八、总结

CSS Grid布局彻底改变了我们对网页布局的认知。从简单的网格系统到复杂的响应式设计,Grid都能游刃有余。虽然学习曲线略陡峭,但一旦掌握,你会发现它比传统的浮动、定位布局高效得多。

建议从简单的布局开始练习,逐步尝试更复杂的场景。记住,实践是最好的老师!

小贴士:Chrome浏览器的开发者工具中有强大的Grid调试功能,可以帮助你直观地看到网格线,是学习Grid的绝佳帮手。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/267.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

[Linux] vim及gcc工具

目录 一、vim 1.vim的模式 2.vim的命令集 (1):命令模式 (2):底行模式 3.vim配置 二、gcc 1.gcc格式及选项 2.工作布置 三、自动化构建工具makefile 1.基本使用方法 2.配置文件解析 3.拓展 在linux操作系统的常用工具中&#xff0c;常用vim来进行程序的编写&#xff1b…

LLaMA-Factory 微调 Qwen2-7B-Instruct

一、系统环境 使用的 autoDL 算力平台 1、下载基座模型 pip install -U huggingface_hub export HF_ENDPOINThttps://hf-mirror.com # &#xff08;可选&#xff09;配置 hf 国内镜像站huggingface-cli download --resume-download shenzhi-wang/Llama3-8B-Chinese-Chat -…

Hapi.js知识框架

一、Hapi.js 基础 1. 核心概念 企业级Node.js框架&#xff1a;由Walmart团队创建&#xff0c;现由社区维护 配置驱动&#xff1a;强调声明式配置而非中间件 插件架构&#xff1a;高度模块化设计 安全优先&#xff1a;内置安全最佳实践 丰富的生态系统&#xff1a;官方维护…

串口模块详细讲解

目录 1.串口介绍 2。STC-ISP串口功能介绍 3.接口及引脚定义 4.串口知识点 4.1 硬件电路 4.2 电平标准 4.3 相关术语 4.4 常见通信接口比较 4.5 51单片机的UART 4.6 串口参数及时序图 4.7 串口模式图 4.8 串口和中断系统 4.9 串口相关寄存器 5.串口向电脑发送信息…

计算机视觉----时域频域在图像中的意义、傅里叶变换在图像中的应用、卷积核的频域解释

1、时域&#xff08;时间域&#xff09;——自变量是时间,即横轴是时间,纵轴是信号的变化。其动态信号x&#xff08;t&#xff09;是描述信号在不同时刻取值的函数。 2、频域&#xff08;频率域&#xff09;——自变量是频率,即横轴是频率,纵轴是该频率信号的幅度,也就是通常说…

鸿蒙 核心与非核心装饰器

HarmonyOS NEXT 版本中完整的 ArkTS 装饰器分类整理&#xff08;含核心与非核心装饰器&#xff0c;已剔除废弃特性&#xff09; 一、核心装饰器&#xff08;Essential Decorators&#xff09; 1. 组件基础 装饰器功能Entry应用入口组件&#xff0c;每个模块必须且仅有一个&am…

Spring Boot之Web服务器的启动流程分析

如何判断创建哪种web容器&#xff1a;servlet&#xff1f;reactive&#xff1f; 我们在启动Spring Boot程序的时候&#xff0c;会使用SpringApplication.run方法来启动&#xff0c;在启动流程中首先要判断的就是需要启动什么类型的服务器&#xff0c;是servlet&#xff1f;或者…

影刀RPA开发-采集爬取京东读书书籍

1.采集京东读书 我们先梳理下操作流程 首先&#xff0c;在首页输入要爬取的书籍名称&#xff0c;输入后&#xff0c;搜索 出现搜索结果后&#xff0c;会有很多版本的书籍 我们点击热门筛选&#xff0c;让书记排序&#xff0c;这样可以将最符合我们需求的书籍显示在第一位 点击…

VScode 的插件本地更改后怎么生效

首先 vscode 的插件安装地址为 C:\Users\%USERNAME%\.vscode\extensions 找到你的插件包进行更改 想要打印日志&#xff0c;用下面方法 vscode.window.showErrorMessage(console.log "${name}" exists.); 打印结果 找到插件&#xff0c;点击卸载 然后点击重新启动 …

前端项目2-01:个人简介页面

目录 一.代码显示 二.效果图 三.代码分析 1. 文档声明和 HTML 基本结构 2. CSS 样式部分 全局样式 body 样式 页面主要容器 box 样式 左侧区域 l 样式 右侧区域 r 样式 左侧区域中头像容器 to 样式 头像图片样式及悬停效果 左侧区域中个人信息容器 tit 样式 个人…

针对面试-mysql篇

1.如何定位慢查询? 1.1.介绍一下当时产生问题的场景(我们当时的接口测试的时候非常的慢&#xff0c;压测的结果大概5秒钟))&#xff0c;可以监测出哪个接口&#xff0c;最终因为是sql的问题 1.2.我们系统中当时采用了运维工具(Skywalkin就是2秒&#xff0c;一旦sql执行超过2秒…

无偿帮写毕业论文

以下教程教你如何利用相关网站和AI免费帮你写一个毕业论文。毕竟毕业论文只要过就行&#xff0c;脱产学习这么多年&#xff0c;终于熬出头了&#xff0c;完成毕设后有空就去多看看亲人好友&#xff0c;祝好&#xff01; 一、找一个论文模板(最好是overleaf) 废话不多说&#…