Я создал это веб-приложение, которое шифрует буквы для создания слов. Все буквы лежат горизонтально. Все работает нормально, пока вы не добавите много букв, и в этот момент слово переполняет ширину экрана, который дает плохой пользовательский опыт.
Дело в том, как я могу измерить каждую букву в этом макете, чтобы доступная ширина, которую он может получить, и изменить размер, когда буквы добавляются / удаляются? Основная проблема заключается в том, что я не могу установить его в качестве столбцов в макете сетки, поскольку количество столбцов будет постоянно меняться.
Это мой код для родительского слова:
* 1006. *
Тогда все его дочерние элементы являются компонентами букв, и это их расположение. Я должен был определить ширину элемента, потому что если бы я не был, он был достаточно широк, потому что это поле ввода (пользователи могут менять буквы, поэтому пришлось использовать поле ввода):
.letter {
width: 7rem;
display: grid;
grid-template-rows: repeat(3, 1fr);
justify-items: center;
align-items: center;
&__input {
border: none;
max-width: 7rem;
text-align: center;
font-family: var(--font-main-bold);
font-size: 7rem;
font-weight: 700;
outline: none;
text-transform: uppercase;
@media only screen and (max-width: 600px) {
font-size: 4rem;
}
}
}
Мне кажется, что на самом деле то, что я создал, может объяснить это гораздо лучше, но я не уверен, нарушает ли оно какие-либо правила публикации ссылки. Если бы не было, я был бы признателен, если бы кто-нибудь дал мне знать, и я опубликую это.