zoukankan      html  css  js  c++  java
  • GRID属性

    GRID属性(设为网格布局)
    display:grid;
    display:inline-grid;

    容器(父元素):

    • 网格布局

    grid-template-rows:; (单位:px/%/fr, auto)
    grid-template-columns:;
    重复行列
    grid-template-rows:repeat(3,1fr); 划分三行每行均分
    grid-template-columns:repeat(3,1fr); 划分三列每列均分
    划分区域(必须划分行列)
    grid-template-areas:
    "a1 a1 a1"
    "a2 a3 a3";
    综合写法:
    grid-template:分区 分行/分列;
    【例】grid-template:
    "a1 a1 a2" 1fr
    "a3 a3 a2" 1fr
    "a3 a3 a4" 1fr/1fr 1fr 1fr;

    • 行列间距

    grid-row-gap:10px;
    grid-column-gap:10px;
    综合写法:
    grid-gap:行间距 列间距;(只写一个值,行列间距一样)

    • 网格整体的垂直/水平 位置

    align-content:;
    justify-content:;
    start 起始位置
    end 结束位置
    center 居中
    space-around 两端平均
    space-between 两端对齐
    space-evenly 平均分配
    stretch 默认值,项目没有指定大小,拉伸占据整个网格
    综合写法:
    place-content:垂直 水平;

    • 指定网格的垂直/水平 呈现位置

    align-items:;
    justify-items:;
    start 起始位置
    end 结束位置
    center 居中
    stretch 默认值,项目没有指定大小,拉伸占据整个网格
    综合写法:
    place-items:垂直 水平;

     

    项目(子元素):

    grid-area:占区域;注意: 需要分区才可以使用
    方式一:
    grid-area:a1;
    方式二:
    grid-area:行起点/列起点/行结束/列结束;

    grid-column-start:列线开始;
    grid-column-end:列线结束;
    grid-row-start:行线开始;
    grid-row-end:行线结束;

    只有end才有span 意思是占几个网格 3指占3个
    grid-column-end:span 3;
    grid-row-end:span 2;

    单个元素在网格的垂直 水平对齐方式
    align-self:;
    justify-self:;
    start 起始位置
    end 结束位置
    center 居中
    stretch 默认值,项目没有指定大小,拉伸占据真个网格大小
    综合写法: place-self:垂直位置 水平位置;

  • 相关阅读:
    自适应Simpson积分
    斜率优化
    ORM的单表增删改查
    MTV模型—urls和view
    迭代器与生成器
    s7day2学习记录
    s7day1学习记录
    AI车牌识别涉及哪些技术?它是如何改变行业的?
    技术分享:人脸识别究竟是如何完成的?
    TSINGEE青犀视频行人检测景区测试时视频流切换本地背景音乐无法播放问题优化
  • 原文地址:https://www.cnblogs.com/strongerPian/p/12576429.html
Copyright © 2011-2022 走看看