CSS grid layout
2024-10-17 00:36:54
CSS网格布局用于将页面分割成数个主要区域,或者用来定义组件内部元素间大小、位置和图层之间的关系。
像表格一样,网格布局让我们能够按行或列来对齐元素。 但是,使用CSS网格可能还是比CSS表格更容易布局。 例如,网格容器的子元素可以自己定位,以便它们像CSS定位的元素一样,真正的有重叠和层次。
示例:
<doctype html>
<html>
<head>
<title>title</title>
<style>
.wrapper { display: grid;/*网格布局*/ grid-template-columns: repeat(3, 1fr); /*把网格区域分成三等分为三列 "repeat(3,1fr)"等价于 "1fr 1fr 1fr */
grid-gap: 10px; /*网格间隙的宽度(网格线宽度?)*/
grid-auto-rows: minmax(100px, auto); /*指定网格行的行高最小值为100px*/
}
.one {
grid-column: 1 / 3; /*列的范围从第一条网格线开始到第三条网格线结束,下同*/
grid-row: 1; /*行的范围指定为第一行单行,下同*/
border-style:solid; /*加边框为了便于观察,下同*/
border-color:#f00;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
border-style:solid;
border-color:#0f0;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
border-style:solid;
border-color:#00f;
}
.four {
grid-column: 3;
grid-row: 3;
border-style:solid;
border-color:#ff0;
}
.five {
grid-column: 2;
grid-row: 4;
border-style:solid;
border-color:#0ff;
}
.six {
grid-column: 3;
grid-row: 4;
border-style:solid;
border-color:#f0f;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
<div class="four">Four</div>
<div class="five">Five</div>
<div class="six">Six</div>
</div>
</body>
</html>
result:
最新文章
- grunt配置任务
- 在双系统(Windows与Ubuntu)下删除Ubuntu启动项
- zpf 视图
- MVC 扩展方法特点
- Maven+Spring+MVC结构中,jetty/tomcat是如何启动项目的[转]
- Session里的对象是不可靠的!
- MATLAB中为控件(uicontrol)绑定Callback函数(回调函数)
- 网络编程Socket之TCP之close/shutdown具体解释(续)
- 可持久化Trie树初步
- cassandra高级操作之JMX操作
- 错误问题:OpenGL version to old,GLViewinitWithRect(const stdbasic_stringchar,stdchar_traitschar,stdalloca
- disconf使用小结
- sql中join与left-join图解区别
- VBA汇总同目录下的所有工作簿数据到另一个工作簿,并进行统计
- 2018-2019-2 网络对抗技术 20165318 Exp4 恶意代码分析
- Java 9中新的货币API
- ArcGIS 在高清屏中主界面界面字体和图标显示过小,如何解决?
- React server rendering —— 网易美学主站同构实录
- 程序媛计划——mysql连接表
- UML——六大关系整理