css3 Grid栅格系统
2024-09-05 04:27:59
Grid 栅格系统的使用
定义容器
.coninater {
display: grid;
}
多种方式定义单格
1. 按百分比划分
.coninater {
display: grid;
grid-template-rows: 50% 50%;
grid-template-columns: 20% 20% 20% 20% 20%;
}
2. 按比例划分
.coninater {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
}
3. 自动填充
.coninater {
display: grid;
grid-template-rows: repeat(auto-fill, 100px);
grid-template-columns: repeat(auto-fill, 100px);
}
4. minmax 控制行范围的波动
.coninater {
display: grid;
grid-template-rows: repeat(2, minmax(50px, 100px));
grid-template-columns: repeat(3, 1fr);
}
栅格间距
.coninater {
display: grid;
grid-template-rows: repeat(3, 1fr);
grid-template-columns: repeat(3, 1fr);
row-gap: 10px;
column-gap: 10px;
gap: 10px 10px;
}
根据栅格线编号放置元素
.container {
grid-row-start: 1;
grid-column-start: 1;
grid-row-end: 2;
grid-column-end: 4;
}
/* 左左右 */
.container {
grid-row-start: 1;
grid-column-start: 1;
gird-row-end: 3;
gird-column-end: 2;
}
为栅格命名
.contanier {
grid-template-rows: repate(3, [r-start] 1fr [r-end]);
grid-template-columns: repate(3, [c-start] 1fr [c-end]);
}
div:first-child {
grid-row-start: r-start 1;
gird-column-start: c-start 1;
gird-column-end: c-end 3;
gird-row-end: r-end 1;
}
偏移元素
/* 元素居中显示 */
.container {
grid-template-rows: repate(3, 1fr);
grid-template-column: repate(3, 1fr);
}
div: first-child {
grid-row-start: 2;
grid-column-start: 2;
grid-column-end: span 1;
grid-colum-end: span 1;
}
元素定位简写
/* 元素居中显示 */
/* 元素居中显示 */
.container {
grid-template-rows: repate(3, 1fr);
grid-template-column: repate(3, 1fr);
}
div: first-child {
grid-row: 2 / span 1;
grid-column: 2 / span 1;
}
使用区域定位
/* 元素居中显示 */
.container {
grid-template-rows: repate(3, 1fr);
grid-template-column: repate(3, 1fr);
}
div: first-child {
grid-area: 2/2/3/3;
}
最新文章
- JSF的CommandXxx组件的update用法总结
- 背影渐变shape写法
- Jquery操作
- 用httpPost对JSON发送和接收
- Hashing function
- canvas-a10isPointPath2.html
- ecshop分页问题1
- SxsTrace工具使用方法(转)
- Windows打印管理解决方案
- telnet关闭tomcat
- eclipse：Workspace in use or cannot be created
- java设计模式在公众号的应用——我是一个快乐的单例
- i/10和i取最后两位的精妙算法（前方高能）
- [译]Ocelot - Getting Started
- （转）The Evolved Transformer - Enhancing Transformer with Neural Architecture Search
- python ssh登录linux 上传和下载文件
- Cronolog切割tomcat日志
- 再谈kbmMW垃圾回收
- scrapy 安装流程和启动
- JVM自定义类加载器加载指定classPath下的所有class及jar