CSS系列(35)-- Subgrid详解

前端技术探索系列:CSS Subgrid详解 📐

致读者:探索子网格布局的艺术 👋

前端开发者们,

今天我们将深入探讨 CSS Subgrid,这个强大的网格布局扩展特性。

基础概念 🚀

子网格设置

/* 父网格 */
.parent-grid {display: grid;grid-template-columns: repeat(12, 1fr);grid-template-rows: auto auto;gap: 20px;
}/* 子网格 */
.child-grid {grid-column: 2 / 12;display: grid;grid-template-columns: subgrid;grid-template-rows: subgrid;
}/* 混合使用 */
.mixed-grid {grid-column: 1 / -1;display: grid;grid-template-columns: subgrid;grid-template-rows: auto auto;  /* 独立行定义 */
}

对齐控制

/* 网格对齐 */
.aligned-grid {display: grid;grid-template-columns: subgrid;align-items: center;justify-items: start;
}/* 内容对齐 */
.content-grid {display: grid;grid-template-columns: subgrid;align-content: space-between;justify-content: space-around;
}/* 单元格对齐 */
.grid-item {align-self: stretch;justify-self: center;
}

高级特性 🎯

嵌套布局

/* 多层嵌套 */
.nested-grid {display: grid;grid-template-columns: repeat(3, 1fr);
}.level-1 {grid-column: 1 / -1;display: grid;grid-template-columns: subgrid;
}.level-2 {grid-column: span 2;display: grid;grid-template-columns: subgrid;grid-template-rows: subgrid;
}/* 混合布局 */
.hybrid-grid {grid-column: 1 / -1;display: grid;grid-template-columns: subgrid;grid-template-rows: minmax(100px, auto)subgrid;
}

响应式设计

/* 基础响应式 */
.responsive-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}.responsive-subgrid {grid-column: 1 / -1;display: grid;grid-template-columns: subgrid;
}/* 断点适配 */
@media (min-width: 768px) {.adaptive-grid {grid-template-columns: repeat(12, 1fr);}.adaptive-subgrid {grid-column: 3 / 11;grid-template-columns: subgrid;}
}

实际应用 💫

卡片布局

/* 卡片网格 */
.card-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 20px;
}.card {display: grid;grid-template-columns: subgrid;grid-template-rows: auto 1fr auto;
}.card-header {grid-column: 1 / -1;
}.card-content {display: grid;grid-template-columns: subgrid;grid-template-rows: subgrid;
}

表单布局

/* 表单网格 */
.form-grid {display: grid;grid-template-columns: auto 1fr;gap: 1rem;
}.form-group {grid-column: 1 / -1;display: grid;grid-template-columns: subgrid;
}.form-label {grid-column: 1;align-self: center;
}.form-input {grid-column: 2;
}

布局模式 ⚡

圣杯布局

/* 现代圣杯布局 */
.holy-grail {display: grid;grid-template-columns: minmax(150px, 1fr) minmax(auto, 3fr) minmax(150px, 1fr);grid-template-rows: auto 1fr auto;
}.content-area {grid-column: 2;display: grid;grid-template-columns: subgrid;grid-template-rows: subgrid;
}/* 响应式调整 */
@media (max-width: 768px) {.holy-grail {grid-template-columns: 1fr;}.content-area {grid-column: 1 / -1;}
}

仪表板布局

/* 仪表板网格 */
.dashboard {display: grid;grid-template-columns: repeat(12, 1fr);grid-template-rows: auto 1fr auto;gap: 1rem;
}.widget {grid-column: span 3;display: grid;grid-template-columns: subgrid;grid-template-rows: auto 1fr;
}.widget-content {display: grid;grid-template-columns: subgrid;grid-template-rows: subgrid;
}

最佳实践建议 💡

  1. 布局策略

    • 合理嵌套
    • 响应式设计
    • 语义化结构
    • 维护性考虑
  2. 性能优化

    • 控制嵌套层级
    • 避免过度使用
    • 合理分组
    • 优化重排
  3. 开发建议

    • 模块化设计
    • 复用布局
    • 文档完善
    • 测试验证
  4. 兼容处理

    • 特性检测
    • 降级方案
    • 渐进增强
    • 浏览器支持

写在最后 🌟

CSS Subgrid为我们提供了创建复杂布局的强大能力,通过合理运用这一特性,我们可以创建出更加灵活和可维护的布局系统。

进一步学习资源 📚

  • Subgrid规范
  • 布局模式集合
  • 最佳实践指南
  • 实战案例展示

如果你觉得这篇文章有帮助,欢迎点赞收藏,也期待在评论区看到你的想法和建议!👇

终身学习,共同成长。

咱们下一期见

💻

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实训项目-人力资源管理系统-1Company子模块

目录 前言: 用例图设计: 系统设计 开发方式: 技术架构 系统结构: API文档: 工程搭建: 搭建父项目 pom: 创建公共子模块: 返回实体: 分布式id生成器: …

2.5.3 文件使用、共享、保护、安全与可靠性

文章目录 文件使用文件共享文件保护系统安全与可靠性 文件使用 操作系统向用户提供操作级、编程级文件服务。 操作级服务包括目录管理,文件操作(复制、删除、修改),文件管理(设置文件权限)。 编程级服务包括…

路由器转发数据报的封装过程

✍作者:柒烨带你飞 💪格言:生活的情况越艰难,我越感到自己更坚强;我这个人走得很慢,但我从不后退。 📜系列专栏:网路安全入门系列 目录 路由器转发数据的封装过程 路由器转发数据的封…

Qt5 cmake引用private头文件

Qt5 cmake引用private头文件 如何引用Qt的qzipreader_p.h头文件 、xlsxzipreader_p.h头文件 使用 target_include_directories target_include_directories(TestQtXlsx PRIVATE${Qt${QT_VERSION_MAJOR}Gui_PRIVATE_INCLUDE_DIRS}${Qt${QT_VERSION_MAJOR}Xlsx_PRIVATE_INCLUD…

vulnhub matrix-breakout靶机

1.搭建靶机 这样就是装好了 获取靶机IP nmap -O 192.168.47.129/24 2.信息收集 dirb http://192.168.47.128 dirb 首页 81端口一个登录页面 gobuster dir -u http://192.168.152.154 -w /usr/share/wordlists/dirbuster/directory-list-2.3-medium.txt -x php,txt,html gra…

前端文件导出到Excel文件实用案例:VUE3,ElementPlus,typescript。直接复制可用~~

typescript import * as XLSX from "xlsx"; //1、文件导出的主要方法 /*** 将数据表导出为Excel文件,并根据提供的映射替换表头和排序(如果提供了映射)* param dataTable 数据表,包含要导出的数据* param fileName 导出…

HNUST-数据分析技术课堂实验

1.要求 1,从下列第一、二、三组实验中各至少选取一个算法进行实验,选修组实验不作强制要求;2,实验过程不限,目标在于锻炼算法实现过程,即可采用C、C、Java、Python(建议)等任意语言编…

华为路由器AR101W-S

华为路由器AR101W-S的设定 华为路由器AR101W-S的设定 1、第一次进入登陆的界面 http://192.168.1.1/,默认的帐号:admin,默认的密码:Adminhuawei,登入后会要求修改密码 如果无法进入网址,请操作下面的内…

微信小程序 不同角色进入不同页面、呈现不同底部导航栏

遇到这个需求之前一直使用的小程序默认底部导航栏,且小程序默认入口页面为pages/index/index,要使不同角色呈现不同底部导航栏,必须要在不同页面引用不同的自定义导航栏。本篇将结合分包(subPackages)展开以下三步叙述…

【西安电子科技大学考研】25官方复试专业课参考书目汇总

初试已经顺利考完啦、成绩已经公布,现在已经有很多同学来问学长学姐,复试参考书有哪些,复试应该做好哪些准备。故此学长学姐给大家整理好了西安电子科技大学各个学院的复试参考书目录,有需要的同学可以参考一下哈。大家可以结合本…

如何通过 Kafka 将数据导入 Elasticsearch

作者:来自 Elastic Andre Luiz 将 Apache Kafka 与 Elasticsearch 集成的分步指南,以便使用 Python、Docker Compose 和 Kafka Connect 实现高效的数据提取、索引和可视化。 在本文中,我们将展示如何将 Apache Kafka 与 Elasticsearch 集成以…

LLaMA-Factory GLM4-9B-CHAT LoRA 微调实战

🤩LLaMA-Factory GLM LoRA 微调 安装llama-factory包 git clone --depth 1 https://github.com/hiyouga/LLaMA-Factory.git进入下载好的llama-factory,安装依赖包 cd LLaMA-Factory pip install -e ".[torch,metrics]" #上面这步操作会完成…

view draw aosp15

基础/背景知识 如何理解Drawable? 在 Android 中,Drawable 是一个抽象的概念,表示可以绘制到屏幕上的内容。 它可以是位图图像、矢量图形、形状、颜色等。 Drawable 本身并不是一个 View,它不能直接添加到布局中,而是…

gridcontrol表格某一列设置成复选框,选择多行(repositoryItemCheckEdit1)

1. 往表格中添加repositoryItemCheckEdit1 2. 事件: repositoryItemCheckEdit1.QueryCheckStateByValue repositoryItemCheckEdit1_QueryCheckStateByValue; private void repositoryItemCheckEdit1_QueryCheckStateByValue(object sender, DevExpress.XtraEditor…

重温设计模式--适配器模式

文章目录 适配器模式(Adapter Pattern)概述适配器模式UML图适配器模式的结构目标接口(Target):适配器(Adapter):被适配者(Adaptee): 作用&#xf…

C语言项目 天天酷跑(上篇)

前言 这里讲述这个天天酷跑是怎么实现的,我会在天天酷跑的下篇添加源代码,这里会讲述天天酷跑这个项目是如何实现的每一个思路,都是作者自己学习于别人的代码而创作的项目和思路,这个代码和网上有些许不一样,因为掺杂了…

公交车信息管理系统:构建智能城市交通的基石

程序设计 本系统主要使用Java语言编码设计功能,MySQL数据库管控数据信息,SSM框架创建系统架构,通过这些关键技术对系统进行详细设计,设计和实现系统相关的功能模块。最后对系统进行测试,这一环节的结果,基本…

MDS-NPV/NPIV

在存储区域网络(SAN)中,域ID(Domain ID)是一个用于区分不同存储区域的关键参数。域ID允许SAN环境中的不同部分独立操作,从而提高效率和安全性。以下是关于域ID的一些关键信息: 域ID的作用&…

【网络安全产品大调研系列】1. 漏洞扫描

1. 为什么会出现漏扫技术? 每次黑客攻击事件进行追溯的时候,根据日志分析后,我们往往发现基本都是系统、Web、 弱口令、配置这四个方面中的其中一个出现的安全问题导致黑客可以轻松入侵的。 操作系统的版本滞后,没有更新补丁&am…

验证 Dijkstra 算法程序输出的奥秘

一、引言 Dijkstra 算法作为解决图中单源最短路径问题的经典算法,在网络路由、交通规划、资源分配等众多领域有着广泛应用。其通过不断选择距离源节点最近的未访问节点,逐步更新邻居节点的最短路径信息,以求得从源节点到其他所有节点的最短路径。在实际应用中,确保 Dijkst…