Could you help with the assignment?

Question

css

Hello, I did the task of building a pyramid.
The result of my solution The
conditions of the problem can be found in the repository

I understand that creating such a number of elements in the DOM is a disastrous task, but this was the first idea that came to mind, the second is canvas, but I don’t have enough knowledge in this technology, because I didn't pay enough attention to it.

The problem that occurred:

With more than 100 lines, the pyramid display is terrible, many elements disappear, there is no way to scroll to the left (used overflow: auto)

Could you tell me how to fix this, maybe someone knows canvas well and can explain how to do this on this technology?
Thanks in advance for any help, I myself apply for a Junior + position in the front.

Answer 1

For good, you need to somehow scale the pyramid, it's better if you calculate the height and width of the bricks, as well as the font size.
The code below only makes it easier to see the pyramid when it is large.

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%;
}