zoukankan      html  css  js  c++  java
  • grid网格布局

    grid

    通过grid网格布局能让你的页面布局像一个网格一样,把对应的每一个组件分别放到你想放入的位置里面。

    html:

    <div id="container">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>css

    css:

    #container {
      display: grid;
      grid: repeat(2, 60px) / auto-flow 80px;
    }
    
    #container > div {
      background-color: #8ca0ff;
      width: 50px;
      height: 50px;
    }

     效果:

    grid-gap

    定义元素与元素之间的距离

     grid-column-gap/grid-row-gap

    grid-column-gap:定义列与列之间的距离

    grid-row-gap:定义行于行之间的距离

    grid-column-start/end 与 gird-row-start/end

    grid-column-start:规定改元素的列起始基线处于哪个网格线

    grid-column-end:规定改元素的结束基线处于哪个网格线,这样做可以将某个元素所占的空间给增大.

    grid-row-start/end:上面的功能相同,只不过改变的是行而已.

    grid-template-columns/rows

    grid-template-columns:设置每列元素的宽度

    grid-template-rows:设置每行元素的高度

    
    
    
  • 相关阅读:
    HDFS 2.X新特性
    kettle的系列教程
    Kettle基本使用
    MySQL流程控制结构
    MySQL函数
    MySQL存储过程和函数
    MySQL变量
    MySQL视图
    TCL(事务控制语言)
    MySQL标识列(自增长列)
  • 原文地址:https://www.cnblogs.com/flyingcarp/p/9852416.html
Copyright © 2011-2022 走看看