avatar
文章
278
标签
819
分类
133
开发
  • 大前端
  • 人工智能
  • 小程序
  • 桌面应用
  • 游戏开发
服务器&网络
  • 服务器
  • 网络
归档
标签
友链
仰观苍穹思环宇
搜索
开发
  • 大前端
  • 人工智能
  • 小程序
  • 桌面应用
  • 游戏开发
服务器&网络
  • 服务器
  • 网络
归档
标签
友链

CSS Grid布局使用技巧和高级用法

发表于2024-10-28|更新于2024-11-07|大前端
CSS Grid 布局响应式网格设计网格区域设置grid-area网格对齐方式
cover of previous post
上一篇
使用PowerToys的无界鼠标在同一局域网中控制多台Windows电脑
cover of next post
下一篇
WordPress后台出现Maximum upload file size不能修改上传文件大小限制解决方案
avatar
鸢尾花序
文章
278
标签
819
分类
133
关注我们
目录
  1. 1. 1，CSS Grid 布局中的 grid-area 属性详解
    1. 1.1. 一、grid-area 属性的语法
    2. 1.2. 二、行和列的计数规则
    3. 1.3. 三、grid-area 的实例解析
      1. 1.3.1. 示例：grid-area: 1 / 3 / 3 / 4;
    4. 1.4. 四、网格边界的定义
      1. 1.4.1. grid布局，我们只需要记住方格的左上角的那个点的坐标，以及方格右下角的那个点的坐标，就可以知道grid-area的布局设置了
        1. 1.4.1.1. 更详细的解释
        2. 1.4.1.2. 例子说明
        3. 1.4.1.3. 小结
    5. 1.5. 五、小结
  2. 2. grid布局还有丰富的设置方式，请列出最常用的一些用法
    1. 2.0.1. 1. display: grid 和 grid-template-columns / grid-template-rows
    2. 2.0.2. 2. grid-gap 或 gap
    3. 2.0.3. 3. grid-template-areas
    4. 2.0.4. 4. grid-column 和 grid-row
    5. 2.0.5. 5. grid-auto-rows 和 grid-auto-columns
    6. 2.0.6. 6. justify-items 和 align-items
    7. 2.0.7. 7. justify-content 和 align-content
    8. 2.0.8. 8. repeat()、minmax()、auto-fit 和 auto-fill
    9. 2.0.9. 总结
  • 3. CSS Grid 还有一些高级和有趣的特性
    1. 3.0.1. 1. place-items 和 place-content
    2. 3.0.2. 2. grid-auto-flow
    3. 3.0.3. 3. subgrid
    4. 3.0.4. 4. grid-template 简写属性
    5. 3.0.5. 5. fr 单位
    6. 3.0.6. 6. min-content 和 max-content
    7. 3.0.7. 7. fit-content()
    8. 3.0.8. 8. 媒体查询结合 CSS Grid
    9. 3.0.9. 9. 重叠布局（Layering）
    10. 3.0.10. 10. aspect-ratio 配合 CSS Grid
    11. 3.0.11. 总结
  • 4. 扩展阅读
    1. 4.1. react-grid-layout是从0开始的，而grid-area里面的从1开始的
      1. 4.1.1. 具体区别：
      2. 4.1.2. 示例对比：
      3. 4.1.3. 为什么 react-grid-layout 从 0 开始
    2. 4.2. 请解释react-grid-layout里面的如下的意思：
      1. 4.2.1. 如何在 react-grid-layout 中应用
    • 最新文章
    web页面版块(多列版块)流程间动画实现技术详解和相关方案
    web页面版块(多列版块)流程间动画实现技术详解和相关方案2024-11-12
    使用git管理hexo博客仓库的最佳实践及问题解决
    使用git管理hexo博客仓库的最佳实践及问题解决2024-11-07
    mermaid在markdown编辑器里面常见的写法报错或语法报错(引用块)注意事项和解决办法
    mermaid在markdown编辑器里面常见的写法报错或语法报错(引用块)注意事项和解决办法2024-11-06
    CSS实现鼠标悬浮版块上去边框渐变效果以及版块悬浮边框动画渐变效果
    CSS实现鼠标悬浮版块上去边框渐变效果以及版块悬浮边框动画渐变效果2024-11-05
    使用云服务器搭建WireGuard VPN实现外网访问
    使用云服务器搭建WireGuard VPN实现外网访问2024-11-05
    上下文在计算机编程中的重要性
    上下文在计算机编程中的重要性2024-11-04
    云服务器安装nginx并且进行正向代理和反向代理剖析和演示
    云服务器安装nginx并且进行正向代理和反向代理剖析和演示2024-11-01
    使用PowerToys的无界鼠标在同一局域网中控制多台Windows电脑
    使用PowerToys的无界鼠标在同一局域网中控制多台Windows电脑2024-10-30
    ©2022 - 2024 By 鸢尾花序
    搜索
    数据库加载中