准备深入学习一下前端并计划每周至少写一篇关于前端的文章。这是第六篇啦。
先看日历的最终呈现效果：
我们只考虑布局，不考虑日历数据是怎么生成的(通常是JS动态生成，这里我们写死)。
对于上图的HTML结构，我们设计如下：
<div class="calendar-wrapper">
<h1>December</h1>
<ul class="calendar">
<li>日</li>
<li>一</li>
<li>二</li>
<li>三</li>
<li>四</li>
<li>五</li>
<li>六</li>
<li class="first-day">1</li>
<li>2</li>
<li>3</li>
<!-- 太长，省略 -->
<li>30</li>
<li>31</li>
</ul>
</div>
按一周7天，一个日历组件应该分为7列，每一行7列占满后，我们希望后续的 li 自动排到下一行。
这里我们选择使用 Grid 布局：
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
}
grid-template-columns: repeat(7, 1fr); 表示7个宽度相同的列。
还可以使用 grid-auto-flow: row; 让 li 一行一行排列，但因为这是默认的行为，所以不用显式设置了。
如果只设置上述样式，日历渲染出来是这样的：
明眼的你可能已经发现，12月1号并非是在周日而是在周二(对于今年2020来说)。
再观察上面的HTML结构，我们给第一天加了 first-day 这个 class，以区别于其它的 li 元素。
而我们接着要做的，只是将 .first-day 放置在周二这个位置，这样，后面的 li 就会在它的后面继续排队放置了。
.first-day {
grid-column-start: 3;
}
上面是最关键的3行CSS，再说说另一个额外的点：日历的星期部分有着浅灰色的背景，在没有给星期部分加特殊标识的条件下，怎么选中它们并添加背景样式呢？
可以借助强大的 nth-child 选择器，前7个 li 元素可以这样写：
.calendar > li:nth-child(-n + 7) {
background: #eee;
}
Bingo! 一个简单的日历布局就这样被3行 Grid 属性解决了。
文章创意参考自 A Calendar in Three Lines of CSS[1]。
CodePen 示例在这里[2]，点击「阅读原文」可查看。
参考资料
A Calendar in Three Lines of CSS: https://calendartricks.com/a-calendar-in-three-lines-of-css/
[2]CopePen 日历布局: https://codepen.io/Youmoo/pen/dypJdea
– END –
原文始发于微信公众号（背井）：前端学习(6): 3行CSS代码实现日期组件布局
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/246762.html
