Как отменить зависимость блоков grid?

Question

[RockWorkerZ]

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

Comments

[xdevelx]

А зачем для таблицы использовать grid? Надеюсь вы таблицу не дивами сверстали?

[Виталий Першин]

xdevelx, Например чтобы делать адаптацию нормальную и стилизовать как вздумается. В таких шаблонах на мобильном весь текст можно выстроить в одну колонку, хотелось бы посмотреть, как вы это сделаете таблицой без дивов

[xdevelx]

Виталий Першин, Вот для мобильных и делайте display нужный, а таблицу верстайте как положено.

[Виталий Першин]

xdevelx, Вы похоже эксперт в положенном.. Интересно какой дисплей можно применить к тегам table tr td th

[Ankhena]

Виталий Першин, да хоть display grid. Или флекс или даже contents, чтобы не мешалось лишнее. Или любой другой, нужный для стилизации.

[xdevelx]

Евгений Голубев, А я более бессмысленного и ненужного комментария не видел. В чем суть? Есть что сказать по делу?

[xdevelx]

Виталий Першин, Да любой - block, flex, grid. Для строк и display: contents подойдёт.

[Ankhena]

RockWorkerZ
Не очень понятно, кого от кого и чего нужно достичь.

Но волшебный хрустальный шарик говорит, что вам нужно align-items: start

Ну либо align-self. Шарик не четко формулирует.

[Ankhena]

Евгений Голубев,

2. Продолжим тем, что даже если бы это была таблица в ее привычном понимании - запрещать верстать ее блоками для кастома - дебилизм.

По семантике, табличные данные верстаются таблицами.
Да, вы можете наплевать на семантику и верстать хоть div'ами, если позволяет ТЗ и тим лид.

И вообще нет проблем адаптировать table при современных возможностях css.

1. Ну начнем с того, что это не таблица.

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

В теории, можно заменить на dl-dt-dd, но я бы, в данном случае, не стала.

[Ankhena]

Виталий Першин, Виталий, у gap нужно ставить px.

[Виталий Першин]

Ankhena, Согласен, мой косяк) Но в любом случае, я уже много раз успел наступить на грабли с таблицами особенно в более старых версиях браузеров и повторять нет желания.

[Ankhena]

Виталий Першин, боюсь даже представить, что там делали старые браузеры с гридами для таблиц...

[Виталий Першин]

Ankhena, Речь не о гридах, да и не особо старых браузерах. Помню была проблема с абсолютным позиционированием, c z-index, с псевдоэлементами, в разное время на разные проблемы натыкался, в то время как на дивах никогда никаких проблемы не было, не вижу смысла ждать пока выстрелишь себе в нугу этими таблицами. Да бордеры и текст легко запилить, но когда там графика от безумного дизайнера, начинаются пляски.

[RockWorkerZ]

Ankhena, Хрустальный шарик) Только что исправил проблему вложенным дивом, т.е. вложил блок с карточками в другой див)

[RockWorkerZ]

Вы тут конечно разошлись :)

[RockWorkerZ]

Не подскажите как закрыть вопрос?

[Ankhena]

RockWorkerZ,

Только что исправил проблему вложенным дивом, т.е. вложил блок с карточками в другой див)

Сильно...

Я же написала вам как делать.

Но на будущее, делайте песочницу с видимой проблемой на jsfiddle.net, всем будет проще.

[RockWorkerZ]

Ankhena, Хорошо) Спасибо.

Answer 1

[Ankhena]

Можно ли как-то отменить эту зависимость?

Можно, с помощью свойств align-items или align-self

Answer 2

[RockWorkerZ]

Левый блок нужно сделать вложенным, и это решит проблему. Подстраиваться будет именно новый блок, а вложенный блок не будет менять свои размеры и проблема будет решена). Получилось примерно так