Как вставить картинку и текст справа от сетки Grid?

Question

[Владислав Моисеенко]

Как вставить картинку и текст справа от меню ? У меня это сетка Grid с 2 столбцами и 1 строкой. Ведь если создам 3 столбец он растянется на всю ширину и длину и это уже будет не то. и как сделать выпадающее меню на Grid? или как то по другому? По типу наводишь на кнопку Автозапчасти и справа от него выводится форма (окно) со Категориями а в них уже товары.

Comments

[Ankhena]

1. Прикрепите скрин как должно быть
2. Прикрепите ссылку на песочницу с вашими попытками

Если скрин в вопросе это то, как у вас получилось, то это не соответствует утверждению:

У меня это сетка Grid с 2 столбцами и 1 строкой.

и как сделать выпадающее меню на Grid?

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

[Владислав Моисеенко]

Ankhena, Может проще сделать выпадающее в правую сторону меню на bootstrap? Что такое Абсолют? Т.е будет выпадать под ним внизу? Не совсем, я имел ввиду слева колонка с категориями товара а посередине и справа хотел бы картинку с текстом, типа новостей или горячих товаров. А При наведении на категорию товара "Батарейки" например, у нас справа от него выскакивает форма-выпадающее меню. Как в DNS к примеру.

[Ankhena]

Владислав Моисеенко, абсолют это position: absolute

Т.е будет выпадать под ним внизу?

Почему именно внизу? Куда спозиционируете, там и будет.

Может проще сделать выпадающее в правую сторону меню на bootstrap

Это как вам удобнее. Сути не меняет.

А При наведении на категорию товара "Батарейки" например, у нас справа от него выскакивает форма-выпадающее меню. Как в DNS к примеру.

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

И перечитайте пункты 1 и 2 из первого комментария.
Без них мне практически нечего добавить. Потому что скрин не соответствует словесному описанию и совершенно не понятно где и какой у вас grid и где сейчас располагается тот блок который "типа новостей и горячих товаров"

Answer 1

[Leonid]

оберните контейнер меню в flex контейнер и добавьте еще один блок. Ну или по вашему варианту если добавить третий столбец, т.е. просто указать grid-column: 3; он окажется за сеткой, можно его сделать, например display: inline-block; и указать размеры типа width: 150px; (но это veri bad practics на мой взгляд). Выпадающее меню если делать на grid то нужно делать grid контейнер, с абсолютным позиционированием относительно пункта меню вероятно+ задать z-index ы, что бы вырвать из общего потока верстки и отобразить сверху и что бы отображалось по :hover . Но вероятно проще найти реализацию на js и использовать ее. А т.к. верстка у вас простая, я бы вообще на bootstrap переверстал... Почитайте о нем. В любом случае вам grid ни к чему тут совершенно. Везде можно flex ом обойтись.