原文链接: css grid 布局
CSS 栅格布局中最重要的两个元素是 wrapper(parent) 和 items(children)。wrapper 实际上就是栅格,而 items 就是栅格里面的元素。
<div class="wrapper">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
.wrapper {
display: grid;
}
.item{
background: deepskyblue;
display: flex;
justify-content: center;
align-items: center;
margin: 2px;
}
默认放置方式
我们需要为这个容器定义行和列,现在将这个容器分割成两行三列,需要用到 grid-template-row
和 grid-template-column
属性:
当我们这样去定义 grid-template-columns
时,我们将得到三列,列长就是我们设置的大小,同理 grid-template-rows
也是一样。
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}
改变长度
.wrapper {
display: grid;
grid-template-columns: 200px 50px 100px;
grid-template-rows: 100px 30px;
}
重新定位并调整这些元素的大小,我们要对该元素使用 grid-column
和 grid-row
属性
.wrapper {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 100px 100px 100px;
}
.item1{
grid-column-start: 1;
grid-column-end: 4;
}
定义一个3*3的格子,上面的代码意图是,我们想让 item1
的起点在第一列并且终止在第四列,也就是说,我们想让它独占一行,下面是运行的结果:
元素位置依据的是网格线,标号由1开始
当第一个元素占满第一行时,其他的元素将向下顺延。
简写,1/4 表示1到4
.item1{
grid-column: 1 / 4;
}
复杂布局
.item1 {
grid-column-start: 1;
grid-column-end: 3;
}
.item3 {
grid-row-start: 2;
grid-row-end: 4;
}
.item4 {
grid-column-start: 2;
grid-column-end: 4;
}
简写
.item1 {
grid-column: 1/3;
}
.item3 {
grid-row: 2/4;
}
.item4 {
grid-column: 2/4;
}
来源:oschina
链接:https://my.oschina.net/u/2856757/blog/1793571