CSS3 网格布局

更新时间：2023-02-22 15:57:53标签：cssweb前端

基本用法

1.container{
2  display: grid;
3  // 表示自动填充列数，每一列最小为250px，最大为 1 / 列数n
4  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
5  // 列间距
6  grid-column-gap: 1rem;
7  // 行间距
8  grid-row-gap: 2rem;
9}

MDN文档： https://developer.mozilla.org/en-US/docs/Web/CSS/grid

示例

拖拽修改浏览器视口宽度查看效果

1.container{
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4  grid-column-gap: 1rem;
5  grid-row-gap: 1rem;
6}
1
2
3
4
5
6
7
8
9
10
1.container{
2  display: grid;
3  grid-template-columns: repeat(3, 1fr);
4  grid-column-gap: 1rem;
5  grid-row-gap: 1rem;
6}
1
2
3
4
5
6
7
8
9
10
1.container{
2  display: grid;
3  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
4  grid-column-gap: 1rem;
5  grid-row-gap: 1rem;
6  :global .item:nth-child(4){
7    grid-column: auto / span 2;
8  }
9}
1
2
3
4
5
6
7
8
9
10