网页布局——grid语法属性详解
2024-10-06 13:11:05
grid目前兼容性目前还可以，主流浏览器对它的支持力度很大，ie9,10宣布它未来不久会对它有很好的支持，目前则需要使用过时的语法。我相信不久的将来grid将成为每一个前端工作人员必备的布局技能。
属性介绍
1.父元素上的属性
| 属性 | 说明 |
|---|---|
| display | 设置grid布局 |
| grid-template-rows | 设置网格的行数 |
| grid-template-columns | 设置网格的列数 |
| grid-template-areas | 根据子元素的网格名字来排列 |
| grid-column-gap | 用来指定竖网格轨道的大小 |
| grid-row-gap | 用来指定行网格轨道的大小 |
| grid-gap | grid-column-gap和grid-row-gap这两个属性的缩写方式 |
| justify-items | 网格中所有单元格中的内容在X轴的对齐方式 |
| align-items | 网格中所有单元格中的内容在Y轴的对齐方式 |
| justify-content | 来设置整个网格在网格容器中的X轴的排列方式 |
| align-content | 来设置整个网格在网格容器中的Y轴的排列方式 |
| grid-auto-columns | 设定隐藏的网格的高 |
| grid-auto-rows | 设定隐藏的网格的宽 |
| grid-auto-flow | 在布局的时候，选择网格填充的方法 |
2.设置子元素上的属性
| 属性 | 说明 |
|---|---|
| grid-area | 给单个子元素起名字 |
| grid-column-start | 元素的位置哪跟竖线开始 |
| grid-column-end | 哪跟竖线结束 |
| grid-row-start | 哪跟横线开始 |
| grid-row-end | 哪跟横线结束 |
| grid-row | grid-row-start和grid-row-end的缩写 |
| grid-column | grid-column-start和grid-column-end这两个属性的缩写方式 |
| grid-area | grid-row和grid-column的缩写 |
| justify-self | 设置单个子元素在其所在的小网格中的X轴排列方式 |
| align-self | 设置单个子元素在其所在的小网格中的Y轴排列方式 |
| align-content | 来设置整个网格在网格容器中的Y轴的排列方式 |
最新文章
- C语言获得文件一行
- 【Linux】方便的SecureCRT文件上传、下载命令
- Codeforces Round #330 (Div. 2) A. Vitaly and Night 暴力
- DataTable 分页
- Python操作Excel_输出所有内容（包含中文）
- android shape的使用详解以及常用效果（渐变色、分割线、边框、半透明阴影效果等）
- python文件处理--笔记
- vs2010中iostream.h出错
- CentOS6.5编译安装Python-2.7
- locks
- 洛谷P2832 行路难 分析+题解代码【玄学最短路】
- FusionCharts重写单系列图
- JavaScript数据结构与算法(三) 优先级队列的实现
- [HNOI 2008]越狱
- Android源码浅析（一）——VMware Workstation Pro和Ubuntu Kylin 16.04 LTS安装配置
- 【Android Studio安装部署系列】十四、Android studio移除工程和删除项目
- redis五种数据类型和常用命令及适用场景
- 剑指Offer 22. 从上往下打印二叉树 （二叉树）
- Python+Excel+Unittest+HTMLTestRunner实现数据驱动接口自动化测试（一）
- Bootstrap2.x与Bootstrap3.x的区别