文章目录
- 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
