请写出display: grid;得用法
时间: 2024-05-21 16:10:47 浏览: 8
display: grid;是CSS中用于创建网格布局的属性。其用法如下:
1.在容器元素上设置display: grid;,表示该元素采用网格布局。
2.设置网格行和列的大小和间距,可以使用grid-template-rows、grid-template-columns、grid-row-gap、grid-column-gap等属性。
3.将子元素放置到网格中,可以使用grid-row、grid-column、grid-area等属性来指定子元素所在的行、列、区域等。
4.设置子元素的对齐方式、排序方式等,可以使用justify-items、align-items、justify-content、align-content、grid-auto-flow等属性。
例如:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 100px 200px;
grid-gap: 20px;
}
.item {
grid-column: 2 / 3;
grid-row: 1 / 3;
justify-self: center;
align-self: center;
}
以上代码表示一个具有3列2行的网格布局容器,其中第一列和第三列宽度相等(1fr),中间一列宽度是两边的两倍(2fr),每个单元格之间有20px的间距。其中一个子元素被放置在第2列第1行到第2行之间,水平和垂直居中对齐。
相关问题
display: flex 和 display: grid。 css
display: flex和display: grid是CSS中用于布局的两种常用属性。
1. display: flex(弹性布局):
- 它定义了一个容器(flex container)和其中的项目(flex items)之间的关系。
- 容器中的项目可以按照水平或垂直方向排列,并且可以根据需要自动调整宽度和高度。
- 使用flex属性可以控制项目在容器中的分布、对齐方式和排序等。
- 弹性布局适用于构建响应式的、灵活的布局结构。
2. display: grid(网格布局):
- 它定义了一个二维网格,将容器划分为行和列。
- 容器中的项目可以放置在网格的任意位置,可以跨越多个行和列。
- 使用grid属性可以控制项目在网格中的位置、大小和对齐方式等。
- 网格布局适用于构建复杂的、栅格化的布局结构。
display:flex和display:grid区别
display:flex和display:grid都是CSS3中新增的布局方式,它们的主要区别在于布局方式的不同。display:flex是一维布局,主要用于处理行或列的布局,而display:grid是二维布局,可以处理行和列的布局。另外,display:flex更适合处理动态布局,而display:grid更适合处理静态布局。在使用时,需要根据实际情况选择合适的布局方式。