Как реализовать адаптивный CSS Grid (FlexBox)?

Question

[MarkelovNNN]

Привет, уважаемые профессионалы CSS!

Есть блок:

<div class="box">
  <div class="elem1">Первый элемент</div>
  <div class="elem2">Второй элемент</div>
</div>

Задача: первый элемент должен быть слева и растягивать бокс; второй — справа с шириной, равной содержимому этого второго элемента. Также нужно сделать бокс адаптивным, чтобы при изменении ширины экрана второй элемент при нехватке места в боксе спускался под первый и оба элемента после этого растягивались на всю ширину бокса (выравнивание содержимого элементов после этого (текста): первый - по левому краю; второй - по правому).




Наиболее лучший вариант придумал так (флексбокс, а с гридами вообще не получилось):

.box {
    display: flex;
    flex-wrap: wrap;
}
.elem1 {
    flex-grow: 100;
    background: aquamarine;
}
.elem2 {
    flex-grow: 1;
    text-align: end;
    background: bisque;
}

Но это вроде же костыль напоминает, когда flex-grow первого элемента задаётся намного больше другого.

Может данную задачу можно решить как-то более правильно?

Answer 1

[Ilya Muromtsev]

Почему бы не сделать первому элементу 80% ширины второму 20%.. В медиа изменить потом

Comments

[MarkelovNNN]

Да хочется максимально без медиа обходиться, но, судя по всему, без них никак. Спасибо за ответ.

Answer 2

[Athanor]

Ваш вариант лучше чем предложенный выше через media, т.к. вам не надо хардкодить ширину экрана. Если на каком-то устройстве ваш текст будет выглядеть иначе и перенос случится на большем/меньшем экране, то верстка поедет и придется втыкать костыли, чтоб для разных устройств и ос отрабатывали свои media.

Да, вам может показаться это костыльным, но такова уж участь фронтэнд разработчиков. Наш стек развивался большую часть времени весьма стихийно, не имея какого-то конкретного плана, так что выбирать сильно не приходится :)

Comments

[MarkelovNNN]

Спасибо за ответ ))