Decemeber
  
  
  
  
  
  
  
  
  
    一
  
  
  
  
    二
  
  
  
  
    三
  
  
  
  
    四
  
  
  
  
    五
  
  
  
  
    六
  
  
  
  
    日
  
  
  
  

  
  
  
  
    1
  
  
  
  
    
2
  
  
  
  
    
3
  
  
  
  
    
  
  
  
  
    
29
  
  
  
  
    
30
  
  
  
  
    
31
  
  
  
  
  
  
  
  
  

為簡單起見，這里把一周七天和日期全都放進一個列表里了。CSS 代碼更簡單了：

 
 
 
 

  
  
  
  
.calendar {
  
  
  
  
  display: grid; // 1
  
  
  
  
  grid-template-columns: repeat(7, 1fr);  // 2
  
  
  
  
}
  
  
  
  
.first-day {
  
  
  
  
  grid-column-start: 2; // 3
  
  
  
  
}
 
 
 
 

稍微解釋下，第一行就是將列表聲明為grid容器。第二行的屬性 grid-template-columns用來設(shè)置每列的寬度。一周有 7 天，因此需要 7 列。也可以這樣寫：

 
 
 
 

  
  
  
  
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
 
 
 
 

或者

 
 
 
 

  
  
  
  
grid-template-columns: 40px 40px 40px 40px 40px 40px 40px;
 
 
 
 

是不是顯得重復(fù)啰嗦?所以有了 repeat()簡寫方法，用于定義多個等寬的列就方便多了。這里的1fr 是新的 CSS 彈性長度單位，具體用法可以參考 [https://www.w3.org/TR/css3-grid-layout/#fr-unit]。

最后，由于大部分月份的 1 號并不是周一，所以要用grid-column-start屬性設(shè)置1號這個單元格的位置。

Bingo!一個極簡日歷就完成了!

極簡日歷

當然了，頭部的背景色還是需要額外代碼的，但這不是關(guān)鍵所在。想要了解更多關(guān)于強大的 CSS Grid 布局的知識，推薦參考 MDN 文檔 [https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout]

 本文轉(zhuǎn)載自微信公眾號「1024譯站」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系1024譯站公眾號。