九、grid 网格中的响应式断行效果的处理

• auto-fill ：网格的最大重复次数（正整数），如果有剩余空间，则会保留剩余空间，而不改变网格项目的宽度。
• auto-fit：网格的最大重复次数（正整数），如果有剩余空间，网格项平分剩余空间来扩展自己的宽度。

<style>
  .container {
    width: 100%;
    display: grid;
    /*grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));*/
    /*以防万一，子项不足占据一行时*/
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: 250px;
    grid-auto-flow: row;
    grid-auto-rows: 250px;
    gap: 10px;
  .container .item:nth-child(even) {
    background-color: skyblue;
  .container .item:nth-child(odd) {
    background-color: pink;
</style>
  <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</body>

防御式编程 - 防御式 CSS

防御性的 CSS 实践