CSS Столбцы сетки располагаются друг над другом - PullRequest
Новая
       5

CSS Столбцы сетки располагаются друг над другом

0 голосов
/ 25 марта 2020

Меня попросили создать специальный c дизайн календаря. Идея заключается в том, что мне нужно иметь возможность добавлять и убирать новые столбцы месяца, и все они должны отображаться без прокрутки.

Я использовал CSS Сетка, чтобы более или менее достичь того, что мне нужно , в следующем примере.

https://codepen.io/CalendarTest/pen/QWbZzpE

.schedule {
  display: grid;
  grid-template-columns: repeat(auto-fill, [month] 1fr);
  grid-template-rows: [months] 1fr [days] 31fr;
}

@for $month-idx from 0 through 12 {
  .month-#{$month-idx} {
    grid-column: month #{$month-idx};
    grid-row: days;
    display: grid;
    grid-template-rows:
            repeat(31, [day] 1fr);
    grid-template-columns:
            [month-day] 25px
            [month-short] 25px
            repeat(auto-fill, [month-slots] 5px)
            [month-end];
  }
}

Пока это выглядит, хорошо. Я хотел сделать так, чтобы в месяцах не было пустых столбцов. Однако, когда я изменил набор, 5px в столбцах сетки-шаблона повторится на 1fr или auto, следующий пример показывает, что происходит.

https://codepen.io/CalendarTest/pen/xxGymgj

.schedule {
  display: grid;
  grid-template-columns: repeat(auto-fill, [month] 1fr);
  grid-template-rows: [months] 1fr [days] 31fr;
}

@for $month-idx from 0 through 12 {
  .month-#{$month-idx} {
    grid-column: month #{$month-idx};
    grid-row: days;
    display: grid;
    grid-template-rows:
            repeat(31, [day] 1fr);
    grid-template-columns:
            [month-day] 25px
            [month-short] 25px
            repeat(auto-fill, [month-slots] 1fr)
            [month-end];
  }
}

Я предполагаю, что делаю что-то не так, но понятия не имею, что. Это то, что я пытаюсь достичь, возможно даже с помощью grid?

Я думал об использовании подсетки, но я ограничен Chrome в качестве браузера, так что идея ушла в окно.

...