有时候会在油管上零零散散看到一些小tips，就开一个小文章，把它当做便签记录下来。
Grid
-
grid-template-columns<div class="grid"> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div> <div class="box">7</div> <div class="box">8</div> </div>.grid { display: grid; /* 使用css grid */ grid-template-columns: /* 根据grid宽度的变化*/ /* * repeat * 按照这样的规范来套用每个row * 比如：你可以使用repeat(12, 1fr) * 来建立一个12个column的layout * minmax(105px, 1fr) * box之间间距105px，如果宽度足够多1个box的宽度 * 则自动增加一个division */ repeat(auto-fit, minmax(105px, 1fr)); } /* 其他设定，只是为了好看一点 */ body { width: 80%; margin: auto; } .box { border: 1px solid #26A69A; border-radius: 5px; background-color: #B2DFDB; margin: 20px; height: 100px; width: 100px; }
