CSS网格容器

2023-10-17 59

一、网格容器

CSS中,要创建并使用网格容器,你需要将元素的display属性设置为grid或inline-grid。这样,被设置的元素将成为块级元素,并且其所有直接子元素都将位于一个网格格式的上下文中,这些子元素就被称为网格项目。网格容器内放置着由列和行内组成的网格元素。

二、定义网格容器

1、grid-template-columns属性

grid-template-columns属性用于定义网格布局中的列数,并可以设置每个列的宽度。该属性的值是一个以空格分隔的列表,其中每个值表示相应列的宽度。如果希望网格布局包含4列,则需要设置4列的宽度,如果所有列的宽度都是一样的,可以设置为auto。

以下实例设置了 4 列的网格布局:

.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}

注意:如果在 4 列网格中有 4 个以上的网格元素,网格布局会生成新的一行放置该元素。

grid-template-columns 属性也可用于指定列的宽度:

.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}

2、grid-template-rows 属性

grid-template-rows属性用于设置网格布局中每一行的高度。属性值是一个以空格分隔的列表,其中每个值定义相对应行的高度:

.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}

3、justify-content 属性

justify-content 属性用于对齐容器内的网格,设置如何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间。

注意:网格的总宽度必须小于容器的宽度才能使 justify-content 属性生效。

.grid-container {
display: grid;
justify-content: space-evenly;
}
.grid-container {
display: grid;
justify-content: space-around;
}
.grid-container {
display: grid;
justify-content: space-between;
}
.grid-container {
display: grid;
justify-content: center;
}
.grid-container {
display: grid;
justify-content: start;
}
.grid-container {
display: grid;
justify-content: end;
}

4、align-content属性

align-content 属性用于设置网格容器中所有网格项在垂直方向上的对齐方式。

注意:网格元素的总高度必须小于容器的高度才能使 align-content 属性生效。

.grid-container {
display: grid;
height: 400px;
align-content: center;
}
.grid-container {
display: grid;
height: 400px;
align-content: space-evenly;
}
.grid-container {
display: grid;
height: 400px;
align-content: space-around;
}
.grid-container {
display: grid;
height: 400px;
align-content: space-between;
}
.grid-container {
display: grid;
height: 400px;
align-content: start;
}
.grid-container {
display: grid;
height: 400px;
align-content: end;
}
  • 广告合作

  • QQ群号:707632017

温馨提示:
1、本网站发布的内容(图片、视频和文字)以原创、转载和分享网络内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。邮箱:2942802716#qq.com(#改为@)。 2、本站原创内容未经允许不得转裁,转载请注明出处“站长百科”和原文地址。
CSS网格容器
上一篇: CSS网格布局
CSS网格容器
下一篇: CSS网格元素