CSS参考手册
网格布局 | Grid Layout
网格布局 | CSS Grid Layout
CSS网格布局擅长将页面划分区域,或根据HTML原语构建的控件的各个部分之间的大小、位置和层定义关系。
与表一样,网格布局使作者能够将元素对齐为列和行。然而,与表相比,CSS网格的布局可能更多,或者更容易。例如,网格容器%27s子元素可以将自己定位为实际重叠和层,类似于CSS定位的元素。
基本实例
下面的示例显示了一个三列跟踪网格,其中新建的行至少为100像素,最大为AUTO。项目已被放置到网格上,使用基于行的布局。
HTML
<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>
CSS
.wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
grid-auto-rows: minmax(100px, auto);
}
.one {
grid-column: 1 / 3;
grid-row: 1;
}
.two {
grid-column: 2 / 4;
grid-row: 1 / 3;
}
.three {
grid-column: 1;
grid-row: 2 / 5;
}
.four {
grid-column: 3;
grid-row: 3;
}
.five {
grid-column: 2;
grid-row: 4;
}
.six {
grid-column: 3;
grid-row: 4;
}
参照系
CSS属性
grid-template-columns
grid-template-rows
grid-template-areas
grid-template
grid-auto-columns
grid-auto-rows
grid-auto-flow
grid
grid-row-start
grid-column-start
grid-row-end
grid-column-end
grid-row
grid-column
grid-area
grid-row-gap
grid-column-gap
grid-gap
CSS功能
repeat()
minmax()
fit-content()
术语
- 格网
- 网格线
- 网格轨道
- 网格单元
- 网格面积
- 排水沟
- 网格轴
- 栅格行
- 网格柱
指南
- 网格布局的基本概念
- 网格布局与其他布局方法的关系
- 基于行布局的布局
- 网格模板区
- 使用命名网格线的布局
- css网格布局中的自动布局
- CSS网格布局中的框对齐
- CSS网格、逻辑值与写入方式
- CSS网格布局和可访问性
- CSS网格与渐进增强
- 使用CSS网格实现公共布局
外部资源
- 珍·西蒙斯的例子
- 网格逐个示例---使用示例和视频教程的集合。
- CoDrops网格参考
- Firefox DevTools CSS网格检查器
规范
Specification |
Status |
Comment |
---|---|---|
CSS Grid Layout |
Candidate Recommendation |
Initial definition. |
网格布局 | Grid Layout相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。