[前端/CSS]grid布局

grid布局是一种二维布局方式，可以控制横向和纵向的布局。

引用链接: link.

首先横向布局

.grid{
    width: 300px;
    height: 200px;
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    column-gap: 24px;
    row-gap: 24px;
    background-color: aqua;
    align-items: center;/*元素内容居中*/
    justify-items: center;/*水平居中对齐 
       还可取值end：靠右对齐
      space-between:两端对齐*/
      
    /*若内容比外框小，则可设置内容整体的位置*/
    align-content: center;/*竖直居中  end：靠下*/
    justify-content: center;/*水平居中  end：靠下  
          space-between:两端对齐*/
    /*gap:24px*/
   }

html

<div class="grid">
   <div class="box">1</div>
   <div class="box">2</div>
   <div class="box">3</div>
  </div>

纵向布局

.grid2{
    width: 300px;
    height: 200px;
    display: grid;
    grid-template-rows: 1ft 1ft 1ft;
    row-gap: 24px;
    background-color: #7FFFD4;
    justify-content: center;
   }

区域整体划分布局

.layout{
    width: 300px;
    background-color: aquamarine;
    display: grid;
    grid-template-areas: 
     "header header header"
     "sidebar content content"
     "footer footer footer";
   }
   header{
    grid-area: header;
    background-color: blue;
   }
   main{
    grid-area: content;
    background-color: aliceblue;
   }
   aside{
    grid-area:sidebar;
    background-color: blueviolet;
   }
   footer{
    grid-area: footer;
    background-color: brown;
    
   }

HTML代码

<div class="layout">
   <header>头部</header>
   <asider>侧边栏</asider>
   <main>内容</main>
   <footer>底部</footer>
  </div>