css（2）布局篇

2.grid布局
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>grid布局</title>
  <style>
  html, body{
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  .table{
    display: grid;
    /* grid-template-columns: 50px 50px 50px 50px; */
    grid-template-columns: repeat(4, 50px);
    /**
    指定多少列和列宽
    */
    grid-template-rows: repeat(4, 50px);
    /* grid-template-rows: 50px 50px 50px 50px; */
    /**
    指定多少行和行高
    */
    grid-row-gap: 10px;
    /**
    行间距
    */
    grid-column-gap: 10px;
    /**
    列间距
    */
    grid-gap: 10px 10px;
    /**
    row-gap, column-gap的缩写 row在前 column在后
    如果 row和col的值相同则可以合并
    grid-gap: 10px;
    */
    grid-auto-flow: column;
    /**
    项目填充顺序，默认为row即填满一行再填第二行
    column: 填满第一列在填满第二列
    row dense: 行填满剩余部分处理
    column dense: 列填满剩余部分处理
    **/
    /* justify-items: center;
    align-items: center; */
    /**
    单元格内容对齐方式
    center 居中
    start 左对齐
    end 右对齐
    center 沾满宽度
    */
    justify-content: center;
    /**
    整个内容区域水平对齐方式
    start | end | center | stretch | space-around | space-between | space-evenly
    start - 对齐容器的起始边框
    end - 对齐容器的结束边框。
    center - 容器内部居中。
    stretch - 项目大小没有指定时，拉伸占据整个网格容器。
    space-around - 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与容器边框的间隔大一倍。
    space-between - 项目与项目的间隔相等，项目与容器边框之间没有间隔。
    space-evenly - 项目与项目的间隔相等，项目与容器边框之间也是同样长度的间隔。
    */
    align-content: center;
    /**
    同上
    */
    grid-auto-rows: 50px;
    /**
    超出的项目的默认高度
    */
  }
  .col{
    background-color: brown;
    grid-column: 1 / 3;
    /**
    占据单元格1到3列
    */
    grid-row: 1 / 3;
    /**
    占据单元格1到3列
    */
  }
  .row{
    background-color: aqua;
    grid-row:  5 / span 1;
    grid-column:  2 / span 1; 
  }
  .grid{
    display: grid;
    width: 100%;
    grid-template-columns: repeat(auto-fill, 100px);
    /**
    列以宽度为100px自动填充，直到容器宽度不够
    **/
    grid-template-rows: repeat(auto-fill, 100px);
        /**
    行以宽度为100px自动填充，直到容器高度不够
    **/
  }
  .fr{
    height: 100px;
    display: grid;
    grid-template-columns: 1fr 1fr 2fr;
    /**
    三列， 1，2列宽度相同 3列宽度为1，2列的两倍
    **/
    grid-template-rows: 1fr 1fr 2fr;
    /**
    三行， 1， 2行高度相同，3行高度为1， 2行的两倍
    
    **/
  }
  .minmax{
    display: grid;
    width: 500px;
    height: 100px;
    grid-template-columns: 1fr 1fr minmax(50px, 2fr);
    /**
    三列， 1，2列宽度相同 3列宽度最小为50px 最大为1，2列的两倍
    **/
    grid-template-rows: 1fr 1fr minmax(50px, 2fr);
    /**
    三行， 1，2行高度相同 3行最小为50px 最大为1，2行的两倍
    **/
  }
  .auto{
    display: grid;
    grid-template-columns: 100px auto 100px;
    /**
    三列 1，3列固定为100px,2列自适应
    */
    grid-template-rows: 100px;
  }
  </style>
</head>
<body>
  <div class="table">
    <div class="col"></div>
    <div class="row"></div>
  </div>
  <!--子项自动充满 auto-fill关键字--->
  <div class="grid">
  </div>
  <!--子项比例 fr关键字--->
  <div class="fr">
  </div>
  <!--minmax-->
  <div class="minmax"></div>
  <!--auto-->
  <div class="auto"></div>
</body>
</html>
posted @ 2019-09-18 15:52  灵魂创造者  阅读(218)  评论(0)    收藏  举报