ponko23/css-grid2.html

## css-grid2.html
<html lang="ja">
  <head>
    <style>
      :root {
        --border: 1px solid black;
        --cell-width: 60px;
        --cell-height: 50px;
        --cell-columns: 24;
        --cell-rows: 20;
      }
      body {
        width: calc(100vw - 20px);
        height: calc(100vh - 20px);
      }
      @scope (#content) {
        :scope {
          display: grid;
          grid-template-columns: repeat(var(--cell-columns), var(--cell-width));
          grid-template-rows: repeat(var(--cell-rows), var(--cell-height));
          width: calc(var(--cell-width) * var(--cell-columns));
          height: calc(var(--cell-height) * var(--cell-rows));
          background-image: linear-gradient(90deg, transparent calc(var(--cell-width) - 1px), #333 var(--cell-width)), linear-gradient(0deg,  transparent calc(var(--cell-height) - 1px), #333 var(--cell-height));
          background-size: var(--cell-width) var(--cell-height);
          border-left: var(--border);
          border-bottom: var(--border);
        }
        div {
          display: grid;
          place-items: center;
          place-content: center;
        }
        .item {
            background: #0000ff50; /* 透過色にしないと罫線を潰してしまう、marginとかだと微妙に隙間が空く */
            cursor: pointer;
          }
      }
    </style>
  </head>
  <body>
    <div id="content">
      <div>0:00</div>
      <div>1:00</div>
      <div>2:00</div>
      <div>3:00</div>
      <div>4:00</div>
      <div>5:00</div>
      <div>6:00</div>
      <div>7:00</div>
      <div>8:00</div>
      <div>9:00</div>
      <div>10:00</div>
      <div>11:00</div>
      <div>12:00</div>
      <div>13:00</div>
      <div>14:00</div>
      <div>15:00</div>
      <div>16:00</div>
      <div>17:00</div>
      <div>18:00</div>
      <div>19:00</div>
      <div>20:00</div>
      <div>21:00</div>
      <div>22:00</div>
      <div>23:00</div>
      <div class="item">あ</div>
      <div class="item">い</div>
      <div class="item" style="grid-column: 3; grid-row: 3;">いち</div>
      <div class="item" style="grid-column: 3; grid-row: 3;">に</div>
      <!-- 複数のアイテムが被った場合は予めデータからアイテムのコンポーネントをまとめてやる必要がありそう -->
    </div>
  </body>
</html>
	<html lang="ja">
	<head>
	<style>
	:root {
	--border: 1px solid black;
	--cell-width: 60px;
	--cell-height: 50px;
	--cell-columns: 24;
	--cell-rows: 20;
	}
	body {
	width: calc(100vw - 20px);
	height: calc(100vh - 20px);
	}
	@scope (#content) {
	:scope {
	display: grid;
	grid-template-columns: repeat(var(--cell-columns), var(--cell-width));
	grid-template-rows: repeat(var(--cell-rows), var(--cell-height));
	width: calc(var(--cell-width) * var(--cell-columns));
	height: calc(var(--cell-height) * var(--cell-rows));
	background-image: linear-gradient(90deg, transparent calc(var(--cell-width) - 1px), #333 var(--cell-width)), linear-gradient(0deg, transparent calc(var(--cell-height) - 1px), #333 var(--cell-height));
	background-size: var(--cell-width) var(--cell-height);
	border-left: var(--border);
	border-bottom: var(--border);
	}
	div {
	display: grid;
	place-items: center;
	place-content: center;
	}
	.item {
	background: #0000ff50; /* 透過色にしないと罫線を潰してしまう、marginとかだと微妙に隙間が空く */
	cursor: pointer;
	}
	}
	</style>
	</head>
	<body>
	<div id="content">
	<div>0:00</div>
	<div>1:00</div>
	<div>2:00</div>
	<div>3:00</div>
	<div>4:00</div>
	<div>5:00</div>
	<div>6:00</div>
	<div>7:00</div>
	<div>8:00</div>
	<div>9:00</div>
	<div>10:00</div>
	<div>11:00</div>
	<div>12:00</div>
	<div>13:00</div>
	<div>14:00</div>
	<div>15:00</div>
	<div>16:00</div>
	<div>17:00</div>
	<div>18:00</div>
	<div>19:00</div>
	<div>20:00</div>
	<div>21:00</div>
	<div>22:00</div>
	<div>23:00</div>
	<div class="item">あ</div>
	<div class="item">い</div>
	<div class="item" style="grid-column: 3; grid-row: 3;">いち</div>
	<div class="item" style="grid-column: 3; grid-row: 3;">に</div>
	<!-- 複数のアイテムが被った場合は予めデータからアイテムのコンポーネントをまとめてやる必要がありそう -->
	</div>
	</body>
	</html>