HTML(box
的子元素可能会增加、减少)
<div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div></div>
CSS
.box { width: 300px; height: 300px;}.box div:nth-child(odd) { background-color: pink;}.box div:nth-child(even) { background-color: purple;}
row-gap
、column-gap
属性row-gap
设置行间距,column-gap
设置列间距。
.box { width: 300px; height: 300px;}.box div:nth-child(odd) { background-color: pink;}.box div:nth-child(even) { background-color: purple;}
gap
属性gap
属性是row-gap
和column-gap
的简写形式。
gap: <row-gap> <column-gap>;
gap: 10px 20px;
结果和上图一样。
如果只有一个值,那么行间距、列间距都是该值。
gap: 20px;
grid-auto-flow
属性grid-auto-flow
属性指定在网格中被自动布局的元素怎样排列。默认值是row
,即先行后列
。
grid-template-rows: 50% 50%;grid-template-columns: repeat(3, 1fr);grid-auto-flow: row; /* 这里有没有都是一样的结果 */
设置成column
的话,就会按先列后行
的顺序来排列。
grid-template-rows: 50% 50%;grid-template-columns: repeat(3, 1fr);grid-auto-flow: column;
下面还需要讲一下设置row
或column
的同时添加dense
的情况。加了dense
表示尽可能紧密填满。
grid-template-rows: repeat(3, 1fr);grid-template-columns: repeat(3, 1fr);grid-auto-flow: row;
.box div:nth-child(3) { /* 后续将项目属性时会细讲。 */ /* auto: 表示该项目对网格项目没有任何贡献。实际没有它也行。暂时找不到必须要的理由 */ /* span: 表示跨越,即占多少个格 */ grid-column: auto / span 2;}
如果需要紧密填满的话,只需要将grid-auto-flow
属性变成row dense
即可。之后4就会往上移,补空位,5、6也依次补上去。
和单元格排列有关的主要有两个属性。
justify-items
:设置单元格内容的水平位置align-items
:设置单元格内容的垂直位置它们的取值都是一样的:
start
: 对齐单元格的起点end
: 对齐单元格的终点center
:单元格内容居中stretch
: 拉伸占满单元格(默认值)justify-items
属性上面已经简单介绍过了,其实和flex
的差不太多,接下来来一下实例加深一下印象。
box元素的CSS基础代码加一下下面的内容。(方便体验)
grid-template-rows: repeat(2, 20%);grid-template-columns: repeat(3, 20%);background-color: skyblue;
stretch
: 效果和上图一样。因为默认值就是stretch
justify-items: stretch;
**start
**:
justify-items: start;
注意:不再是stretch
之后,单元格内容的大小就不会是单元格本身的大小了,而是真正内容的大小。例如,上面的例子中,没有设置宽度,真正内容大小就是文字的大小。
**end
**:
justify-items: end;
**center
**:
justify-items: center;
align-items
属性start
:
align-items: start;
end
:
align-items: end;
center
:
align-items: center;
place-items
属性place-items
属性是align-items
和justify-items
的简写形式。
语法:
place-items: <align-items> <justify-items>;
示例:
place-items: start center;
水平方向居上,垂直方向居中。
需要水平垂直居中只需要值都设置为center
即可,如果省略第二个值,则第二个值会等于第一个值。也就是说水平垂直居中只需要place-items: center;
即可。
box元素的CSS基础代码还是要加一下下面的内容。(方便体验)
grid-template-rows: repeat(2, 20%);grid-template-columns: repeat(3, 20%);background-color: skyblue;
和单元格排列有关的主要有两个属性。
justify-content
:设置整体内容的水平位置align-items
:设置整体内容的垂直位置它们的取值都是一样的:
start
、end
、center
、stretch
和单元格排列部分的一样,只是对齐的不再是单元格,而是容器了。space-around
:每个项目两侧的间隔相等,项目之间的间隔会比容器边框的间隔大一倍。space-between
:项目与项目的间隔相等,项目与容器边框之间没有间隔space-evenly
:项目与项目、项目与容器边框之间的间隔都相等。justify-content
属性简单举几个实例,基本看看结果+看看概念就懂了(真正懂需要开发时经常使用)
center
:
justify-content: center;
space-around
:
justify-content: space-between;
space-between
:
justify-content: space-evenly;
space-evenly
:
justify-content: space-evenly;
align-content
属性和justify-content
属性一样,只是从水平方向变成了垂直方向。
place-content
属性place-content
属性是align-content
和justify-content
的简写形式。
语法:
place-content: <align-content> <justify-content>;
示例:
place-content: space-between center;
start
和stretch
的区别用上面的例子测试,如果使用start
和stretch
,会发现它们的结果一样。
这是因为我们的项目大小已经固定好了,如果变成auto
的话,就能看出start
和stretch
的区别了。
stretch
: 会拉伸占满容器
grid-template-rows: repeat(2, 20%);grid-template-columns: repeat(3, auto);justify-content: stretch;
start
:真正内容的大小,不会拉伸。