当前位置： 首页 > article >正文

CSS学习（Grid布局和flex布局比较）

article 2024/10/24 15:27:11

grid网格布局真香，比flex方便太多了，grid-template-columns用法

文章目录

    • flex布局的时候
    • 网格grid布局的时候
      • 可以修改某一列的像素
      • 可以修改某一列的宽度占比
      • 自适应屏幕分列
      • 让第一个元素长宽都占2个

flex布局的时候

在这里插入图片描述
最后一行不够4个的时候 最下面一行无法对齐
在这里插入图片描述

网格grid布局的时候

在这里插入图片描述

在这里插入图片描述
添加间隔
在这里插入图片描述

在这里插入图片描述

可以修改某一列的像素

在这里插入图片描述

在这里插入图片描述

可以修改某一列的宽度占比

改成2fr 相当于占两份
在这里插入图片描述

在这里插入图片描述

写固定格式 前面是分几份 后面是每份的大小
在这里插入图片描述

在这里插入图片描述
因为不齐 还是使用自动填充 1fr比较好
在这里插入图片描述
在这里插入图片描述

自适应屏幕分列

使用自适应屏幕方法
auto-file 代表自适应 minmax(最小值，最大值)
在这里插入图片描述
记得修改宽度
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

让第一个元素长宽都占2个

只让第一个变大
在这里插入图片描述

占两行
grid-row : 1/3 1代表开始的列线是第一个 3代表结束的列线
在这里插入图片描述

在这里插入图片描述

占两列

在这里插入图片描述

在这里插入图片描述


http://www.kler.cn/news/363161.html

相关文章：

  • 解锁文本数据可视化的无限可能：Wordcloud库全解析
  • 探索音频在线剪辑工具的奇妙世界
  • Mytatis-plus使用sl4j日志打印SQL
  • 小新学习K8s第一天之K8s基础概念
  • Golang 并发编程：Context 包的使用与并发控制
  • RK3576 安卓SDK编译环境搭建
  • SDK下载依赖到IDEA的详细指南
  • ctfshow-文件上传-151-161
  • 三大智能体平台深度对比：字节Coze、百度AppBuilder、智谱智能体优劣解析
  • MATLAB中head函数用法
  • 热门伤感短视频素材网站推荐，轻松获取创作灵感
  • 【Linux笔记】Linux命令与使用
  • 前端跨系统请求接口报错
  • Bug：通过反射修改@Autowired注入Bean的字段，明确存在，报错 NoSuchFieldException
  • 可编辑38页PPT | 柔性制造企业数字化转型与智能工厂建设方案
  • 分享一个IDEA里面的Debug调试设置
  • 驾校小程序：一站式学车解决方案的设计与实践
  • 内网穿透
  • 如何使用 pnpm 进行打补丁patch操作？推荐两个方法
  • 【小红书一面】Kafka 是如何选择 Leader的？
  • Unity目录居然这么写就不会被引入到项目内
  • python第五次作业
  • 手机怎么玩GTA5？GameViewer远程助你手机畅玩GTA5侠盗飞车
  • 【RoadRunner】自动驾驶模拟3D场景构建 | 软件简介与视角控制
  • etl-查询错误log日志和oracle删除数据表空间
  • ansible一键部署k8s集群