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

深入布局- grid布局

属性使用案例:

一、display 通过给元素设置:display:grid | inline-grid,可以让一个元素变成网格布局元素,

      display: grid:表示把元素定义为块级网格元素,单独占一行;(如下图:)

      

      display: inline-grid:表示把元素定义为行内块级网格元素,与其他行内元素同行;(如下图:)

      

二、grid-template-columns 与 grid-template-rows: 定义网格行和列的大小。取值如下:

none、[linenane]、length、percentage、flex、max-content、min-content、minmax(min,max)、auto、fit-content()、repeat()、

1.none: 表示没有显式的列轨道,任何列都将隐式生成,并且它们的大小将由 grid-auto-columns 属性确定。

      

2.length: 固定单位及百分比px, pt,vh, rem,。

3.percentage: 百分比: %。

4.auto:如果该网格轨道为最大时,该属性等同于 <max-content>,为最小时,则等同于 <min-content>注意:网格轨道大小为 auto(且只有为 auto)时,才可以被属性 align-content 和 justify-content 拉伸。

4.flex: 弹性系数 fr, 每个项目会根据弹性系数按比例分配剩余空间

  以2行3列的布局为例:行高为100px, 第一列宽50px, 第二列为1fr, di三列为2fr

.grid-container{
  display: grid;
  grid-template-rows: 100px 100px;
  grid-template-columns: 50px 1fr 2fr;
}

5.max-content、min-content、fit-content

  • fit-content 表示公式 max(minimum, min(limit, max-content)),这基本上计算为 minmax(auto, max-content) 和 minmax(auto, limit) 两者中的较小值。
  • max-content 以内容的最大宽度来定义。
  • min-content 以内容的最小宽度来定义

以2行3列的布局为例:第一列为max-content, 第二列min-content, 第三列为fit-content(10px), 效果如下:

grid-template-columns: max-content min-content fit-content(10px);

grid-template-columns: max-content min-content fit-content(200px);

6.minmax(min,max): 定义大小范围的属性,大于等于 min 值, 最大值可以设置为弹性系数fr, 最小值不行。

7.repeat( [ <positive-integer> | auto-fill | auto-fit ] , <track-list>):表示网格轨道的重复部分,以一种更简洁的方式去表示大量而且重复列的表达式。 

第一个参数

  • 数字
  • auto-fill:可用空间内创建尽可能多的网格,并在必要时压缩元素以填充空间(适合于需要灵活适应数量不同屏幕尺寸和元素的场景‌)
  • auto-fit:容器宽度超出了元素所需宽度,会拉伸元素来填充容器,确保每行网格数最多等于元素个数(适合于固定数量的元素需要显示在每一行的情况)

注意: auto-fill auto-fit 必须在容器宽度足够大, 元素不换行的情况下才能看出区别

第二个参数

  • 长度值,可使用单位包括vh、fr、px、em、%、ch等
  • min-content
  • max-content
  • auto
  • minmax()函数,其可以嵌套min()或者max()函数
  • fit-content()函数
  • 命名线

常见用法:

repeat(2, 20px): 等价于 20px 20px

 repeat(2, 20px 1fr 90px), 等价于 20px 1fr 90px 20px 1fr 90px

repeat(auto-fit, 20px), 以宽度20px 自适应布局。

8.[linenane]:来定义和引用网格线, 更精确地控制网格项在网格中的位置

三:gap: 用于定义网格的列和行的间距的缩写:

 <'row-gap'> <'column-gap'> 用法如下:
/* 一个| 两个 <length> 值 */
gap: 20px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/* 一个或两个 <percentage> 值 */
gap: 16% 100%;
gap: 21px 82%;

        

    


   


http://www.kler.cn/a/373114.html

相关文章:

  • ElasticSearch备考 -- Index rollover
  • 前端性能优化之卡顿监控与定位
  • 【CSS3】css开篇基础(6)
  • 【文心智能体 | AI大师工坊】如何使用智能体插件,完成一款旅游类智能体的开发,来体验一下我的智能体『​​​​​​​背包客』
  • 视频去水印软件推荐:6款去水印工具值得一试
  • echarts实现 水库高程模拟图表
  • echarts属性之radar
  • React 异步渲染机制
  • 鸿蒙生态未来的发展趋势探讨?
  • 【STM32 Blue Pill编程实例】-4位7段数码管使用
  • Spring Boot 开发常见问题及解决方案汇总
  • 公安专业知识笔记-桐哥
  • 计算机毕业设计Java银行存取系统 银行交易管理系统 金融数据处理 用户存取管理系统(源码+定制+开发)
  • 威胁评估助力新能源车企发掘风险,推动安全与智能化业务发展
  • UE5 不同的编译模式下,module的组织形式
  • 上市公司企业数字金融认知数据集(2001-2023年)
  • 【Android】ViewPager的MVP架构搭建
  • 谷歌浏览器安装axure插件
  • 为什么音频采样率通常是44.1kHz?
  • css 对称按钮,中间斜平行间隔,两头半圆
  • 动手学深度学习64 注意力机制
  • 线性数据结构之数组
  • 基于 GADF+Swin-CNN-GAM 的高创新扰动信号识别模型!
  • 在深度学习研究方向有哪些创新点
  • AI驱动的图像文本提取【Llama 3.2-Vision】
  • CSS实现回到顶部且平滑过渡