Как растянуть один grid-div на всю ширину?

Question

[CHtommy]

Подскажите, не могу понять, как на гридах можно растянуть один блок на всю ширину, а остальные блоки встанут вместе по-своему.
На flex это делается легко, через flex:1 и div становится на всю ширину, но аналог на grid как изобразить?
На данный момент имею навигационное меню и последний div мне нужно убрать в сторону(по ширине), собственно юзаю grid + div:last-child и на него вешаю аргументы, но не получается...
upd: Возможно кто-то скажет, что можно просто end заюзать и проблема решена, но хотелось бы при этом иметь размеры блоков соответствующие, а получается совсем иначе. Размеры растягиваются, как будто я задал grid-template-columns(repeat(10, auto)
updd: Возможно кто-то скажет, что можно ведь сделать 2 div, в одном - одни элементы, в другом - другие, и это правильно, но не правильно мне по итогу покажет react.js т.к он сверху еще свой div создает и писать всякий мусор под то, чтоб мне отрендерилился компонент без div лишнего - такое себе.
grid:

flex:

И проблема в том, что я бы мог задать размеры + grid-template, но при создании дополнительных объектов у меня просто всё сломается и нужно по всей ширине задать "grid-auto-flow"
Может я не правильно верстаю...

Comments

[imko]

А зачем тут грид если тут он лишний? Ставь размер колонок первыых тогда min-content

[Ankhena]

1. Прочитайте про grid-template-columns и его возможные значения.
2. Прочитайте про единицы fr

Либо используйте флекс и margin-left auto, учитывая, что судя по скрину вам нужно, чтобы блок был справа, а вовсе не растянулся на всю ширину.

[Windramix]

Ну если по простому то так

div class="block">
    <div class="container">
      <div class="block__inner">
        <div class="block__item">1</div>
       <div class="block__item">2</div>
       <div class="block__item">3</div>
      </div>
    </div>
  </div>

<style>
.block__inner{
  display: grid;
  grid-template-columns: 1fr 1fr 200px;
  gap: 10px;
}
.block__item{
  background-color: #fff;
}
</style>

если больше блоков то добавляй fr

.block__inner{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 50px;
  gap: 10px;
}

[CHtommy]

Ankhena, мне вот интересно к чему этот ответ...
"Либо используйте флекс и margin-left auto, учитывая, что судя по скрину вам нужно, чтобы блок был справа, а вовсе не растянулся на всю ширину. "
А "flex: 1" что дает по факту? Если от терминологии двигаться, то в примере flex в блоке справа стояло "flex:1", тем самым мы дали возможность last-child занять полностью все пространство ДОСТУПНОЕ!!!!.
Получается так, что area ничем не занята за исключением div"ами данных блоков, которые находятся внутри flex. В рамочке этой с пунктиром.
Получается так, что он автоматически дал "левым" блокам ширину, которая была прописана внутри них (auto) и занял всё простраство правый. И получается так, что если вдруг блоков станет не 4, а 10, то они пойдут с левой стороны до конца правого, но на правом можно схитрить и дать ему например width и дойдут левые divы до правого блока с фикс.шириной.
И какой смысл только использовать margin-left auto? Ну вот чтобы что? Я как неопытный тогда хочу понять...Смысл какой? А если никакого нет смысла, то зачем вообще это применять?
upd: и да, как вы поняли, что он просто стоит справа? Почему я на скрине вижу, что именно во flex стоит text-align: end. Причем я в начале своего вопроса написал, то что там стоит flex 1 во всю ширину flex.

[CHtommy]

Windramix, классно, но чуть дополню, получается так будет куда проще :)

grid-template-columns: minmax(100px, max-content) repeat(auto-fill, 119px) 39%;

И вот проблему победить почти получилось, и видимо придется элементы по width ставить, либо попробовать сетку отрисовать автоматическую,увы, но там явно будет не 4 блока) спасибо)

[Ankhena]

CHtommy,

upd: и да, как вы поняли, что он просто стоит справа?

Попробуйте представить, что дизайнеру пришло в голову задать фон или рамку правому элементу. Будет это логично выглядеть, если блок будет растянут на всё свободное пространство? А если он будет прибит к правому краю?

[CHtommy]

Ankhena, если я представлю, то кардинально изменится вся картина и естественно таких бы вопросов не было - это логично, но я упираюсь в react, поэтому мне приходится использовать grid для своего же удобства, но так как знаний у меня мало в grid, то пришлось задать вопрос относительно моей проблемы, а не какого-то представления
Если было бы всё просто, и задача была поставлена "просто сделай", то я бы сюда не пришел... :)

[Ankhena]

CHtommy, тут грид не дает удобства.

если я представлю, то кардинально изменится вся картина

Да, именно по этому имеет смысл этим заниматься. Причем до выбора инструмента для решения, а не наоборот.
Вся разница в одном css свойстве. Хоть с реактом, хоть без него.
А ещё обязательно нужно представлять, что будет при переполнении, если элементы перестанут помещаться в строку.