CSS Grid Level 2

CSS Grid Level 2 是对 CSS Grid Layout 的扩展和改进。下面是一些关于 CSS Grid Level 2 的说明、代码示例和使用场景:

说明:

  • 子网格(subgrid):CSS Grid Level 2 允许子网格与父网格的行和列对齐,使得嵌套网格更加灵活。子网格可以继承父网格的大小和间距,从而简化了布局的编写。
  • 显式网格行和列的重叠(explicit grid line overlap):CSS Grid Level 2 允许网格线重叠,从而实现更复杂的布局。通过指定重叠的网格线,可以创建更具创意的布局效果。
  • 网格轨道大小的动态调整(dynamic resizing of grid tracks):CSS Grid Level 2 提供了新的属性和函数,可以根据内容的大小自动调整网格轨道的大小。这样可以实现更灵活的网格布局,无需手动指定固定的网格轨道大小。
  • 改进的网格布局算法(improved grid layout algorithm):CSS Grid Level 2 提供了一些新的功能,例如网格线的自动命名、排除行和列等,以改善网格布局的自动化和对齐能力。

代码示例:

.parent {display: grid;grid-template-columns: 200px 1fr;grid-template-rows: 100px auto;gap: 20px;grid-template-areas: "header header""sidebar content";
}.child {grid-area: header;
}.subgrid {display: grid;grid-template-columns: subgrid;gap: 10px;
}.overlap {grid-column: 1 / span 2;grid-row: 1;
}.dynamic-sizing {grid-template-columns: minmax(100px, max-content);
}.naming {grid-template-rows: [row1-start] 50px [row1-end row2-start] 50px [row2-end];
}

使用场景:

  • 复杂布局:CSS Grid Level 2 的子网格和网格线重叠功能使得创建复杂的网格布局更加简单和灵活。例如,可以使用子网格创建具有复杂嵌套结构的网格布局,或使用网格线重叠实现特殊的布局效果。
  • 动态调整大小:通过使用 CSS Grid Level 2 提供的属性和函数,可以实现网格轨道根据内容自动调整大小的效果。这在需要根据内容变化而自适应的布局中非常有用,例如新闻网站的文章列表或相册网站的网格布局。
  • 自动命名和对齐:CSS Grid Level 2 提供了改进的网格布局算法,可以自动命名网格线并实现更精确的对齐。这在需要精确控制网格元素位置和对齐方式的布局中非常有用,例如网格图库或多列表格布局。

总体而言,CSS Grid Level 2 扩展了 CSS Grid Layout 的功能,使得网格布局更加灵活和强大。它适用于各种不同的布局需求,从简单的网格布局到复杂的自适应布局都可以使用 CSS Grid Level 2 来实现。建议深入学习和尝试这些新的功能,并查阅官方文档和教程,以便更好地理解和应用它们。

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

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

相关文章

Vue前后端跨域链接

前端更改访问方式 在vite.config.js文件设置映射的路径 export default defineConfig({plugins: [vue(),],resolve: {alias: {: fileURLToPath(new URL(./src, import.meta.url))}},server: {proxy: {/api: {target: http://localhost:8080,changeOrigin: true,rewrite: (pat…

vscode配置的C++环境

目录 1、下载并安装VScode 2、下载MinGW 3、配置MinGW 3.1添加环境变量 3.2 Vscode配置 3.3测试 1、下载并安装VScode Visual Studio Code - Code Editing. Redefined 2、下载MinGW 在MinGW官网MinGW-w64 - for 32 and 64 bit Windows - Browse /mingw-w64/mingw-w64-r…

List集合格式转换

最近遇到一个任务: 需要把A集合数据转成 B集合的形式: A集合: B集合: 代码: package com.example.juc.test;import com.example.juc.entity.Ld; import com.example.juc.entity.Student;import java.lang.reflect.F…

【Petalinux】制作SD卡 操作系统 启动

Vivado 添加 SD0 导出hdf 制作SD卡 https://mathd.blog.csdn.net/article/details/135217761 【Petalinux】下为空白SD卡建立BOOT,rootfs分区 Petalinux 生成 Petalinux 框架 petalinux-create --type project --template zynq --name sdtest进入 sdtest 文件…

Ksher H5页面支付实例指导 (PHP实现)

前文 背景介绍 前两天,公司的项目,为了满足泰国客户的支付需求,要求使用 Ksher (开时支付) 对接任务突然就给了鄙人,一脸懵 … 通过了解客户的使用场景、以及参考官网指导 发现:Ksher支付 最令人满意的便是 —— 提供了…

【网络安全/CTF】easyphp 江苏工匠杯

本题考察PHP语言相关绕过知识 正文 开门见山给代码 <?php highlight_file(__FILE__); $key1 0; $key2 0;$a $_GET[a]; $b $_GET[b];if(isset($a) && intval($a) > 6000000 && strlen($a) < 3){if(isset($b) && 8b184b substr(md5($b),…

【Java】如何给你的图片添加自定义水印(附完整代码)?

这是一篇关于怎么尽可能的用尽你电脑里的所有字体给你的图片加水印。。。。 先上效果~ 当然这只是其中一部分字体&#xff0c;&#xff0c;&#xff0c;我也是今天才发现我电脑里居然装了那么多字体 好了废话不多说直接上完整代码~ import io.swagger.models.auth.In;import …

循环生成对抗网络(CycleGAN)

一、说明 循环生成对抗网络&#xff08;CycleGAN&#xff09;是一种训练深度卷积神经网络以执行图像到图像翻译任务的方法。网络使用不成对的数据集学习输入和输出图像之间的映射。 二、基本介绍 CycleGAN 是图像到图像的翻译模型&#xff0c;就像Pix2Pix一样。Pix2Pix模型面临…

软件测试/测试开发丨Python 内置库 sys 学习笔记分享

sys 概述 是 Python 自带的内置模块是与 Python 解释器交互的桥梁 sys 使用 常用属性常用方法导入 sys 模块 # 导入sys模块 import sys# 查看sys模块帮助文档 help(sys)# 查看sys模块的属性和方法 print(dir(sys))sys 常用属性 sys.version&#xff1a;返回 Python 解释器…

软件测试/测试开发丨Python 面向对象编程思想

面向对象是什么 Python 是一门面向对象的语言面向对象编程&#xff08;OOP&#xff09;&#xff1a;Object Oriented Programming 所谓的面向对象&#xff0c;就是在编程的时候尽可能的去模拟真实的现实世界&#xff0c;按照现实世界中的逻辑去处理问题&#xff0c;分析问题中…

SpringBoot 实现订单30分钟自动取消的策略

简介 在电商和其他涉及到在线支付的应用中&#xff0c;通常需要实现一个功能&#xff1a;如果用户在生成订单后的一定时间内未完成支付&#xff0c;系统将自动取消该订单。 本文将详细介绍基于Spring Boot框架实现订单30分钟内未支付自动取消的几种方案&#xff0c;并提供实例…

【每日试题】java面试之ssm框架

以下是20道常见的SSM&#xff08;SpringSpring MVCMyBatis&#xff09;面试题目和答案&#xff1a; 什么是SSM框架&#xff1f; SSM是指SpringSpring MVCMyBatis的组合&#xff0c;它是Java Web开发中常用的轻量级框架集合。 介绍一下SSM框架各个组件的作用&#xff1f; Sprin…

AI电商时代开始:阿里能否反杀拼多多

“AI电商时代刚刚开始&#xff0c;对谁都是机会&#xff0c;也是挑战。” 针对阿里员工对于拼多多财报和电商等的讨论&#xff0c;马云在阿里内网罕见地参与了谈论并发言。 阿里巴巴一向雷厉风行&#xff0c;已打响了AI电商的“第一炮”。 根据《晚点LatePost》报道&#xff…

C# vs报错 id为XX的进程当前未运行

报错原因&#xff1a;虚拟目录端口被占用 解决方法&#xff1a;重新配置新的目录端口就行 1、选择项目属性 2、更改端口号&#xff0c;点击创建虚拟目录 3、重新生成项目

ISP 基础知识积累

Amber&#xff1a;现有工作必要的技术补充&#xff0c;认识需要不断深入&#xff0c;这个文档后续还会增加内容进行完善。 镜头成像资料 ——干货满满&#xff0c;看懂了这四篇文章&#xff0c;下面的问题基本都能解答 看完思考 1、ISP 是什么&#xff0c;有什么作用&#xff…

PHP实现多继承

php支持多继承吗 不可以,只支持单继承。 可以使用 interface 或 trait 实现 。 实现方法 https://www.php.cn/faq/430197.html https://blog.58heshihu.com/index.php/archives/2288/

C++实现定积分运算

文章目录 题目代码 题目 代码 #include <iostream> #include <cmath> #include <functional>using namespace std;// 定积分函数 double integrate(function<double(double)> func, double a, double b, int num_intervals) {double h (b - a) / num…

Cisco无线Mobility Express配置Image TFTP服务器

思科的无线AP&#xff1a; 1800&#xff0c; 2800&#xff0c; 3800系列 这一类的AP本身可以做为无线控制器使用&#xff0c;被称为Mobility Express&#xff0c;简称为ME 可以管理多少AP 最多可管理 25个 是否需要license才能管理 不需要license 支持哪些型号的AP注册 只要…

浅谈冯诺依曼体系和操作系统

&#x1f30e;冯诺依曼体系结构 文章目录 冯诺依曼体系结构 认识冯诺依曼体系结构       硬件分类       各个硬件的简单认识         输入输出设备         中央处理器         存储器 关于内存 对冯诺依曼体系的理解 操作系统 操作系统…

成立一个理解起来很直观的 cpu cmodel 项目

a intuitionistic cpu project, 项目名称&#xff1a; intt-cpu 项目的几个原则或目标&#xff1a; 1&#xff0c;完整的cpu功能 2&#xff0c;不追求或性能&#xff0c;但追求 cpu 实现代码上的直观 3&#xff0c;得到 Linux 的架构 4&#xff0c;得到 llvm 编译器支持的…