竹炉山房

今天在美化博客时发现可以用 display:grid 替代 display:flex、display:block 与 @media 等过时的办法，特记载如下。

新旧对比

display:grid 是一种较新的前端神器，可以完美匹配任何前端布局，不严谨的说，相当于 display:flex 的升级版。它还支持前几行两端对齐最后一行靠左这样的特殊布局。唯一不完美之处在于 ie11 等老浏览器不兼容。

display:flex 是一种稍旧的前端方法，可以匹配 95% 以上的前端布局，完美替代 float+clear:both、display:table、display:block 等。不完美之处在于超过一层后样式相当复杂，以及如前所说前几行两端对齐最后一行只能两端对齐。

官方说明

Grid Layout is a new layout model for CSS that has powerful abilities to control the sizing and positioning of boxes and their contents. Unlike Flexible Box Layout, which is single-axis–oriented, Grid Layout is optimized for 2-dimensional layouts: those in which alignment of content is desired in both dimensions.

CSS Grid Layout Module Level 1. https://drafts.csswg.org/css-grid. CSS Working Group Editor Drafts. 2019-11-04

示例

/* 父块 */
/* ie11 不支持 display:grid，改用 flex */ 
.items {
     display: flex;
     display: -webkit-flex;
     justify-content: center;
     flex-wrap: wrap;
 }

/* 主流支持 display:grid */
@supports (display: grid) {
     .items {
         display: grid;
         justify-content: space-around;
         grid-template-columns: repeat(auto-fill, 120px);
         grid-gap: 20px;
     }
 }

/* 子块 */
.list-item {
     display: grid;
 }