zoukankan      html  css  js  c++  java
  • 新手的grid布局

    html部分

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="布局grid.css">
    <title>grid布局</title>
    </head>
    <body>
    <div class="wrapper">
      <div>One</div>
      <div>Two</div>
      <div>Three</div>
      <div>Four</div>
      <div>Five</div>
    </div>
    </body>
    </html>

    css部分

    1.Gutters

    .wrapper {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 10px;
      row-gap: 1em;
    }

     

    2.Positioning items against lines

    <div class="wrapper">
      <div class="box1">One</div>
      <div class="box2">Two</div>
      <div class="box3">Three</div>
      <div class="box4">Four</div>
      <div class="box5">Five</div>
    </div>
    
    .wrapper { 
      display: grid; 
      grid-template-columns: repeat(3, 1fr); 
      grid-auto-rows: 100px; 
    } 
    
    .box1 { 
      grid-column-start: 1; 
      grid-column-end: 4; 
      grid-row-start: 1; 
      grid-row-end: 3; 
    }
    
    .box2 { 
      grid-column-start: 1; 
      grid-row-start: 3; 
      grid-row-end: 5; 
    }
     


    本次我也只是拿了老师上课讲的里面中的2个,只进行了简单的grid的布局其中的一个小的布局方式,grid的布局远不止这些,在现在的主流布局方式有grid外还有felxbox等。

    在日常网页布局中这2者不是相互排斥的,我们在日常的学习中要学会用好这2个布局,

    • grids 适用于大画面的布局。
    • Flexbox 来定位设计上一些较小的细节。
    • Flexbox 适用于单一维度的布局,轴。
    下次课程老师将教我们felxbox布局。对grid布局感兴趣的同学,这有个传送门:http://devdocs.io/css/css_grid_layout/basic_concepts_of_grid_layout
    也希望大家可以给我指点指点,谢谢大家。
  • 相关阅读:
    mybatis-databaseIdProvider多数据库支持
    mysql-高性能索引策略
    mysql-冗余和重复索引
    mybatis-枚举类型的typeHandler&自定义枚举类型typeHandler
    mybatis-自定义typeHandler
    mysql-覆盖索引
    单例模式
    mybatis实战教程一:开发环境搭建
    MySQL分页查询优化
    深入组件
  • 原文地址:https://www.cnblogs.com/mumu597/p/9733014.html
Copyright © 2011-2022 走看看