在前端开发中，日历布局是非常常见的一种布局方式，如果使用传统的浮动布局可能会比较麻烦，而使用 CSS Grid 可以轻松实现。CSS Grid 是一种二维网格布局模型，它可以快速地在网页中创建复杂的布局。
CSS Grid 基础
在使用 CSS Grid 之前，我们需要了解一些基础概念。
网格容器
网格容器就是应用 CSS Grid 布局的 HTML 元素。我们需要为该元素设置 display: grid 属性，以启用网格布局。
.container {
display: grid;
}网格行与列
在网格布局中，我们需要定义行和列。我们可以使用 grid-template-columns 和 grid-template-rows 属性来设置。
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 50px 50px;
}上面的代码创建了一个具有 3 列、2 行的网格。每列的宽度相等，每行的高度都是 50 像素。
网格单元格
在网格中，每一个单元格就是一个网格项。网格项是网格容器的直属子元素。可以使用 grid-column 和 grid-row 属性来设置网格项的位置。
.item {
grid-column: 2 / 4;
grid-row: 1 / 3;
}上面的代码创建了一个宽度为 2 列，高度为 2 行的网格项，该项跨越从第 2 列到第 3 列，从第 1 行到第 2 行的单元格。
实现日历布局
有了上面的基础知识，我们现在就可以来实现日历布局了。
HTML 代码：
// javascriptcn.com 代码示例 <div class="calendar"> <div class="day">1</div> <div class="day">2</div> <div class="day">3</div> <div class="day">4</div> <div class="day">5</div> <div class="day">6</div> <div class="day">7</div> <div class="day">8</div> <div class="day">9</div> <div class="day">10</div> <div class="day">11</div> <div class="day">12</div> <div class="day">13</div> <div class="day">14</div> <div class="day">15</div> <div class="day">16</div> <div class="day">17</div> <div class="day">18</div> <div class="day">19</div> <div class="day">20</div> <div class="day">21</div> <div class="day">22</div> <div class="day">23</div> <div class="day">24</div> <div class="day">25</div> <div class="day">26</div> <div class="day">27</div> <div class="day">28</div> <div class="day">29</div> <div class="day">30</div> <div class="day">31</div> </div>
我们在 HTML 中创建了 31 个 div 元素，它们的 class 都是 day，表示日历中的每一天。
接下来，我们需要为日历容器添加 CSS 样式，使它变成一个网格布局。
CSS 代码：
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(5, auto);
gap: 10px;
}这里设置了一个 7 列、5 行的网格布局，每个单元格的宽度相等，并且添加了 10 像素的间隙。
最后，我们需要为网格项添加位置信息。
CSS 代码：
// javascriptcn.com 代码示例
.day:nth-child(7n + 1) {
grid-column: 1;
}
.day:nth-child(7n + 2) {
grid-column: 2;
}
.day:nth-child(7n + 3) {
grid-column: 3;
}
.day:nth-child(7n + 4) {
grid-column: 4;
}
.day:nth-child(7n + 5) {
grid-column: 5;
}
.day:nth-child(7n + 6) {
grid-column: 6;
}
.day:nth-child(7n + 7) {
grid-column: 7;
}这里设置了每个元素的位置信息，让它们在网格中正确地排布。
现在，我们就完成了日历布局的实现。示例代码和效果如下：
HTML 代码：
// javascriptcn.com 代码示例 <div class="calendar"> <div class="day">1</div> <div class="day">2</div> <div class="day">3</div> <div class="day">4</div> <div class="day">5</div> <div class="day">6</div> <div class="day">7</div> <div class="day">8</div> <div class="day">9</div> <div class="day">10</div> <div class="day">11</div> <div class="day">12</div> <div class="day">13</div> <div class="day">14</div> <div class="day">15</div> <div class="day">16</div> <div class="day">17</div> <div class="day">18</div> <div class="day">19</div> <div class="day">20</div> <div class="day">21</div> <div class="day">22</div> <div class="day">23</div> <div class="day">24</div> <div class="day">25</div> <div class="day">26</div> <div class="day">27</div> <div class="day">28</div> <div class="day">29</div> <div class="day">30</div> <div class="day">31</div> </div>
CSS 代码：
// javascriptcn.com 代码示例
.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: repeat(5, auto);
gap: 10px;
}
.day {
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,.06);
padding: 10px;
text-align: center;
border-radius: 10px;
}
.day:nth-child(7n + 1) {
grid-column: 1;
}
.day:nth-child(7n + 2) {
grid-column: 2;
}
.day:nth-child(7n + 3) {
grid-column: 3;
}
.day:nth-child(7n + 4) {
grid-column: 4;
}
.day:nth-child(7n + 5) {
grid-column: 5;
}
.day:nth-child(7n + 6) {
grid-column: 6;
}
.day:nth-child(7n + 7) {
grid-column: 7;
}效果图：
总结
通过本文，我们了解了如何使用 CSS Grid 实现日历布局。使用 CSS Grid 可以轻松地创建复杂的网格布局，让我们的布局更加灵活和高效。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6530d38b7d4982a6eb263a0e