[前端/CSS]grid布局

最新推荐文章于 2025-06-07 19:11:43 发布

原创最新推荐文章于 2025-06-07 19:11:43 发布 · 231 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端同时被 3 个专栏收录

12 篇文章

订阅专栏

css

2 篇文章

订阅专栏

布局

1 篇文章

订阅专栏

本文详细介绍Grid布局的应用，包括横向和纵向布局控制、区域整体划分、元素对齐方式及间距设置，通过实例展示如何使用Grid-template-columns和Grid-template-rows属性进行布局设计。

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>