新手学EasyUI（八）----SubGrid三级嵌套

在EasyUi中有一种表格可以满足上面的样式—–SubGrid表格 ?

你现在可以玩下这 5 个 CSS 新功能

有许多值得一提的 CSS 新功能，但是在本文中，我们重点介绍可以浏览器的稳定版中进行测试的五个功能： CSS Subgrid (子网格) flex gaps content-visibility 属性 1.CSS Subgrid CSS 网格是一个灵活的布局模块，允许开发人员创建复杂的布局，无需使用JavaScript或使用复杂的 CSS hack。 这就是CSS Subgrid 发挥作用的地方。 可以向网格项目添加以下规则，以使其能够采用其父级的网格轨道（包括名称网格线和区域，即使它也可以定义自己的网格轨道和区域）。 ; grid-template-rows: subgrid; } grid-column和grid-row属性定义了网格项目在网格列或行中的位置。 如上所见，subgrid 不是独立的CSS属性，而是可以添加到grid-template-columns和grid-template-rows属性的值。

grid常用设置

父元素 1.dispaly: grid | inline-grid | subgrid; grid: 生成块级网格 inline-grid: 生成行内网格 subgrid: 如果网格容器本身是网格项

5 个 CSS 新功能

有许多值得一提的 CSS 新功能，但是在本文中，我们重点介绍可以浏览器的稳定版中进行测试的五个功能： CSS Subgrid (子网格) flex gaps content-visibility 属性 1.CSS Subgrid CSS 网格是一个灵活的布局模块，允许开发人员创建复杂的布局，无需使用JavaScript或使用复杂的 CSS hack。 这就是CSS Subgrid 发挥作用的地方。 可以向网格项目添加以下规则，以使其能够采用其父级的网格轨道（包括名称网格线和区域，即使它也可以定义自己的网格轨道和区域）。 ; grid-template-rows: subgrid; } grid-column和grid-row属性定义了网格项目在网格列或行中的位置。 如上所见，subgrid 不是独立的CSS属性，而是可以添加到grid-template-columns和grid-template-rows属性的值。

2020全球CSS报告，目前最流行的布局，最前沿的特性以及前沿的技术库

还有像 Subgrid[11] 和 Multi-Column Layout[12] 你可能不熟悉。 但是相信如果看过 今年2020 web.dev live 的小伙伴一定记得 Ten modern layouts in one line of CSS[13] ，里面就大量使用了 Subgrid 的特性 [9] Fantasai: http://fantasai.inkedblade.net/ [10] Kilian Valkhof: https://kilianvalkhof.com/ [11] Subgrid : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid [12] Multi-Column Layout:

精读《State of CSS 2022》

override { .title { color: white; } } @layer framework { .title { color: red; } } subgrid subgrid 解决 grid 嵌套 grid 时，子网格的位置、轨迹线不能完全对齐到父网格的问题。 只要在子网格样式做如下定义： .sub-grid { display: grid; grid-template-columns: subgrid; grid-template-rows: subgrid 但也有很多能力依赖浏览器实现，或者本身更适合实现在 CSS 侧，比如 @scope、subgrid、对颜色的处理等。

2023 年了解即将推出的 CSS 功能

以下是如何创建子网格的示例： .my-grid { display: grid; grid-template-columns: repeat(2, 1fr); } .my-subgrid { display: grid; grid-template-columns: repeat(2, 50px); } .my-grid > .my-subgrid { grid-column: 1 / 2; } Grid Container Column 1 Subgrid Row 1 Row

关于使用现代CSS新特性布局嵌套评论组件的尝试，希望对你有所启发

评论包装器布局 - 使用CSS Subgrid 另一个解决方案是使用CSS子网格（subgrid）来构建嵌套评论布局。坦率地说，这将需要更多的CSS代码，但是探索新的CSS特性的潜力是非常有趣的。 让我简要地解释一下子网格（subgrid）来给您一个概念。考虑以下CSS网格：

• <! 幸好，CSS子网格（subgrid）使得这种操作成为可能。目前，它仅在Firefox和Safari浏览器中可用。Chrome浏览器也在朝这个方向发展！ nested: true) { ul[depth="1"] { grid-column: 2 / 4; display: grid; grid-template-columns: subgrid ; > li { grid-column: 1 / 3; display: grid; grid-template-columns: subgrid;

揭秘 Google I/O Web 新动态，看这一篇就够了！

subgrid CSS 网格布局规范的第一级在 2017 年实现了互操作性，网格布局本身是 Baseline Widely Available 的一部分，现在你可以非常放心地使用它。 早期的网格布局规范中有一个部分被移除，以便实现其余的规范，那就是 subgrid 子网格的概念，即嵌套网格布局能够继承其父网格的轨道。 关于 subgrid 的示例请移步：CSS subgrid[14] 在 2023 年的 State of CSS 调查中，subgrid 在关于浏览器不兼容性问题的回答中排名第四，因此它也被添加到 Interop CSS subgrid 在 2023 年 9 月，成为 Baseline Newly Available，将在 2026 年 3 月成为 Baseline Widely Available。 : https://web.dev/articles/css-subgrid [15] search MDN: https://developer.mozilla.org/en-US/docs/Web/

利好前端开发！Chrome/Edge/Firefox/Safari 决定合力解决 Web 兼容性问题 ！

Subgrid（子网格） Subgrid 可轻松将网格容器的后代元素放置在该网格上，在跨复杂布局排列项目时无需考虑 DOM 结构。 比如下面三个卡片组件的页眉和页脚都对齐了，即使每张卡片都有独立的网格（grid），这是因为每张卡片都是跨越父网格的三行项目，然后使用子网格 Subgrid 将这些行继承到每个卡片中。

前端食堂技术周刊第 64 期：Node.js19、Interop 2022、SvelteKit1.0、2022 Web 性能回顾

layers[5] 主要的浏览器(Chrome、Firefox、Edge、Safari)目前都已支持，Firefox 还剩一些测试工作 The dialog element[6] 主要的浏览器目前都已支持 Subgrid Cascade_layers [6] The dialog element: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/dialog [7] Subgrid : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Subgrid [8] Viewport units: https:

WWDC 2022：哪些是前端开发者要关注的信息？

然而，Subgrid 将 Grid 带到了另一个层次，它使得跨复杂布局排列项目成为可能，而不受 HTML 结构的限制。 20px; } .item { display: grid; grid-column: 2 / 7; grid-row: 2 / 4; grid-template-columns: subgrid ; grid-template-rows: subgrid; row-gap: 0; } .subitem { grid-column: 3 / 6; grid-row: 1 / 3;

【说站】css中grid布局的使用

css中grid布局的使用 说明 1、通过display属性设置属性值为grid或inline-grid或者是subgrid就可以了。

leetcode-840-Magic Squares In Grid

(Each subgrid is contiguous). Example 1: Input: [[4,3,8,4], [9,5,1,9], [2,7,6,2]] Output: 1 Explanation: The following subgrid

2020年你不应该错过的CSS新特性

有了subgrid之后，在嵌套网格的时候，我们就可以在grid-template-columns和grid-template-rows设置subgrid。 在我们平时的一些UI布局中，subgrid就可以用得上了： 我们一起来看一个subgrid的具体实例(https://codepen.io/antonjb/pen/rNNgxWV)。 注意，请使用Firefox 71+查看上面的Demo，看到的效果如下： subgrid和grid一样，是一套复杂的体系，如果要说清楚subgrid的话，可能会要多文章文章才能讲清楚。 如果你对subgrid感兴趣的话，还可以阅读下面这几篇文章： CSS Grid Layout Module Level 2: subgrid(https://drafts.csswg.org/css-grid -2/#subgrids) Hello subgrid!

回溯法解数独

board[i][col])) {return false;}}return true;}private static boolean isValidSubgrid(int[][] board, int subgrid ) {int rowOffset = (subgrid / 3) * 3;int colOffset = (subgrid % 3) * 3;Set<Integer> set = new HashSet

为未知而设计：响应式设计与CSS新技术演进

没有通常行容器的传统Grid布局在创建允许内容演进的设计方面，这是一个巨大的进步，但灵活设计的真正改变者是CSS Subgrid。还记得那些精心制作完美对齐界面的日子吗？ 无法响应同级元素内容变化的卡片Subgrid允许元素响应其自身内容和同级元素内容的调整，帮助我们创建更能适应变化的设计。 同时，Subgrid允许我们创建可以适应变形内容的设计。在撰写本文时，Subgrid仅在Firefox中受支持，但上述代码可以通过@supports特性查询实现。 毕竟，为未知或意外设计，我们需要考虑内容变化，就像我们之前的Subgrid卡片示例那样，允许卡片响应其自身内容和同级元素内容的调整。 Subgrid和伪元素如::first-line和::first-letter有助于将设计与标记分离，这样我们就可以创建允许更改的设计。

CSS终于不再是痛点:2026年这7个特性让你删掉一半JavaScript

四、Subgrid:嵌套布局终于不再反人类 你是否遇到过这种情况? Subgrid:子Grid继承父Grid .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .product-card { display: grid; grid-template-columns: subgrid; /* 继承父Grid的列定义 */ grid-template-rows 有了Subgrid: 商品1: 商品2: 商品3: ┌─────────┐ ┌─────────┐ ┌─────────┐ │ 图片 │ 行动建议 重构你的卡片组件、媒体列表组件,把对齐问题交给Subgrid解决。 特别是电商场景下的商品列表、文章列表等,Subgrid能让你的代码减少30%以上。

CSS布局新方案——Grid 网格布局

track-size>：可以是一个长度值（px em等）、百分比或者是网格中自由空间的一部分(fr为单位，类似于Flexbox里面的 flex-basis 的值) <line-name>：你选择的任意名称 subgrid 你可以使用此属性指定行和列的大小继承于父元素而不是自身指定（一般很少会用） .container { grid-template-columns: <track-size> ... | <line-name> <track-size> ... | subgrid ; grid-template-rows: <track-size> ... | <line-name> <track-size> ... | subgrid; } .container{ + grid-template-areas + grid-auto-rows + grid-auto-columns + grid-auto-flow 属性值： none：将所有的子属性设置为初始值 subgrid ：将 grid-template-rows 和 grid-template-columns 的值设置为 subgrid（继承来自父元素的设置），其余子属性值为初始值 <grid-template-rows

2022 年的 CSS 全览

子网格（subgrid） 浏览器支持： 在subgrid之前，另一个网格中的网格无法与其父单元格或网格线对齐。每个网格布局都是独一无二的。 在subgrid之后，网格的子网格可以将其父网格的列或行作为自己的列或行，并将其自身或子网格与它们对齐！ 然后，body 中的每个元素，