简单认识网格布局

网格布局

Grid布局是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。

• 1. HTML代码：<div class="box"> <div class="item1">1</div> <div class="item2">2</div> <div class="item3">3</div> <div class="item4">4</div> </div>
  • 1.1 简单实现：
    display：grid（网格布局）、inline-grid（行内网格布局）
    grid-template-columns：属性定义每一列的列宽
    grid-template-rows：属性定义每一行的行高
    grid-gap：网格项之间添加间距（grid-row-gap行间距，grid-column-gap列间距）
    .box { width: 300px; display: grid; grid-template-columns: 100px 100px 100px; grid-template-rows: 50px 50px; grid-gap: 5px; }
.box>div { background-color: lightgray; text-align: center; font-size: 24px; border: 2px solid white; }
    
  • 1.2 fr关键字表示平均分配的比例：
    .box { width: 300px; display: grid; grid-template-columns: 1fr 2fr 3fr; grid-template-rows: 1fr 2fr; }
    
• 2 HTML代码：<div class="box"><div class="header">header</div><div class="menu">menu</div><div class="content">content</div><div class="footer">footer</div></div>
  • 2.1 十二栅格布局：
    repeat()函数：简化重复的值（auto-fill关键字表示自动填充）
    grid-template-areas：属性用于定义区域
    .box { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 50px 350px 50px; grid-gap: 5px; grid-template-areas: "h h h h h h h h h h h h""m m c c c c c c c c c c""f f f f f f f f f f f f"; }
.header { grid-area: h; background: red; }
.menu { grid-area: m; background: orange; }
.content { grid-area: c; background: yellow; }
.footer { grid-area: f; background: greenyellow; }
    

参考资料

前端布局之网格gird布局（简单易懂）
MDN:Grid
CSS Grid 网格布局教程