body {

  font-family: sans-serif;

  text-align: center;

  background: #f9f9f9;

}




#board {

  width: 300px;

  height: 300px;

  margin: 20px auto;

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(3, 1fr);

  gap: 2px;

}




.tile {

  background-image: url('photo1.jpg'); /* ←お好きな画像に変更 */

  background-size: 300px 300px;

  border: 1px solid #ccc;

  cursor: pointer;

  transition: all 0.2s;

}




.empty {

  background: #eee;

  cursor: default;

}