强大的display:grid
自从用习惯flex布局我基本已经不怎么使用float了。 现在又出现了grid布局,就像flex的升级版,布局上十分强大。 主要属性: grid-template-columns://竖向排列 grid-template-rows://横向排列 首先比较一下flex和grid实现自适应九宫格,高度800px,宽度适应: flex 超过一层后样式就复杂了,特别是边框的处理有点复杂。(方法很多,不一一去展示了)。 <html> <head> <style type="text/css"> .box { padding: 10px; padding-bottom: 0; padding-right: 0; display: flex; flex-direction: column; height: 800px; width: calc(100vw - 20px); background-color: #000; } .content { display: flex; margin-bottom: 10px; flex: 1 } .b { flex: 1; margin-right: 10px; background-color: yellow; } </style> </head> <body> <div class="box"> <div class="content"> <div