Как разместить с помощью гридов данный блок?

Question

[Yaroslav723]

<div class="cards__images">
                    <img src="./image/cards/book.png" width="280" height="280" alt="book">
                    <img src="./image/cards/hand.png" width="160" height="130" alt="hand">
                    <img src="./image/cards/cup.png" width="160" height="130" alt="cup">
                </div>

Comments

[Ankhena]

Две строки, два столбца.

Что именно у вас не получилось?
Ваш код с видимой проблемой разместите в песочнице типа codepen.io

Пройдите простенькую игру по гридам, очень поможет https://cssgridgarden.com/#ru

[Александр Варлаков]

Ankhena, набрать в поисковике
https://yandex.ru/search/?text=css+grid+%D0%BE%D0%...

[Ankhena]

Александр Варлаков, спасибо, я умею

[Александр Варлаков]

Ankhena, я про автора вопроса, а не про вас. У автора вопроса не получилось набрать текст в поисковике.
Вопрос такой был актуален года три-четыре назад - когда информации было мало. Сейчас можно до вечера листать результаты поиска...

[Ankhena]

Александр Варлаков, угу, только больше толку, если писать об этом не мне (отвлекая тем самым не понятно на что), а ТСу

[Yaroslav723]

Ankhena, какая проблема в коде где именно?

[Yaroslav723]

Ankhena,

cards__images{
        display: grid;
        grid-template-columns: 2fr 1fr;
        grid-gap: 1em;
      }
      .cards__images :first-child { 
        grid-row: 1 / 3;
      }

[Ankhena]

Yaroslav723,

какая проблема в коде где именно?

В арифметике.
160х2 не будет равно 280.
А вы пишете 2fr 1fr. Ну точнее не вы, а тот кто вам подсказал это в ответе.

Если блок неадаптивный, то можете задать по min-content.
Если адаптивный, то задать оберткам картинок aspect-ratio, если позволяет ТЗ или использовать хак с паддингами для пропорций (легко гуглится). А картинкам ширину и высоту по 100% и подходящий object-fit.

Потом определиться откуда взялся 1em в gap и задать нормально (в зависимости от необходимого поведения при адаптиве)