A Roadmap
  • Introduction
  • Roadmap
  • Basics
    • Basic Terminal Usage
      • Shell
        • 基本
        • 变量
        • 传递参数
        • 运算符
        • 命令
        • 流程控制
        • 函数
        • 输入输出重定向
    • Character Encoding
      • 字符编码
    • Data Structures & algorithms
    • Network
      • TCP/IP
      • Http/Https
        • 浏览器缓存
        • Status Code
        • GET & POST
        • HTTPS 握手过程
        • HostOnly Cookie
      • CDN
        • CDN 工作原理
    • Version Control
      • git message format
      • git commands
    • Principles
    • Design Patterns
    • Others
      • JSON
      • 正则表达式
  • Front End
    • Web Standard
      • Html
      • CSS
        • font-face 小记
        • Grid 布局简易笔记
      • Javascript
        • Ajax
          • Fetch
          • XMLHttpRequest
        • DOM
          • Selection
          • 常用 DOM 操作
          • script 标签的几个属性
        • Ecmascript
          • this 关键字
          • Event Loop
          • 隐式转换
          • Date
        • Event
          • 模拟事件
          • Others
    • Development
      • Package Management
        • npm
      • Modulization
        • 模块化机制
        • webpack 打包解析
      • Architecture
      • Build Tools
        • 如何编写一个自定义的 eslint 规则？
      • Debug
        • 移动端调试 web
      • Pre/Post Processors
      • Test
        • Jest Snapshot 使用指南
      • Type Checkers
        • TS 中 enum 的编译结果
    • Libs & frameworks
    • Platforms
      • Browser
        • Basics
          • 从输入 URL 到页面加载完成都发生了什么事情？
          • HTML 加载的过程示意图
          • 为什么读取某些属性，也会导致回流？
          • Chrome 进程模型
        • PWA
        • Compatible
        • Cross Origin
        • Performance
          • 性能检测：performance 对象
          • 性能指标
        • Others
          • 移动端 web 开发笔记
      • Server
      • Desktop Applications
      • Mobile Applications
        • Flutter 在移动端和 Web 端的技术实现
  • Back End
    • outline
    • Languages
      • Node
        • Event Loop
        • NodeJS 中的进程与线程
        • NodeJS 中的 esModule 与 commonJS
  • Clients
    • outline
    • 安装 IPA 包
  • DevOps
    • Languages
    • OS Concepts
    • Servers & terminal
  • UI & UX
    • outline
  • Others
    • Posts
      • 使用 node 爬取数据并导出到 excel
      • antd 1.x datepicker 时区问题
      • babel-transform-runtime 踩坑记录
      • lodash 按需加载注意事项
      • 记一次项目迁移的踩坑记录
      • 时区与JS中的Date对象
      • 记一次 vue + ts 开发踩坑
    • Tools
      • 个人常用的工具分享
      • tmux 简要笔记
Powered by GitBook
On this page
  • 属性介绍
  • Layout
  • Align

Was this helpful?

  1. Front End
  2. Web Standard
  3. CSS

Grid 布局简易笔记

Previousfont-face 小记NextJavascript

Last updated 6 years ago

Was this helpful?

2018 年 11 月 6 日 15:03:19

属性介绍

Layout

Template

  • grid-template grid-template-* 属性的缩写

  • grid-template-rows 设置行高

  • grid-template-columns 设置列宽

  • grid-template-areas 设置具名栅格

  • repeat 栅格可配合 repeat 实现快速布局

Item

  • grid-area 栅格对应的区域的名称；也支持书写边界的名称，如 1 / 1 / 2 / 2，即横、纵方向上的第一个栅格

  • grid-row 栅格在同一行上所占据的区域

  • grid-row-start 区域在行的起始位置

  • grid-row-end 区域在行的结束位置

  • grid-column 栅格在同一列上所占据的区域

  • grid-column-start 区域在列的起始位置

  • grid-column-end 区域在列的结束位置

  • span span 关键字，如果起始和结束位置是具名的，则没有效果；如果 span 后面紧跟一个 number 类型的值，则表示需要横跨几个区域

Gap

  • grid-gap 间隙的缩写

  • grid-row-gap 水平方向上的间隙

  • grid-column-gap  垂直方向上的间隙

隐式栅格

对溢出栅格范围的区域进行控制

  • grid-auto-row

  • grid-auto-column

Align

Template

  • justify-content 仅当栅格所占宽度小于容器宽度时生效。设置栅格区域在水平上的的对齐方式

  • align-content 仅当栅格所占高度小于容器高度时生效。设置栅格区域在垂直上的的对齐方式

  • justify-items 设置栅格区域内，每个格子水平上的对齐方式，默认是 stretch 填充满整个格子

  • align-items 设置栅格区域内，每个格子垂直上的对齐方式，默认是 stretch 填充满整个格子

  • place-items *-items 属性的缩写，eg: place-items: <align-items> <justify-items>

Item

  • justify-self 设置栅格区域内，当前格子水平上的对齐方式

  • align-self 设置栅格区域内，当前格子垂直上的对齐方式

  • place-self *-self 属性的缩写，eg: place-self: <align-self> <justify-self>

click here to see example
click here to see example
click here to see example
click here to see example