grid_学习_图解

文章目录

• grid_学习_图解
• • guides
  • reference and tutorials
  • • Properties for the Grid container
    • Properties for Grid items
  • introduction for grid
  • grid元素审查
  • • 试验代码
    • grid 布局效果

grid_学习_图解

guides

• 学习 grid 的时候首先明确 grid-container 系列属性和 grid-item 系列属性
• grid-item 属性有时候会用到在 grid-container 中定义的标识符(比如 name-ident)
• 先学习 container,在学习 item

reference and tutorials

• CSS Grid 网格布局教程
• A Complete Guide to Grid | CSS-Tricks - CSS-Tricks

Properties for the Grid container

• display
• grid-template-columns
• grid-template-rows
• grid-template-areas
• grid-template
• grid-column-gap
• grid-row-gap
• grid-gap
• justify-items
• align-items
• place-items
• justify-content
• align-content
• place-content
• grid-auto-columns
• grid-auto-rows
• grid-auto-flow
• grid

Properties for Grid items

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end
• grid-column
• grid-row
• grid-area
• justify-self
• align-self
• place-self

introduction for grid

grid元素审查

试验代码

• webLearn: web learning recording by cxxu (gitee.com)

grid 布局效果

• 将align-items和justify-items均设置为居中:
• 使用元素审查可以看到(包含grid-gap)
• 演示/试验对齐的时候,建议用<lenght>(px)来设定具体的盒模型大小,而且要比grid-container本身明显要大,这样在元素审查的时候比较明显.
  • 
  • 
  • 
  • place-content:between
  • 
    •