CSS 笔记

有时候会在油管上零零散散看到一些小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;
  }