grid布局学习总结

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; */ }