当前位置：首页 > news >正文

CSS—网格布局Grid

news 来源：原创 2025/5/26 1:04:54

网格布局grid

提供了带有行和列的基于网格的布局系统，无需使用浮动和定位。

当 HTML 元素的 display 属性设置为 grid 或 inline-grid 时，它就会成为网格容器。

更多布局模式可以参考之前的博客：

CSS—flex布局、过渡transition属性、2D转换transform属性、3D转换transform属性

有关display属性之前也有写过：

CSS—显示模式display、float浮动，清除浮动的6种方式、定位position、元素溢出overflow

当把网格项目放在网格容器中时，引用行号：

把网格项目放在列线 1，并在列线 3 结束它：

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

属性	描述
`grid-column`	定义将项目放置在哪一列上。是 grid-column-start和grid-column-end缩写</br>例如：`grid-column: 2/3;`第2列开始第3列结束。
`grid-row`	定义将项目放置在哪一行上，写法与`grid-column`类似
`grid-area`	`grid-row-start、grid-column-start、grid-row-end 和 grid-column-end` 属性的简写。也可用于为项目命名。
`grid-column-gap`	调整列间隙
`grid-row-gap`	调整行间隙
`grid-gap`	调整间隙
`grid-template-columns`	定义网格布局中的列数，并可定义每列的宽度。以空格分隔的列表，其中每个值定义相应列的长度。
`grid-template-rows`	定义每列的高度
`justify-content`	在容器内对齐整个网格。网格的总宽度必须小于容器的宽度， justify-content 属性才能生效。
`align-content`	垂直对齐容器内的整个网格。网格的总高度必须小于容器的高度， align-content 属性才能生效。

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<p>Item1 的名为 "myArea"，会占据两列两行</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

</body>
</html>

【记录学习过程的笔记，欢迎大家一起讨论，会持续更新】