9 HTML-Grid网格布局
发表更新HTML

9 HTML-Grid网格布局

概述

Grid 布局即网格布局，目前css布局方案中,网格布局可以算得上是最强大的布局方案了。它可以将网页 分为一个个网格，然后利用这些网格组合做出各种各样的布局。比较擅长将一个页面划分为几个主要区域，以及定义这些区域的大小、位置、层次等关系，目前唯一一种 CSS 二维布局。在兼容性方面，截至目前，几乎所有的浏览器都对 CSS Grid 提供了原生的支持。

flex和Grid布局有实质区别，flex是一维布局，Grid是二维布局，也就是说flex布局一次只能处理一个维度上的元素。Grid是将容器划分为行和列。

Grid布局的属性

  • 容器(container)：具有容器属性
  • 项目(items)：有项目属性
  • 行
  • 列
  • 间距（gap）:单元格之间的距离
  • 区域（area）:自己划分每个单元格占据的区域
  • 内容

容器和项目

Grid和flex类似，定于在容器上，称为容器属性，定义在项目上，称为项目属性

声明display:grid则容器是一个块元素，display:inline-grid则容器为行内元素

注意：设置为网格布局后，子元素的float、display:inline-block、display:table-cell、vertical-aligin等都会失效

网格线

网格线是Grid布局规范中最重要的概念之一。网格线是用来在水平和垂直方向分割网格的线。水平方向的网格线是从左向右；垂直方向是从上往下。网格线的编号都是从 1 开始的。

image-20240815103219977

容器属性

grid-template-columns和grid-template-rows属性

1
2
3
4
5
6
.box {
 display: grid;
 grid-template-columns: 100px 100px 100px;
 grid-template-rows: 100px 100px 100px;
 /*指定了一个三行三列的网格，列宽和行高都是100px*/
}

repeat()

有时候，重复写同样的值非常麻烦，尤其网格很多时。这时，可以使用 repeat() 函数，简化重复的 值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

1
2
3
4
5
.box {
 display: grid;
 grid-template-columns: repeat(3, 33.33%);
 grid-template-rows: repeat(3, 33.33%);
}

auto-fill

有的时候，父容器的尺寸是不确定的，我们需要把子元素往父容器中逐个填充，这个时候我们可以利用 auto-fill。也就是在不确定容器尺寸时的时候使用

1
2
3
4
5
box {
 display: grid;
 grid-template-columns: repeat(auto-fill, 100px);
}
/*表示每列宽度 100px ，然后自动填充，直到容器不能放置更多的列*/

案例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<head>
    <style>
        .container {
            display: grid
            grid-template-columns: repeat(auto-fill,100px);
            justify-content: space-between;
            gap: 30px;
        }
        .item {
            border: 1px solid #333;
            height: 100px;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
    </div>
</body>

img56

fr

fr 是单词fraction的缩写，表示分数

Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。 fr 单位代表网格容器中可 用空间的一等份。 grid-template-columns: 200px 1fr 2fr 表示第一个列宽设置为 200px，后面剩 余的宽度分为两部分，宽度分别为剩余宽度的 1/3 和 2/3

1
2
3
4
.box {
 display: grid;
 grid-template-columns: 200px 1fr 2fr;
}

minmax()

我们有时候想给网格元素一个最小和最大的尺寸， minmax() 函数产生一个长度范围，表示长度就在这 个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。grid-templatecolumns: 1fr 1fr minmax(300px, 2fr)的意思是，第三个列宽最少也是要 300px，但是最大不能大于第一第二列宽的两倍。

auto

auto 关键字表示由浏览器自己决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。 grid-template-columns: 100px auto 100px 表示第一第三列为 100px，中间由浏览器决定长度。

row-gap

row-gap属性设置行与行的间隔（行间距）

row-gap: 10px表示行间距是 10px

column-gap

column-gap属性设置列与列的间隔

column-gap: 20px表示列间距是 20px

  • gap属性是column-gap和row-gap的合并简写形式：gap: 10px 20px

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列”，即 先填满第一行，再开始放入第二行 这个顺序由 grid-auto-flow 属性决定，默认值是 row ，即”先行后列”。也可以将它设成 column ，变 成”先列后行”。

1
grid-auto-flow: column;

justify-items

justify-items 属性设置单元格内容的水平位置（左中右）

1
2
3
.container {
   justify-items: stretch | start | end | center;
}

align-items

align-items 属性设置单元格内容的垂直位置（上中下）

1
2
3
.container {
   align-items: stretch | start | end | center;
}

start：对齐单元格的起始边缘。

end：对齐单元格的结束边缘。

center：单元格内部居中。

stretch：拉伸，占满单元格的整个宽度（默认值）

  • place-items 属性是 align-items 属性和 justify-items 属性的合并简写形式place-items: start end;

justify-content

justify-content 指定了网格元素的水平分布方式。此属性仅在网格总宽度小于grid容器宽度时候有效 果。例如，我们网格设定的都是固定的宽度值，结果还有剩余空间。

1
justify-content: stretch | start | end | center | space-between | space-around | space-evenly;

stretch：默认值。拉伸，宽度填满grid容器，拉伸效果需要网格目标尺寸设为auto时候才有效，如果定死了宽度，则无法拉伸。

start：默认值。逻辑CSS属性值，与文档流方向相关。默认表现为左对齐。

end：逻辑CSS属性值，与文档流方向相关。默认表现为右对齐。

center：表现为居中对齐。

space-between：表现为两端对齐。

between是中间的意思，意思是多余的空白间距只在元素中间区域 分配。

space-around：around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最 终视觉上边缘两侧的空白只有中间空白宽度一半。

space-evenly：evenly是匀称、平等的意思。也就是视觉上，每个子项两侧空白间距完全相等。

align-content属性

align-content 属性是整个内容区域的垂直位置（上中下） align-content 可以看成和 justify-content 是相似且对立的属性， justify-content 指明水平方向 grid子项的分布方式，而 align-content 则是指明垂直方向每一行grid元素的分布方式。如果所有grid 子项只有一行，则 align-content 属性是没有任何效果的。 语法如下：

1
align-content: stretch | start | end | center | space-between | space-around | space-evenly;

stretch：默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是 50%。

start：逻辑CSS属性值，与文档流方向相关。默认表现为顶部堆砌。

end：逻辑CSS属性值，与文档流方向相关。默认表现为底部堆放。

center：表现为整体垂直居中对齐。

space-between：表现为上下两行两端对齐。剩下每一行元素等分剩余空间。

space-around：每一行元素上下都享有独立不重叠的空白空间。

space-evenly：每一行元素都完全上下等分。

  • place-content 是align-content 和 justify-content属性的缩写。
1
2
3
4
.container {
   place-items: <align-content> / <justify-content>;
}
/*如： place-content: center center; */

grid-auto-columns 和grid-auto-rows

grid-auto-columns 属性和 grid-auto-rows 属性用来设置，浏览器自动创建的多余网格的列宽和行高。如果不指定这两个属性，浏览器完全根据单元格内容的大小，决定新增网格的列宽和行高。

1
2
3
4
5
6
.container {
 display: grid;
 grid-template-columns: 100px 100px 100px;
 grid-template-rows: 100px 100px 100px;
 grid-auto-rows: 50px; 
}

项目属性

grid-column/row-start/end

表示grid子项所占据的区域的起始和终止位置，包括水平方向和垂直方向

grid-column-start 属性：左边框所在的垂直网格线

grid-column-end 属性：右边框所在的垂直网格线

grid-row-start 属性：上边框所在的水平网格线

grid-row-end 属性：下边框所在的水平网格线

1
2
3
4
5
6
.item-1 {
 grid-column-start: 1;
 grid-column-end: 3;
 grid-row-start: 2;
 grid-row-end: 4;
}

这四个属性的值还可以使用 span 关键字，表示”跨越”，即左右边框（上下边框）之间跨越多少个网格

1
2
3
.item-1 {
 grid-column-start: span 2;
}

项目的左边框距离右边框跨越2个网格 使用这四个属性，如果产生了项目的重叠，则使用 z-index 属性指定项目的重叠顺序

grid-column/row

grid-column 属性是 grid-column-start 和 grid-column-end 的合并简写形式， grid-row 属性是 grid-row-start 属性和 grid-row-end 的合并简写形式。

1
2
3
4
.item {
 grid-column: <start-line> / <end-line>;
 grid-row: <start-line> / <end-line>;
}
1
2
3
4
5
6
7
8
9
10
11
.item-1 {
 grid-column: 1 / 3;
 grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
 grid-column-start: 1;
 grid-column-end: 3;
 grid-row-start: 1;
 grid-row-end: 2;
}

这两个属性之中，也可以使用 span 关键字，表示跨越多少个网格

1
2
3
4
5
6
7
8
9
10
11
.item-1 {
 background: #b03532;
 grid-column: 1 / 3;
 grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
 background: #b03532;
 grid-column: 1 / span 2;
 grid-row: 1 / span 2;
}

justify/align-self

justify-self 属性设置单元格内容的水平位置（左中右），跟 justify-items 属性的用法完全一致， 但只作用于单个项目。

align-self 属性设置单元格内容的垂直位置（上中下），跟 align-items 属性的用法完全一致，也是 只作用于单个项目。

.item { justify-self: start | end | center | stretch; align-self: start | end | center | stretch; }

1
2
3
4
start：对齐单元格的起始边缘。
end：对齐单元格的结束边缘。
center：单元格内部居中。
stretch：拉伸，占满单元格的整个宽度（默认值）。
  • place-self属性 place-self 属性是 align-self 属性和 justify-self 属性的合并简写形式

grid-template-areas

可以使用 grid-area 属性命名网格项目，然后在 grid-template-areas 属性中引用该名称

1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 
            "a a a"
            "b c c"
            "b c c";
}

image-20240815112242798

1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 
            "b b a"
            "b b c"
            "b b c";
}

image-20240815112318181

1
2
3
4
5
6
7
8
9
10
.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 
            "a a ."
            "a a ."
            ". b c";
}
/*如果某些区域不需要利用，则使用"点"（.）表示。*/

image-20240815112339763

9 HTML-Grid网格布局

https://bubuweiying.site/9HTMLGrid网格布局/

作者

步步为营

发布于

2024-08-15

更新于

2025-03-15

许可协议

#

喜欢这篇文章？打赏一下作者吧

交个朋友 ↘

分类

链接

标签

.net5
.net core40
AI11
AJAX4
C#5
C#互操作1
C#接口1
C++1
C++/CLI5
C/C++2
CPP9
CSS3
CSnakes1
ChatGPT1
Docker1
Dos1
Flex1
GMesh2
Git1
HTML5
JavaScript10
Linux1
MCP2
Nginx3
NumPy1
OCC6
OSS1
QML1
QT28
Quartz.net3
SEO2
SVG1
Semantic Kernel18
TypeScript1
UML1
VTK4
VUE30
WPF51
Web APIs6
Workflow Core7
blazor5
hexo1
http1
node.js2
python17
three.js2
单元测试1
模式匹配1
源代码生成器2
观察者模式1
计算机图形学5
高级调试2

最新文章

×