首页 > 其他分享 >前端必知必会-CSS Grid网格

前端必知必会-CSS Grid网格

时间:2024-09-18 14:22:18浏览次数:14  
标签:必知 网格 gap column grid Grid row CSS 属性

文章目录


CSS 网格布局模块

网格布局

CSS 网格布局模块提供基于网格的布局系统,包含行和列,可让您更轻松地设计网页,而无需使用浮动和定位。

网格元素

网格布局由一个父元素和一个或多个子元素组成。

示例

<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
</div>

在这里插入图片描述

Display 属性

当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时,该元素将成为网格容器。

示例

.grid-container {
display: grid;
}

示例

.grid-container {
display: inline-grid;
}

网格容器的所有直接子项都会自动成为网格项。

网格列

网格项的垂直线称为列。
在这里插入图片描述

网格行

网格项的水平线称为行。
在这里插入图片描述

网格间隙

每列/行之间的空间称为间隙。
在这里插入图片描述

您可以使用以下属性之一调整间隙大小:

  • column-gap
  • row-gap
  • gap
    示例
    column-gap 属性设置列之间的间隙:
.grid-container {
display: grid;
column-gap: 50px;
}

示例
row-gap 属性设置行之间的间隙:

.grid-container {
display: grid;
row-gap: 50px;
}

示例
gap 属性是 row-gap 和 column-gap 属性的简写属性:

.grid-container {
display: grid;
gap: 50px 100px;
}

示例
gap 属性还可用于在一个值中同时设置行间隙和列间隙:

.grid-container {
display: grid;
gap: 50px;
}

网格线

列之间的线称为列线。

行之间的线称为行线。
在这里插入图片描述

在网格容器中放置网格项时参考行号:

示例
将网格项放置在列线 1 处,并让其在列线 3 处结束:

.item1 {
grid-column-start: 1;
grid-column-end: 3;
}

示例
将网格项放置在行线 1 处,并让其在行线 3 处结束:

.item1 {
grid-row-start: 1;
grid-row-end: 3;
}

所有 CSS 网格属性

属性描述
column-gap指定列之间的间隙
gaprow-gap 和 column-gap 属性的简写属性
gridgrid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns 和 grid-auto-flow 属性的简写属性
grid-area指定网格项的名称,或者此属性是 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性
grid-auto-columns指定默认列大小
grid-auto-flow指定自动放置项在网格中的插入方式
grid-auto-rows指定默认行大小
grid-columngrid-column-start 和 grid-column-end 属性的简写属性 grid-column-end 指定网格的结束位置项目
grid-column-gap指定列之间的间隙大小
grid-column-start指定网格项目的起始位置
grid-gapgrid-row-gap 和 grid-column-gap 属性的简写属性
grid-rowgrid-row-start 和 grid-row-end 属性的简写属性
grid-row-end指定网格项目的结束位置
grid-row-gap指定行之间的间隙大小
grid-row-start指定网格项目的起始位置
grid-templategrid-template-rows、grid-template-columns 和 grid-areas 属性的简写属性
grid-template-areas指定如何使用命名网格项目显示列和行
grid-template-columns指定列的大小以及网格布局中的列数
grid-template-rows指定网格布局中的行的大小
row-gap指定网格行之间的间隙

总结

本文介绍了CSS Grid网格的使用,如有问题欢迎私信和评论

标签:必知,网格,gap,column,grid,Grid,row,CSS,属性
From: https://blog.csdn.net/qq_24018193/article/details/142266714

相关文章