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

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
鸢尾花序
文章
291
标签
863
分类
134
关注我们
目录
  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 中应用
    • 最新文章
    如何实现打字与旋转飞入效果：一步一步指导
    如何实现打字与旋转飞入效果：一步一步指导2024-12-06
    如何实现一个逐字显示的动态打字效果，并保持原始文字不受影响
    如何实现一个逐字显示的动态打字效果，并保持原始文字不受影响2024-12-06
    如何在WordPress使用WooCommerce添加Buy Now按钮并直接跳转到结算页面
    如何在WordPress使用WooCommerce添加Buy Now按钮并直接跳转到结算页面2024-12-04
    SVG 动态环形背景效果实现与应用场景分析
    SVG 动态环形背景效果实现与应用场景分析2024-12-03
    前端开发与后端数据分析展示的完整解决方案(Vis-Network和Networks的选择)
    前端开发与后端数据分析展示的完整解决方案(Vis-Network和Networks的选择)2024-12-03
    颜色切换效果实现——CMYK背景色切换思路
    颜色切换效果实现——CMYK背景色切换思路2024-12-03
    实现周期性背景渐变滚动效果的HTML和CSS代码
    实现周期性背景渐变滚动效果的HTML和CSS代码2024-12-03
    设置wordpress网站文件和文件夹的权限
    设置wordpress网站文件和文件夹的权限2024-12-03
    ©2022 - 2024 By 鸢尾花序
    搜索
    数据库加载中