Grid布局

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>

 

 

posted @ 2021-09-24 12:26  青眼魔术  阅读(51)  评论(0)  编辑  收藏  举报