🔥速通 Grid 布局基础用法🔥

MrSkye
408 阅读8分钟

Grid 布局

前言

这是作者的学习笔记，没有添加修饰就呈现上来了，感兴趣的可以看一看哟，也欢迎各位大佬指出我笔记的错误，大家一起进步！！

1. 什么是Grid布局

Flex布局是轴线布局，只能指定“项目”针对轴线的位置，可以看作为一维布局，Grid布局则是将容器划分成“行”和“列”，产生单元格，然后指定“项目所在”的单元格，可以看作是二维布局，Grid布局远比Flex布局强大。

image-20250511105454433.png

2. 布局方式 ——常用三种

  1. 传统布局方式：利用position属性+display属性+float属性布局，兼容性最好，但是效率低，麻烦！

  2. Flex布局：有自己的一套属性，效率高，学习成本低，兼容性强。

  3. Grid布局：网格布局是最强大的CSS布局方案，但是知识点比较多，学习成本相对困难，目前的兼容性不如Flex好。

3. 基本概念

image-20250511110110761.png

1.容器——有容器属性

2.项目——有项目属性

最重要的图！！！！！！

image-20250511111300694.png

4. 容器属性

  1. grid-template-columns
  2. grid-template-rows
  3. grid-row-gap
  4. grid-column-gap
  5. grid-gap(3,4的缩写)
  6. grid-template-areas
  7. grid-auto-flow
  8. justify-items
  9. align-items
  10. place-items(8,9的缩写)
  11. justify-content
  12. align-content
  13. place-content(11,12的缩写)
  14. grid-auto-columns
  15. grid-auto-rows

grid-template-*

你想要多少行，多少列，就填写相应属性值的个数，不填写则自动分配。

grid-template-columns

grid-template-rows

repeat()

第一个参数是重复的次数，第二个参数是所要重复的值

grid-template-columns: 100px 100px 100px;

相当于

grid-template-columns: repeat(3,100px);

auto-fill

有时单元格的大小是固定的，但是容器的大小不确定，这个属性就会自动填充

grid-template-columns: repeat(auto-fill,100px)

当将容器的固定大小去掉后，伸缩网页，容器的大小变化，auto-fill就会使得里面的元素自行填充。

图1：将页面变小，容器变小时：

image-20250511151418534.png

图2：将页面拉伸，容器变大时：

image-20250511151425811.png

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
    <div class="main">
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <div class="item item-6">6</div>
        <div class="item item-7">7</div>
        <div class="item item-8">8</div>
        <div class="item item-9">9</div>
        <div class="item item-10">10</div>
    </div>
</body>
</html>

.main{
    display: grid;
    /* width: 600px;
    height: 600px; */
    border: 10px solid skyblue;
    grid-template-columns:repeat(auto-fill, 100px) ;
    grid-template-rows: 100px 100px 100px 100px ;


}   
.item-1{
    background-color: wheat;
}
.item-2{
    background-color: blue;
}
.item-3{
    background-color: violet;
}
.item-4{
    background-color: red;
}
.item-5{
    background-color: rgb(17, 128, 34);
}
.item-6{
    background-color: rgb(15, 66, 123);
}
.item-7{
    background-color: rgb(161, 38, 130);
}
.item-8{
    background-color: rgb(198, 109, 128);
}
.item-9{
    background-color: rgb(3, 232, 248);
}
.item-10{
    background-color: rgb(166, 249, 11);
}
fr

为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写，意为“片段”）

grid-template-columns: repeat(4,1fr);
宽度平均分成4份

image-20250511152502494.png

grid-template-columns: 1fr 2fr 3fr;

image-20250511152622638.png

minmax()

函数产生一个长度范围，表示长度就在这个范围之中，它接收两个参数，分别为最小值和最大值

grid-template-columns: 1fr minmax(150px,1fr) //也要去除容器宽高

最小：

image-20250511153228527.png

最大：

image-20250511153255208.png

auto

由浏览器自己决定长度

grid-template-columns: 100px auto 100px;

image-20250511153701605.png

网格线

可以用方括号定义网格线名称，方便以后的引用

grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4]

image-20250511154104401.png

没什么效果，是以后用来定位用的。

grid-*-gap

现在已经去除了grid前缀，变成了row-gap和column-gap.

row-gap:行与行之间的距离

column-gap:列与列之间的距离

想要同时改变可以使用 gap

row-gap:30px;
column-gap:40px;
gap:50px;

grid-template-area

一个区域由一个或者多个单元格组成，由你决定（具体使用，需要在项目属性里设置）

.main{
    display: grid;
    width: 600px;
    height: 600px;
    border: 10px solid skyblue;
    grid-template-columns:[c1] 100px [c2]100px [c3]100px[c4] ;/*此时定义了三列均为100px，如果不定义行，则默认将元素撑到底部*/
    grid-template-rows: 100px 100px 100px 100px ;
    gap:10px;
    grid-template-areas: 'a b c' 'd e f' 'g h i' 'j k l';
}   

grid-template-areas:'a b c'
					'd e f'
					'g h i';
grid-template-areas:'a a a'
					'b b b'     
					'c c c';
			/*具有同样标识的为同一块区域*/
grid-template-areas:'a . c'
					'd . f'
					'g . i';

区域不需要利用，则使用点 “ . " 来表示

区域的命名会影响到网格线。每个区域的起始网格线，会自动命名为 区域名-start，终止网格线自动命名为区域名-end

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是”先行后列“，即先填满第一行，再开始放入第二行（就是子元素的排放顺序）

grid-auto-flow: row;

image-20250511155907778.png

grid-auto-flow: column;

image-20250511155845967.png

当元素大小不一利用 grid-auto-flow: row 时：

image-20250511160240754.png

解决方法：利用

grid-auto-flow: row dense

image-20250511160225233.png

justify-items(水平方向) / align-items(垂直方向)

设置单元格内容的水平和垂直的对齐方式，是容器属性，对容器内所有的属性有效。

justify-items: start | end | center | stretch

start: 在项目左边对齐

end: 在项目的右边对齐

center: 在项目的中间对齐

align-items: start | end | center | stretch

start: 在项目上边对齐

end: 在项目的下边对齐

center: 在项目的中间对齐

**place-items: center center ** 水平竖直方向对齐方式

justify-content(水平方向)/align-content(垂直方向)

Content ？ 见上面基本概念的图

设置整个内容区域的水平和垂直的对齐方式

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

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

grid-auto-columns/rows

用来设置多出来的项目的宽和高,控制的是隐式行/列（即我们没有定义的行列）。

grid-auto-rows：控制隐式行的高度

grid-auto-columns: 控制隐式列的宽度

比如：

.main{
    display: grid;
    width: 600px;
    height: 600px;
    border: 10px solid skyblue;
    grid-template-columns:[c1] 100px [c2]100px [c3]100px[c4] ;/*此时定义了三列均为100px，如果不定义行，则默认将元素撑到底部*/
    grid-template-rows: 100px 100px 100px ;
    gap:10px;
    grid-template-areas: 'a b c' 'd e f' 'g h i' 'j k l';
    grid-auto-flow: row;
    /*place-items: center center;*/
}

我只设置了 3 x 3 的高度

效果图如下：

image-20250511165320859.png

利用 grid-auto-rows后：

image-20250511165450992.png

在上述例子中，你可能会发现我们利用 grid-auto-columns对项目进行改变，10号元素没有变化，这是因为10号元素位于隐式行而不位于隐式列中，我们利用

grid-template-columns:[c1] 100px [c2]100px [c3]100px[c4] ; grid-template-rows: 100px 100px 100px ;

定义了三行三列，10号元素位于4行1列，为隐式行，不为隐式列，所以grid-auto-columns对于10号元素没用，而grid-auto-rows对它有用。

5. 项目属性

[!tip]

  1. grid-column-start
  2. grid-column-end
  3. grid-row-start
  4. grid-row-end
  5. grid-column(1,2的简写形式)
  6. grid-row(3,4的简写形式)
  7. grid-area
  8. justify-self
  9. align-self
  10. place-self(8,9的简写形式)

grid-column/row

可以添加到项目的CSS属性中，利用网格线选择占用网格的多少，

grid-column:跨列占用多少

grid-row：跨行占用多少

写法：

grid-column:2 / 4 
等同于
grid-column-start:2
grid-column-end:4
另一种写法：
grid-column-start: span 2; 从起始线向右跨2格
grid-column-end: span 2;   从结束线向左跨2格

image-20250511172152340.png

运用：

.item-1{
    background-color: wheat;
    grid-column-start: 2;
    grid-column-end: 4;
}    /*从第2条列网格线开始，到第4条列网格线结束*/
或者
.item-1{
    background-color: wheat;
    grid-column:2 / 4;  
}    /*从第2条列网格线开始，到第4条列网格线结束*/

image-20250511172439593.png

.item-1{
    background-color: wheat;
    grid-row-start: 2;
    grid-row-end: 4;
}
或者
.item-1{
    background-color: wheat;
    grid-row:2 / 4 ;
}

image-20250511172627926.png

更多写法：

grid-column-end: span 2;   
grid-column-start: span 2;  //效果相同
从起始线向右跨2格
从结束线向左跨2格

image-20250511173058659.png

grid-area

可以为项目指定区域，还可以用作grid-row-start grid-column-start grid-row-end grid-column-end的合并简写形式，直接指定项目位置

例子：

.main{
    display: grid;
    width: 600px;
    height: 600px;
    border: 10px solid skyblue;
    grid-template-columns:[c1] 100px [c2]100px [c3]100px[c4] ;/*此时定义了三列均为100px，如果不定义行，则默认将元素撑到底部*/
    grid-template-rows: 100px 100px 100px ;
    gap:10px;
    grid-template-areas:
        'a b c' 
        'z z z' 
        'g h i' 
        'j k l';
    grid-auto-flow: row;
    /*place-items: center center;*/
    grid-auto-rows: 150px;
    grid-auto-columns: 100px;
    
}   
.item-1{
    background-color: wheat;
    
    grid-area:z;
}

image-20250511174159444.png

grid-area: < row-start > / < column-start > / < row-end > < column-end >

image-20250511173944886.png

justify-self / align-self / place-self

justify-self属性设置单元格内容的水平位置，和justify-items的用法完全一致，但是只作用于单个单元格

align-self属性设置单元格内容的垂直位置，和align-items的用法完全一致，但是只作用于单个单元格

align-self: start | end | center | stretch ;

place-self属性是align-self 和 justify-self 属性的合并简写形式

place-self: center center;

总结

Grid 布局不仅是工具，更是一种 结构化思维 的体现——将页面视为模块化网格的组合，让代码设计与视觉稿高度统一。从简单的等分布局到杂志级复杂排版，Grid 都展现出强大的掌控力。掌握它，你便拥有了网页空间的“造物主”视角！

avatar
文章
阅读
粉丝