grid布局真的不难学！新时代 grid 布局快速入门！

学grid布局真的不难！轻松掌握 grid 新时代布局

前言

​ grid布局目前不太常用, 是因为有些浏览器不支持, 但是主流浏览器基本都完 全支持, 并且作为一个时代趋势, grid布局会在将来越来越流行, 所以学习grid 布局紧跟时代步伐或许是一个不错的选择

介绍

• Grid 布局的本质

  1. 将当前容器视为一个网格, 同时也类似一个表格, 这里我们理解为grid 依赖表格的 行、列 特性对子元素进行布局, 但为什么不说 grid布局类似 表格 却是 网格, 因为使用网格这次词更贴切 灵活整合行列进行排布 , 比如说一个元素将九宫格 1 4 7格 占满, 这或许可以通过表格做到, 但表格的作用始终是记录数据, 而网格更倾向对元素排布这个概念

     这是一个表格

     编号	姓名	性别
     1000	张三	男
     1001	李四	女

     这是一个网格 *现在分清了吧

     

  2. grid 的 行 (row) 与 列 (column)
     行 规定当前容器的高平分出多少行, 并且 行的变化会影响元素的大小
     列 规定在行的基础上平分出多少列, 并且 列的变化会影响元素的大小

     在此过程中, 网格内的元素宽高全部都是 自适应的

     示例 : 改变这个表格为 两行三列

     

     还是三行, 明明指定的是两行, 但我们想想 : 我们指定两行就意味着 从9个元素变成6个元素, 这grid布局总不能把这多出来的3个删掉吧, 所以, 浏览器有一套规则去指定这个不被在定义内的元素该如何摆放
     这是浏览器的默认行为, 称之为’隐式网格’

     隐式网格

     Grid 中，隐式网格是指那些 非定义覆盖元素, 浏览器会自动生成行和列去适应。

     • 非定义覆盖元素 是什么?
       上文定义了两行三列, 总共应该有6个元素, 但实际上总共有9个元素, 而这些不被定义包含在内的元素就被称为 非定义覆盖 元素

     • 而定义覆盖 就是所有元素都被定义包含

       [tips] “非定义覆盖元素” 的官方叫法是 “未通过显式定义创建的网格轨道”)

     生成原因

     • 出现非定义覆盖元素
       如果网格定义的行数或列数不足以容纳所有子元素，浏览器会自动创建额外的行或列

     好处

     • 提升布局的灵活性, 但是一般要尽量使用覆盖定义去避免

     解决

     • 控制隐式网格 : 1.定死行高
       

     • 2.溢出隐藏 这么麻烦还不如覆盖定义捏 ( •́ _ •̀)
       

开始

准备父元素, 设置此容器为一个grid布局,

.parent {
     display: grid;
     width: 300px;
     height: 300px;
     border: solid 3px #ccc;
}

定义三行三列

• repeat() 函数

  repeat 译为重复, 其中包含 两个参数 :

  1. 多少个 (重复几次)
  2. 多大 (占据多少空间)
     • 一般使用 1fr,
       例 : repeat(3,1fr); 将容器分为 3 份，每份占 1fr（1/3 的空间）

.parent {
     display: grid;
     width: 300px;
     height: 300px;
     border: solid 3px #ccc;
     
     /*定义行 rows*/
     grid-template-rows: repeat(3,1fr); /* 定义三行*/
     /*定义列 colums*/
     grid-template-columns: repeat(3,1fr); /* 定义三列*/
}

放入子元素, 要与定义的行列对等

总共三行三列, 总共九列, 那么就放入九个子元素

     .son {
	    /* 不需要给宽高, 会自动分配*/
          
          background-color: blueviolet;
          background-clip: content-box;
          /*content-box：表示背景限制在内容框内，不包括padding 和 border。*/
          border: solid 1px blueviolet;
          padding: 10px;
          box-sizing: border-box;
    }
</style>

<div class="parent">
     <div class="son">1</div>
     <div class="son">2</div>
     <div class="son">3</div>
     <div class="son">4</div>
     <div class="son">5</div>
     <div class="son">6</div>
     <div class="son">7</div>
     <div class="son">8</div>
     <div class="son">9</div>
</div>

然后就完成啦

效果 :

术语 ‘轨道’

• 介绍

  • 轨道 相当于网格布局中的 行或列。

• 基本概念

  • 行轨道
    • 由 grid-template-rows 定义，描述容器的垂直分布。
    • 例：grid-template-rows: 100px 1fr; 定义了两行，高度分别为 100px 和 1fr。
  • 列轨道
    • 由 grid-template-columns 定义，描述容器的水平分布。
    • 例：grid-template-columns: 50% auto; 定义了两列，宽度分别为 50% 和 auto(自适应)。
  • 单个轨道
    • 两条网格线之间的区域

轨道的其他定义方式

固定单位（px, %）

适用于需要精确控制轨道大小的场景。

grid-template-rows: 100px 200px 150px; /* 三行高度分别为100px、200px、150px */
grid-template-columns: 300px 50% 1fr;/* 三列宽度分别为300px、50%宽度、1fr 自适应*/

自动调整（auto）

根据内容大小动态调整轨道尺寸。

grid-template-rows: auto auto;         
grid-template-columns: auto 1fr;

对应场景：博客布局

• 第一行显示文章标题（高度根据标题内容动态调整）。
• 第二行显示文章内容（高度也根据内容动态调整）。
• 第一列用于显示作者头像（宽度根据头像大小调整）。
• 第二列用于显示标题和内容（占用剩余的水平空间）。

<div style="display: grid; grid-template-rows: auto auto; grid-template-columns: auto 1fr;">
  <div>头像</div>
  <div>标题</div>
  <div>内容</div>
</div>

动态布局

前置知识1 minmax() 函数

• 适用于响应式布局，限制轨道的最大/最小值。

• 语法

  minmax(min, max)
  

• min：元素最小尺寸

• max：元素最大尺寸

前置知识2 auto-fill 和 auto-fit

• 相同点

  • 两者都用于在容器中自动生成列或行。

• 不同点

  特性	auto-fill	auto-fit
  行为	尽可能多地生成列或行，即使有空轨道。	自动调整列或行，压缩多余空轨道，填充可用空间。
  空白区域	允许产生空白轨道。	自动隐藏空白轨道并重新适配。

开始

• 场景：图片库布局，图片宽度最小 100px，多余空间平分。

• 思路

  • 让图片大小自适应：宽度会根据容器剩余空间自动调整。

  • 限制图片宽度范围：最小宽度为 100px，最大宽度自适应剩余空间。

  • 容器宽时，多张图片平铺在一行；

  • 容器窄时，图片宽度不会小于 100px，多余图片自动换行。

.gallery {
     display: grid;
     /* 
          - auto-fill: 自动生成列填满容器。
          - minmax(100px, 1fr): 宽度 100px 起自适应剩余空间。
          - 容器够宽时增加列，窄不低于 100px，超出内容自动换行。
     */
     grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     gap: 10px;
}
.item {
     background: lightblue;
     height: 100px;
}

如果这篇文章帮到你, 帮忙点个关注呗, 点赞或收藏也行鸭 ～ (｡•ᴗ-)✧

… \ '(இ﹏இ`｡)