【css】grid布局学习

关注

原创最新推荐文章于 2026-08-22 18:42:26 发布 522 阅读 AI 写同款· GEO 优化 ›

CSS Grid 布局学习笔记 CSS Grid 布局是一个强大的二维布局系统，它可以在网页上创建复杂的布局。Grid 布局允许你在水平和垂直方向上设计网页布局。网格轨道包含网格列和网格行。使用和定义网格轨道。/* 定义三列，每列宽度为100px *//* 定义两行，每行高度为50px */ 阅读详情

grid据说是最强大的css布局方案。

兼容性：灵活但兼容不好，就连谷歌浏览器都有部分不兼容：https://www.caniuse.com/?search=grid

grid布局特征：将容器划分为行和列，以产生单元格

1.容器 / 项目 / 单元格 / 网格线 / 容器属性

采用grid布局的区域，称为容器（container），容器内部采用网格定位的子元素，称为项目（item）

正常情况下，n行和m列会产生n*m个单元格（cell），比如3行*3列 = 9个单元格

划分网格的线，称为网格线，正常情况下，n行有n+1根水平网格线，m列有m+1根垂直网格线

定义在容器上的为容器属性，定义在项目上的为项目属性

2.容器属性

1.display

/*grid 块级默认就是该display属性*/
display: grid

/* grid 行级*/
display: inline-grid

grid项目的float、display: inline-block、display: table-cell、vertical-align和column-* 属性设置都会失效

块级效果示意：

行级效果示意：

2.定义行和列

grid-template-columns：属性定义每一列的列宽从左到右依次指定，绝对单位和相对单位都可以

grid-template-rows：属性定义每一行的行高从上到下依次指定，绝对单位和相对单位都可以

repeat()：可以使用repeat()函数，简化重复的值；接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值；repeat()还可用于重复某种模式

auto-fill：关键字，表示自动填充

fr：关键字，fraction 的缩写，意为"片段"，用于表示比例关系

minmax()：该函数产生一个长度范围，表示长度就在这个范围之中。它接受两个参数，分别为最小值和最大值

auto：关键字表示由浏览器自己决定长度；自动填充

grid-template-columns属性和grid-template-rows属性里面，还可以使用方括号，指定每一根网格线的名字，方便以后的引用

基础代码示例：

后续（定义行和列）页面效果在该基础上叠加

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>grid布局学习</title>
    <style>
      span {
        font-size: 2em;
      }
      .item {
        font-size: 2em;
        text-align: center;
        border: 1px solid #e5e4e9;
      }

      .item-1 {
        background-color: #ef342a;
      }

      .item-2 {
        background-color: #f68f26;
      }

      .item-3 {
        background-color: #4ba946;
      }

      .item-4 {
        background-color: #0376c2;
      }

      .item-5 {
        background-color: #c077af;
      }

      .item-6 {
        background-color: #f8d29d;
      }

      .item-7 {
        background-color: #b5a87f;
      }

      .item-8 {
        background-color: #d0e4a9;
      }

      .item-9 {
        background-color: #4dc7ec;
      }
    </style>
  </head>
  <body>
    <!-- 注意，设为网格布局以后，容器子元素（项目）的
      float、display: inline-block、
      display: table-cell、
      vertical-align和column-*等设置都将失效。
    -->
    <span>foo</span>
    <div id="container">
      <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>
    <span>bar</span>

    <script type="text/javascript"></script>
  </body>
</html>

代码：

display: grid;

/* 绝对单位 */
grid-template-columns: 100px 200px 100px;
grid-template-rows: 100px 100px 100px;


/* 百分比 */
/* grid-template-columns: 33.33% 33.33% 33.33%;
grid-template-rows: 33.33% 33.33% 33.33%; */


/* repeat() */
/* grid-template-columns: repeat(3, 33.33%);
grid-template-rows: repeat(3, 33.33%); */



/* repeat() 重复某个模式*/
/* 这里示例为将100px 20px 80px 这一组数值重复3遍*/
/*grid-template-columns: repeat(3, 100px 20px 80px);*/


/* auto-fill 每列宽度150px,知道容器不能放置更多的列*/
/* grid-template-columns: repeat(auto-fill, 150px); */


/* fr */
/*表示后一列是前一列的2倍*/
/*grid-template-columns: 1fr 2fr;*/

/* 与绝对长度的单位结合使用 */
/*grid-template-columns: 50px 1fr 2fr;*/


/* minmax() */
/* minmax(100px, 2fr); 表示列宽不小于100px,不大于2fr */
/*grid-template-columns: 1fr 1fr minmax(100px, 2fr);*/


/* auto */
/* grid-template-columns: 200px auto 200px; */


/* 
 *指定网格布局为3行 x 3列，因此有4根垂直网格线和4根水平网格线。方括号里面依次是这八根线的名字 
*/

/* 网格布局允许同一根线有多个名字，比如[fifth-line row-5] */
/* 
grid-template-columns: [c1] 100px [c2] 100px [c3] auto [c4];
grid-template-rows: [r1] 100px [r2] 100px [r3] auto [r4]; 
*/

绝对单位效果示意：

相对单位效果示意：

repeat()效果示意：

repeat()将100px 20px 80px 这一组数值重复3遍效果示意：

auto-fill效果示意：

fr（grid-template-columns: 50px 1fr 2fr）效果示意：

minmax()效果示意：

auto效果示意：

网格线取名效果示意：

3.定义行列间隔

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

grid-column-gap：属性设置列与列的间隔（列间距）

grid-gap：grid-column-gap和grid-row-gap的合并简写形式

grid-template-areas：网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成

grid-auto-flow：容器的子元素会按照顺序，自动放置在每一个网格；默认值是row，即"先行后列"；还可设置为row dense/column dense,表示按顺序排列后，尽量填满空格

tips:根据最新标准，上面三个属性名的grid-前缀已经删除；grid-column-gap和grid-row-gap写成column-gap和row-gap，grid-gap写成gap

基础代码示例：

后续（定义行列间隔）页面效果在该基础上叠加

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>grid布局学习</title>
    <style>
      span {
        font-size: 2em;
      }
      .item {
        font-size: 2em;
        text-align: center;
        border: 1px solid #e5e4e9;
      }

      .item-1 {
        background-color: #ef342a;
      }

      .item-2 {
        background-color: #f68f26;
      }

      .item-3 {
        background-color: #4ba946;
      }

      .item-4 {
        background-color: #0376c2;
      }

      .item-5 {
        background-color: #c077af;
      }

      .item-6 {
        background-color: #f8d29d;
      }

      .item-7 {
        background-color: #b5a87f;
      }

      .item-8 {
        background-color: #d0e4a9;
      }

      .item-9 {
        background-color: #4dc7ec;
      }
      #container{
         display:grid;
         grid-template-columns: repeat(3,100px);
         grid-template-rows: repeat(3,100px);
      }
    </style>
  </head>
  <body>
    <span>foo</span>
    <div id="container">
      <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>
    <span>bar</span>

    <script type="text/javascript"></script>
  </body>
</html>

代码：

/* grid-row-gap / grid-column-gap */
grid-row-gap: 20px;
grid-column-gap: 40px;

/* grid-gap: <grid-row-gap> <grid-column-gap>; */
/* grid-gap: 20px 40px; */

/* 如果grid-gap省略了第二个值，浏览器认为第二个值等于第一个值 */
/* grid-gap: 40px; */





/* 划分出9个单元格，然后将其定名为a到i的九个区域，分别对应这九个单元格 */
/* grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';
*/


/* 多个单元格合并成一个区域的写法 */
/* 将9个单元格分成a、b、c三个区域 */
/* grid-template-areas: 'a a a'
                     'b b b'
                     'c c c'; 
*/


如果某些区域不需要利用，则使用"点"（.）表示 */
/* 代码中，中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域 */
/* grid-template-areas: 'a . c'
                     'd . f'
                     'g . i'; 
 */
       

/* 设成column，变成"先列后行" */
/* grid-auto-flow: column; */

grid-row-gap和grid-column-gap效果示意：