当前位置: 首页 > news >正文

CSS学习(Grid布局和flex布局比较)

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.lryc.cn/news/462359.html

相关文章:

  • RTThread-Nano学习二-RT-Thread启动流程
  • 排查sshfs挂载失败的问题
  • 【002】基于Spring Boot+Unipp的古诗词学习小程序【原创】
  • PageHelper循环依赖问题
  • k8s部署Kafka集群超详细讲解
  • 【数据采集工具】Sqoop从入门到面试学习总结
  • Matlab绘图总结(进阶)
  • QExcel 保存数据 (QtXlsxWriter库 编译)
  • k8s ETCD数据备份与恢复
  • 【C语言】循环嵌套:乘法表
  • 基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)
  • 从0开始深度学习(11)——多层感知机
  • SQL语句查询
  • OSI参考模型与TCP/IP模型
  • 深度学习-26-基于PyTorch的多层感知机DNN
  • 华为杯”第十三届中国研究生数学建模竞赛-B题:具有遗传性疾病和性状的遗传位点分析(附MATLAB代码实现)
  • 滚雪球学Redis[8.2讲]:Redis的未来发展趋势:从云服务到AI与物联网的前沿探索
  • 针对考研的C语言学习(二叉树专题层次遍历---广度优先遍历)
  • spring揭秘31-spring任务调度01-spring集成Quartz及JDKTimer定时器
  • Kafka之资源容量评估
  • 深度学习神经网络的7大分类
  • 【DNF mysql8.0安装】DNF安装MySQL服务器教程
  • 决策树与随机森林在分类问题中的应用
  • Dmitri Shuralyov的全职开源之旅
  • 基于LSTM-Transformer混合模型实现股票价格多变量时序预测(PyTorch版)
  • 创建TaskPool任务组
  • 一文1800字从0到1浅谈web性能测试!
  • 计算机网络基础(1)
  • GNU/Linux - 宏处理工具M4
  • Oracle权限安全管理