首页 > web前端 > css教程 > CSS Grid 的格式化上下文能达到多远?

CSS Grid 的格式化上下文能达到多远?

Mary-Kate Olsen
发布: 2024-12-17 19:33:12
原创
465 人浏览过

How Far Does CSS Grid's Formatting Context Reach?

网格容器范围限制

在 CSS 网格中,格式化上下文仅限于网格容器内的父子关系。网格属性仅适用于其直接子级。

请考虑以下示例:

<ul>
登录后复制

此处,orgChartLevel1 是网格容器,orgChartLevel1a、orgChartLevel2 和 orgChartLevel2b 是其范围内的子级。

但是,作为网格容器后代的元素,例如作为 orgChartLevel2b,位于网格格式化上下文之外。应用于这些元素的网格属性将不起作用。

解决方案

要将网格属性应用于深度嵌套元素,您必须:

<ul>
  • 将 display: grid 或 display: inline-grid 应用于网格容器内的父级。
  • 删除任何内容网格容器和要应用网格属性的元素之间的包装元素。
  • 注释

    <ul>
  • 网格项也可以是网格容器。
  • 有关嵌套 Flex 和网格的更多信息,请参阅下面的附加资源
  • 相关阅读:

    <ul>
  • 将深度嵌套的元素放置在更高级别的网格容器中
  • Flex 属性的正确使用嵌套 Flex 容器时
  • 嵌套 CSS 是不好的做法吗网格?
  • 以上是CSS Grid 的格式化上下文能达到多远?的详细内容。更多信息请关注PHP中文网其他相关文章!

    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    作者最新文章
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板