首页 > 其他分享> 文章详细

Grid布局

2021-09-24 12:34:40 阅读：301 来源： 互联网

标签：area 布局 three 1fr grid background Grid 20px

display: grid;

grid-template-columns: 1fr 2fr 1fr; /* 把横向改成1，2，1等份 */ （1fr就是把横向分成一份一份，你写四个1fr一行就有四个，也可以设置px单位）

column-gap: 20px; /* 把横向间距改成20px */

row-gap: 20px; /* 把纵向间距改成20px */

gap: 20px /统一横纵改成20px /

　 align-items: center; /纵列居中 / （end纵列底部，start纵列顶部）

　 justify-items: center; /横列居中 / （end横列右，start横列左）

　 grid-template-areas: "one one one" "two two three" "four five three" /画一个三行3列布局，one占据一行3列，two占据二行1，2列，three占据二、三行3列，four占据三行1列，five占据三行2列/

grid布局

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <style>
    .app{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 15px;
      grid-template-rows: 1fr 1fr 1fr;
      grid-template-areas: 
        "one one two"
        "one one five"
        "three four five";
    }
    span{
      word-break: break-all;
    }
    .span1{
      grid-area: one;
      background: aqua;
    }
    .span2{
      grid-area: two;
      background: bisque;
    }
    .span3{
      grid-area: three;
      background: blueviolet;
    }
    .span4{
      grid-area: four;
      background: brown;
    }
    .span5{
      grid-area: five;
      background: salmon;
    }
  </style>
  <body>
    <div class="app">
      <span class="span1">1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</span>
      <span class="span2">21111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</span>
      <span class="span3">3</span>
      <span class="span4">4</span>
      <span class="span5">5</span>
    </div>
  </body>
</html>

标签：area,布局,three,1fr,grid,background,Grid,20px
来源： https://www.cnblogs.com/black-eyes/p/15329800.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9