3 行 CSS 代碼實(shí)現(xiàn)日歷界面

日歷組件大家應(yīng)該很熟悉了，但你想過如何實(shí)現(xiàn)日歷的界面布局嗎？最容易想到的方法是用?table布局，畢竟它在視覺上跟表格類似。但是從現(xiàn)代 CSS 的角度來說，table多用來展示列表數(shù)據(jù)，而不是用作布局方案。因?yàn)樗枰芏囝~外的 DOM 元素，而且樣式控制上也不夠靈活。另一種方法是用?flex布局，這也算是 CSS3 給我們帶來的福利，讓界面布局工作簡化了許多。

本文打算介紹一種更簡單的方法，只需要 3 行核心 CSS 代碼即可實(shí)現(xiàn)日歷界面！你可能猜到了，它就是?Grid布局。

先看 HTML 部分：

<div?class="calendar-wrapper">
??<h1>Decemeberh1>
??<ul?class="calendar">
????<li?class="weekday">一li>
????<li?class="weekday">二li>
????<li?class="weekday">三li>
????<li?class="weekday">四li>
????<li?class="weekday">五li>
????<li?class="weekday">六li>
????<li?class="weekday">日li>

????<li?class="first-day">1li>
????<li>2li>
????<li>3li>
????
????<li>29li>
????<li>30li>
????<li>31li>
??ul>
div>

為簡單起見，這里把一周七天和日期全都放進(jìn)一個(gè)列表里了。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()簡寫方法，用于定義多個(gè)等寬的列就方便多了。這里的1fr?是新的 CSS 彈性長度單位，具體用法可以參考?[https://www.w3.org/TR/css3-grid-layout/#fr-unit]。

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

Bingo！一個(gè)極簡日歷就完成了！

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