Не могли бы помочь с заданием?

Здравствуйте, выполнял задание по построению пирамиды.
Результат моего решения
C условиями задачи можно ознакомиться в репозитории

Я понимаю, что создавать такое кол-во элементов в DOM - пагубная задача, но это была первая идея, что пришла в голову, вторая - canvas, но знаний в этой технологии у меня недостаточно, так как не уделял ей достаточно внимания.

Проблема, которая возникала:

При более чем 100 строках ужасное отображение пирамиды, многие элементы пропадают, нет возможности проскроллить влево (использовал overflow: auto)

Не могли бы подсказать как это исправить, может кто-то хорошо владеет canvas и сможет объяснить как выполнить такое на данной технологии ?
Заранее спасибо за любую помощь, сам же претендую на Junior+ позицию во фронте.
  • Вопрос задан
  • 550 просмотров
Пригласить эксперта
Ответы на вопрос 1
profesor08
@profesor08 Куратор тега CSS
По хорошему тебе надо как-то масштабировать пирамиду, лучше если будешь вычислять высоту и ширину кирпичей, а так-же размер шрифта.

Код ниже лишь упрощает просмотр пирамиды, когда она большая.

body {
    background: var(--color-background);
}

.main {
    display: grid;
    gap: 30px;
    min-height: 100vh;
    grid-auto-rows: auto 1fr auto;
    padding: 30px;
}

.header {}

.header__rows {
    display: grid;
    grid-auto-flow: column;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.camera {
    display: grid;
    justify-items: center;
    align-items: center;
}

.pyramid {
    display: grid;
    justify-content: center;
}

.row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: auto;
    justify-content: center;
    width: 100%;
    height: 32px;
}

.brick {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    background: var(--color-backround-second);
    color: var(--color-main);
    min-width: 62px;
    height: 100%;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы