Как сверстать блоки которые визуально находятся на разных уровнях?

Question

[GeorgeKay]

Работаю с такими интрументами, как Tailwind CSS и Antd. Подскажите куда копать, что почитать? как такие штуки делают? есть ли примеры ?

Comments

[FeST1VaL]

Эм, у вас же просто отступ сверху у первого блока и все...

Answer 1

[Maksym Sahaidak]

Привет, скорее всего ты рановато полез в Tailwind раз не понимаешь как такие штуки делаются.
Это обычная grid сетка, у которой например рядов 5 рядов, и 2 столбика.

Ты должен сделать примерно так:

<div className='grid grid-col-[1fr_1fr] grid-row-[repeat(5,_1fr)]'>
   <div className='row-start-2 row-end-4'> </div>
  // и таким образом двигать нужные тебе блоки, если что ссылка на доку ниже
<div/>

documentation - https://tailwindcss.com/docs/grid-row

Comments

[Maksym Sahaidak]

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

[GeorgeKay]

а если это будет массив из таких однотипных карточек, и я просто [{},{},{}].map(item=>...) т.е. я не знаю точное количество элементов, но логика их отображения не меняется. Как это правильно можно написать, что отображение начинается в правой колонке, затем следующий элемент в левой колонке(причем левая колонка с отступом сверху), затем снова в правой и тд