我几乎已经完成了我的网格时间表。在桌面上看起来很完美，我想说。小问题是移动。在更大的手机上看起来可能不错，但在我的iPhone 13迷你它...你可以看到，一些文本是不适合在他们的字段，如**"Kondiční kickbox"**在第二和第四行。
也许可以减少时间字段？你知道我有06 - 07，07 - 08 ...... 14 - 15，但对于手机来说，它可能只有06 - 15。但我必须做第二个网格表，总是隐藏一个，显示另一个取决于设备的宽度。

.grid {
  display: grid;
  grid-template-columns: repeat(64, 1fr);
  text-align: center;
}

.grid > * {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #c0c0c0;
  padding: 5px 5px;
  font-weight: bold;
  height: 66px;
  line-height: 1.5rem;
  font-size: 13px;
}
.span-col-4 {
  grid-column: span 4 / auto;
}

.span-col-48 {
  grid-column: span 48 / auto;
}

.span-col-6 {
  grid-column: span 6 / auto;
}

.span-col-2 {
  grid-column: span 2 / auto;
}

.span-col-38 {
  grid-column: span 38 / auto;
}

.span-col-5 {
  grid-column: span 5 / auto;
}

.span-col-44 {
  grid-column: span 44 / auto;
}

.span-col-60 {
  grid-column: span 60 / auto;
}

.time,
.day-column {
  background-image: linear-gradient(
    to top,
    #b51c18,
    #c6201a,
    #d8231d,
    #ea271f,
    #fc2b21
  );
  color: white;
  height: 45px;
}

.day-column {
  color: black;
}

.sparingy {
  background-image: linear-gradient(
    to bottom,
    #02080a,
    #0d1c21,
    #0e2b37,
    #103c50,
    #154c6a
  );
  color: white;
}
.kickbox6 {
  background-image: linear-gradient(
    to bottom,
    #ffa93a,
    #ffa32f,
    #ff9d24,
    #ff9716,
    #ff9000
  );
  color: black;
}

.kickbox10 {
  background-image: linear-gradient(
    to bottom,
    #ff9000,
    #ff8100,
    #ff7200,
    #ff6100,
    #ff4d00
  );
  color: black;
}
.rodice {
  background-image: linear-gradient(
    to bottom,
    #fffe00,
    #f4fe00,
    #eaff00,
    #deff00,
    #d3ff00
  );
  color: black;
}

.mma {
  background-image: linear-gradient(
    to bottom,
    #ff0e00,
    #ea0e02,
    #d50e03,
    #c00e04,
    #ac0d04
  );
  color: white;
}
.zavodnici {
  background-image: linear-gradient(
    to top,
    #114560,
    #0f5274,
    #0c5f88,
    #096c9d,
    #0a79b3
  );
  color: white;
}
.sparingy {
  background-image: linear-gradient(
    to bottom,
    #0063ff,
    #1748cc,
    #142f9c,
    #09186f,
    #000046
  );
}
.kondicni {
  background-color: #489bc9;
  color: black;
}

.box {
  background-color: #524d4d;
  color: white;
}

@media screen and (max-width: 1024px) {
  .grid > * {
    font-size: 1.5vw;
    line-height: 1rem;
  }
}

<div class="grid">
      <div class="span-col-4 time"></div>
      <div class="span-col-4 time">06:00-07:00</div>
      <div class="span-col-4 time">07:00-08:00</div>
      <div class="span-col-4 time">08:00-09:00</div>
      <div class="span-col-4 time">09:00-10:00</div>
      <div class="span-col-4 time">10:00-11:00</div>
      <div class="span-col-4 time">11:00-12:00</div>
      <div class="span-col-4 time">12:00-13:00</div>
      <div class="span-col-4 time">13:00-14:00</div>
      <div class="span-col-4 time">14:00-15:00</div>
      <div class="span-col-4 time">15:00-16:00</div>
      <div class="span-col-4 time">16:00-17:00</div>
      <div class="span-col-4 time">17:00-18:00</div>
      <div class="span-col-4 time">18:00-19:00</div>
      <div class="span-col-4 time">19:00-20:00</div>
      <div class="span-col-4 time">20:00-21:00</div>
      <div class="span-col-4">Pondělí</div>
      <div class="span-col-48">Soukromé lekce a veřejnost po domluvě</div>
      <div class="span-col-4 kondicni">Kondiční kickbox</div>
      <div class="span-col-6 box">BOX</div>
      <div class="span-col-2"></div>
      <div class="span-col-4">Úterý</div>
      <div class="span-col-38">Soukromé lekce a veřejnost po domluvě</div>
      <div class="span-col-4 kickbox6">Kickbox děti <br />6 - 10 let</div>
      <div class="span-col-5 kickbox10">Kickbox děti <br />10 - 15 let</div>
      <div class="span-col-5 mma">MMA</div>
      <div class="span-col-6 zavodnici">K1 - závodníci</div>
      <div class="span-col-2"></div>
      <div class="span-col-4">Středa</div>
      <div class="span-col-44">Soukromé lekce a veřejnost po domluvě</div>
      <div class="span-col-4 rodice">
        Rodiče a děti <br />
        3 - 6 let
      </div>
      <div class="span-col-4 kondicni">Kondiční kickbox</div>
      <div class="span-col-6 box">BOX</div>
      <div class="span-col-2"></div>
      <div class="span-col-4">Čtvrtek</div>
      <div class="span-col-38">Soukromé lekce a veřejnost po domluvě</div>
      <div class="span-col-4 kickbox6">Kickbox děti <br />6 - 10 let</div>
      <div class="span-col-5 kickbox10">Kickbox děti <br />10 - 15 let</div>
      <div class="span-col-5 mma">MMA</div>
      <div class="span-col-6 zavodnici">K1 - závodníci</div>
      <div class="span-col-2"></div>
      <div class="span-col-4">Pátek</div>
      <div class="span-col-48">Soukromé lekce a veřejnost po domluvě</div>
      <div class="span-col-6 sparingy">Sparingy</div>
      <div class="span-col-6"></div>
      <div class="span-col-4">Sobota</div>
      <div class="span-col-60">Pronájem, semináře, akce, atd...</div>
      <div class="span-col-4">Neděle</div>
      <div class="span-col-60">Pronájem, semináře, akce, atd...</div>
    </div>