有時(shí)候會(huì)在油管上零零散散看到一些小tips，就開一個(gè)小文章，把它當(dāng)做便簽記錄下來。
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: /* 根據(jù)grid寬度的變化*/ /* * repeat * 按照這樣的規(guī)范來套用每個(gè)row * 比如：你可以使用repeat(12, 1fr) * 來建立一個(gè)12個(gè)column的layout * minmax(105px, 1fr) * box之間間距105px，如果寬度足夠多1個(gè)box的寬度 * 則自動(dòng)增加一個(gè)division */ repeat(auto-fit, minmax(105px, 1fr)); } /* 其他設(shè)定，只是為了好看一點(diǎn) */ body { width: 80%; margin: auto; } .box { border: 1px solid #26A69A; border-radius: 5px; background-color: #B2DFDB; margin: 20px; height: 100px; width: 100px; }
