Css格栅布局(九宫格实现切换1/1/9/3)

.grid-container {
  display: grid;
  gap: 10px;
  grid-template-areas: 'a b c'
                     'd e f'
                     'g h i';
  grid-auto-flow: row dense;
}

.item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 20px;
  text-align: center;
  cursor: pointer;
//transition: transform 0.3s ease;
}

.active {
  grid-area: 1 / 1 / 9 / 3;
}

.active video {
  width: 100%; /* 使视频放大 */
  height: 800px;
  grid-area: 1 / 1 / 9 / 3; /* 将放大的视频移动到左侧 */
  margin: auto; /* 居中 */
}

根据js调用事件触发 active