zoukankan      html  css  js  c++  java
  • 3 week work—Grid Layout

    HTML:

    <div class="wrapper">             //建立一个三列轨道网格。
      <div class="one">One</div>      /*从第一个表格到第六个表格
      <div class="two">Two</div>
      <div class="three">Three</div>
      <div class="four">Four</div>
      <div class="five">Five</div>
      <div class="six">Six</div>      */
    </div>

    CSS:
    .wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);  //设置列距
      grid-gap: 10px;                         //网格间距为10px
      grid-auto-rows: minmax(100px, auto);    //新行创建的最小值为100像素,最大值为auto.
    }
    .wrapper div{
    background-color:rgb(180,122,156); //设置网格背景颜色
    border: 5px solid rgb(180,200,152); //设置边框大小为5px和颜色
    } .one { //第一个网格 grid-column: 1 / 3; //设置列距 grid-row: 1; //网格行为1 } .two { //第二个网格 grid-column: 2 / 4; //列距为2/4 grid-row: 1 / 3; //网格行为1/3 } .three { //第三个网格 grid-column: 1; //列距为1 grid-row: 2 / 5; //网格行为2/5 } .four { //第四个网格 grid-column: 3; //列距为3 grid-row: 3; //网格行3 } .five { //第五个网格 grid-column: 2; //列距为2 grid-row: 4; //网格行为4 } .six { //第六个网格 grid-column: 3; //列距为3 grid-row: 4; //网格行为4 }
     

     

     
  • 相关阅读:
    setTimeout 理解
    Git 使用规范流程
    JavaScript异步编程 ( 一 )
    javaScript模块化一
    javascript 知识点坑
    javaScript闭包
    函数式编程
    JavaScript的68个技巧一
    MySql 隐式转换
    MySQL优化
  • 原文地址:https://www.cnblogs.com/lbjiu/p/9692673.html
Copyright © 2011-2022 走看看