网格布局

CSS网格布局擅长将一个页面划分为几个主要区域以及定义这些区域的大小、位置、层次等关系像表格一样,网格布局让我们能够按行或列来对齐元素。然后在布局上,网格比表格更可能做到或更简单。

类型方式实现方式
传统div+css布局基于float + postition 来实现
弹性盒子flex主要是针对移动端布局(基于一维空间)
网格布局grid理解为 table Plus+ 基于行与列的二维空间布局

grid 常用属性

类型描述
网格容器由若干个矩形网格单元构成
网格项目网络容器的子元素,必须放在网络单元中
网格单元有”单元格”和”网络区域”二种表现形式
网格轨道由多个网络单元组成,根据排序方向有”行轨”和”列轨”之分
轨道间距容器中轨道之间的间距

1.1 grid-template-columns

设置轨道的列宽

grid-template-columns属性为 auto是自适应列宽

  1. /* 设置轨道的列宽 */
  2. /* 默认 grid-template-columns: auto; */
  3. grid-template-columns: 10rem 10rem 10rem;
  4. grid-template-columns: auto auto auto;

网格容器列宽

属性排序方式
grid-template-columns设置轨道的列宽
grid-template-rows设置轨道的行高

1.2 gap

设置轨道的间距

  1. /* 设置轨道的间距 */
  2. /* gap: 水平 垂直; */
  3. gap: 0.5rem 1rem;

轨道间距

1.3 fr 网格新单位

fr和auto同等都是响应式

如何让第2个元素是其他元素的2倍呢?

  1. grid-template-columns: 1fr 2fr 1fr;

fr单位布局

  • fr 与auto之间的区别

    1. grid-template-columns: 1fr auto 1fr;
    2. /* 此时 auto 完全失灵 */
  • fr 与 % 的区别

    1. grid-template-columns: 1fr 3fr 1fr;
    2. /* 因为百分比不支持gap轨道间距,所有会超出网格容器 */
    3. grid-template-columns: 20% 60% 20%;
  • fr 与其他单位混合,如 em,px

    1. /* px是固定的,em也是固定;计算时要减去这些固定值,将剩下的空间在fr之间分配 */
    2. /* 总宽度 - 8em - 200px,将剩下的空间分配fr */
    3. grid-template-columns: 8em 1fr 2fr 200px;
    4. /* 网格宽度会受限制 */
  • fr 尽可能不要与auto同时使用

    1. /* auto 与 px , em , 会自动计算 */
    2. grid-template-columns: 30% auto 10em;
    3. /* auto网格单位会被压缩 */
    4. grid-template-columns: 1fr auto 10em;

1.4 函数

  • repeat()
    参数形式:repeat(重复片段,行或列形式)
    1. grid-template-columns: repeat(3,1fr);
    一行三列展示效果图
    reoeat函数
  • minmax()
    参数形式:minmax(最小宽度,最大宽度)
    1. /* 中间列,最小宽度是20em,最大宽高是左右的2倍 */
    2. grid-template-columns: 1fr minmax(10em,2fr) 1fr;
    效果图如下
    最大值和最小值

隐式轨道

2.1 grid-auto-flow

隐式轨道:原有网格单元设置轨道的行高后,当新进网格单元是不受网格轨道的,这个时候需要设置隐式轨道的行高
原始轨道

  1. /* 默认项目在容器中按: 先行后列的顺序排列,“行优先” */
  2. grid-auto-flow: row;
  3. /* 自动生成的隐式轨道的高度是自动的 */
  4. /* 行优先时要设置隐式轨道的行高 */
  5. grid-auto-rows: 5rem;

效果如下
隐式轨道

排序方式

  1. /* 默认项目在容器中按: 先行后列的顺序排列,“行优先” */
  2. grid-auto-flow: row;
  3. /* 自动生成的隐式轨道的高度是自动的 */
  4. /* 行优先时要设置隐式轨道的行高 */
  5. grid-auto-rows: 5rem;
  6. /* 列优先 */
  7. grid-auto-flow: column;
  8. /* 列优先要设置的隐式轨道的列宽 */
  9. grid-auto-columns: 1fr;

列方式比较不是经常用

grid-area

grid-area属性在网格布局中指定网格项的大小和位置

  1. .container .item:nth-last-of-type(5){
  2. background-color: lawngreen;
  3. /* grid-area: 设置任何一个项目所在的网格单元的区域 */
  4. /* grid-area: 行始编号 / 列始编号 / 行结束编号 / 列结束编号 */
  5. grid-area: 1 / 1 / 2 / 2;
  6. }

指定网格项

更多相关文章

  1. grid对齐属性、grid实战php网站首页、媒体查询
  2. grid属性实例演示
  3. android开发之GridLayout详解
  4. Android精通:TableLayout布局,GridLayout网格布局,FrameLayout帧布
  5. Android(安卓)studio 百度地图开发(9)只显示网格不显示地图或者只
  6. Android(安卓)RecyclerView网格布局示例解析
  7. android绘图网格线java写法
  8. 在SOUI中使用网格布局
  9. 自定义布局RelativeLayout 画网格线

随机推荐

  1. Spring事务
  2. 基于云原生CloudEvent实现服务目录
  3. 浅复制和深复制
  4. 别在不知道临时死区的情况下使用 JavaScr
  5. 用了这么多年的 Java 泛型,你对它到底有多
  6. 选择排序
  7. 七个简单但棘手的 JS 面试问题[每日前端
  8. 一不小心又把应用发挂了,复盘一下这十几分
  9. 设计模式的六大原则
  10. JavaScript 解构的5个有趣用法[每日前端