CSS 核心知识点 - grid

思维导图

参考网址: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_grid_layout

一、什么是 grid?

CSS Grid布局是在CSS3规范中引入的一种新的布局方式,旨在解决传统布局方法(如浮动、定位、表格布局)存在的许多问题。CSS Grid布局规范最早由W3C提出,经过多年的发展和标准化,于2017年成为W3C的推荐标准。

二、grid 布局相比 flex 布局有那些方便之处?

Html + Css 核心知识 - flex (超详细)_html flex-CSDN博客

网格布局更为方便

问题场景一:例如想要实现页面内显示多个元素、每个元素大小尺寸间距相同、每行 显示个数固定**、按行** 由左向右排序、且在页面中均匀分布。如下所示

这时候很多人第一时间想到了 flex、单行用flex很方便、多行的话需要进行一些额外运算

复制代码
.father{
      height: 80vh;
      width: 80vw;
      background-color: #f5f5f5;
      display: flex;
      flex-wrap: wrap;
      align-content: start;
      gap: 10px;
    }  
    .son{
      width: calc((100% - 50px) / 6);
      aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
      border: 1px solid red;
      box-sizing: border-box;
    }

那有没有不用计算的方案呢! grid 这时候就排上的用场了!

复制代码
.father{
      height: 80vh;
      width: 80vw;
      background-color: #f5f5f5;
      display: grid;
      /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */
      grid-template-columns: repeat(6, 1fr); /* 定义六个等宽的列 */
      align-content: start;
      gap: 10px;
    }  
    .son{
      /* width: calc((100% - 50px) / 6); */
      aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
      border: 1px solid red;
      box-sizing: border-box;
    }

问题场景二、实现等比例大小不同盒子布局、场景如下

这时候用其他方案处理就比较麻烦了、而 grid 就能很方便处理

复制代码
.father{
      height: 80vh;
      width: 80vw;
      background-color: #f5f5f5;
      display: grid;
      /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */
      grid-template-columns: repeat(6, 1fr); /* 定义六个等宽的列 */
      align-content: start;
      gap: 10px;
    }  
    .son{
      /* width: calc((100% - 50px) / 6); */
      aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
      border: 1px solid red;
      box-sizing: border-box;
      min-width: 200px;
    }
    #item1{
      grid-column: 1/3;
      grid-row: 1/3; 
    }
    #item8{
      grid-column: 5/7;
      grid-row: 2/4; 
    }

根据可用空间自动填充列(这点个人觉得非常好用)。

复制代码
.father{
      height: 80vh;
      width: 80vw;
      background-color: #f5f5f5;
      display: grid;
      /* grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr; */
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      align-content: start;
      gap: 10px;
    }  
    .son{
      /* width: calc((100% - 50px) / 6); */
      aspect-ratio: 1 / 1; /* 设置宽高比为1:1 */
      border: 1px solid red;
      box-sizing: border-box;
    }

可以看到宽度是被自动填充到333px

填充到了 359px

相关推荐
RainbowSea3 分钟前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴8 分钟前
笨方法学python -练习14
java·前端·python
Mintopia15 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia25 分钟前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农30 分钟前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye33 分钟前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤37 分钟前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子41 分钟前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo1 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang1 小时前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务