三行 CSS 完成

行事曆排版

講者: 王婕瑜

日期: 2020/12/27

OUTLINE

  • 實作

  • Reference

實作

只有十分鐘啦邊做邊講吧

簡陋版成果

  • 不限天數，自動對應週數
  • 使用 <li> 做出類似 <table> 的排版

html 部分

<div class="calendar-wrapper">
  <h1>December</h1>
  <ul class="calendar">
    <li class="weekday">SUN</li>
    <li class="weekday">MON</li>
    <li class="weekday">TUE</li>
    <li class="weekday">WED</li>
    <li class="weekday">THU</li>
    <li class="weekday">FRI</li>
    <li class="weekday">SAT</li>

    <li class="first-day">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
    <li>29</li>
    <li>30</li>
    <li>31</li>
  </ul>
</div>

CSS Grid 屬性

grid-template-columns

grid-template-rows

grid-template-columns: auto auto auto;
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: 100px auto 25%;

fr

將可用的剩餘空間按比例分割

repeat (次數, 格線)

重複隔線

CSS 部分

.calendar{
/* 轉成 grid layout 排版 */
  display: grid;
/*   設置每週七天的樣式 */
  grid-template-columns: repeat(7, 1fr);
}
/* 設置第一天的位置 */
.first-day{
  grid-column-start: 3;
}
/* 簡單美化 */
.calendar-wrapper{
  width: 280px;
}
.weekday{
  background: #eee;
}
h1{
  text-align: center;
}
ul{
/*   不設定項目編號 */
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

完整程式碼

<!DOCTYPE html>
<html>
<head>
	<title>calendar</title>
	<style type="text/css">
		.calendar{
			display: grid;
			grid-template-columns: repeat(7, 1fr);
		}
		.first-day{
			grid-column-start: 3;
		}
		.calendar-wrapper{
			width: 280px;
		}
		.weekday{
			background: #eee;
		}
		h1{
			text-align: center;
		}
		ul{
			list-style: none;
			margin: 0;
			padding: 0;
			text-align: center;
		}
	</style>
</head>
<body>
	<div class="calendar-wrapper">
		<h1>December</h1>
		<ul class="calendar">
			<li class="weekday">SUN</li>
			<li class="weekday">MON</li>
			<li class="weekday">TUE</li>
			<li class="weekday">WED</li>
			<li class="weekday">THU</li>
			<li class="weekday">FRI</li>
			<li class="weekday">SAT</li>

			<li class="first-day">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
			<li>7</li>
			<li>8</li>
			<li>9</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>
			<li>16</li>
			<li>17</li>
			<li>18</li>
			<li>19</li>
			<li>20</li>
			<li>21</li>
			<li>22</li>
			<li>23</li>
			<li>24</li>
			<li>25</li>
			<li>26</li>
			<li>27</li>
			<li>28</li>
			<li>29</li>
			<li>30</li>
			<li>31</li>
		</ul>
	</div>
</body>
</html>

REFERENCE

  • Chris Coyier (2020). A Calendar in Three Lines of CSS. Retrieved from: https://css-tricks.com/a-calendar-in-three-lines-of-css/
  • 卡斯伯 (2017). CSS Grid 屬性介紹. Retrieved from: https://wcc723.github.io/css/2017/03/22/css-grid-layout/

Thanks for listening.

Made with Slides.com