flex布局很早就学习了，并且在工作中用的也是比较多的。后来听说了grid布局，据说是比flex布局更加强大的，因为flex是在一维方向上的布局，而grid布局是在二维平面上的布局。
花了1个下午的时间我简单的研究了一下，突然发现我可能并不需要完全掌握grid布局的每一个方面，可能只需要掌握几种常见布局的写法就够了。
9宫格布局 一个比较经典的应用grid布局的场景就是9宫格了。给你一个容器，然后划分成等大的9个小宫格，里面是一些功能图标。 这个功能使用flex布局也能够实现，但是需要使用两层的flex布局，使用grid布局可能更加的简单直观。
<div class="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
.container { height: 500px; width: 500px; /* grid布局 */ display: grid; /* 3列同宽 */ grid-template-columns: repeat(3, 1fr); /* 3行同高 */ grid-template-rows: repeat(3, 1fr); /* 间隔2像素 */ gap: 2px; } .container>div { border: 1px solid red; }
管理软件布局 经典的管理软件布局是head（上）-nav（左）-body（右）-foot（下），其中整体的宽高应该正好是整个屏幕大小。
head部分主要展示软件名称，登陆用户菜单等，一般定高
nav部分展示功能菜单，一般定宽，有些可以拉伸或者隐藏
body部分是主要的功能操作区
foot部分通常展示网站的备案号，开发商等信息
同样的，这种布局也可以使用flex实现，grid布局实现起来也是更加直观简单
<body> <div class="head">1</div> <div class="nav">2</div> <div class="body">3</div> <div class="foot">4</div> </body>
html, body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: grid; grid-template-rows: 100px auto 60px; grid-template-columns: 200px auto; } .head { background-color: red; grid-column: 1/3; /* grid-row: 1/1; */ } .nav { background-color: yellow; /* grid-column: 1/2; */ grid-row: 2/4; } .body { background-color: blue; /* grid-column: 2/3; */ /* grid-row: 2/3; */ } .foot { background-color: green; /* grid-column: 2/3; */ /* grid-row: 3/4; */ }
