Как так сверстать?

Question

[LolExtasy]

Как можно адаптивно сверстать такие секции, где одна сторона выходит за контейнер, а другая его соблюдает, чтобы было адаптивно

Comments

[RAX7]

Как сверстать оффсет блоки?

Answer 1

[bqio]

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

<div class="grid">
  <div>content</div>
  <div><img /></div>
  <div><img /></div>
  <div>content</div>
</div>

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

Comments

[LolExtasy]

Хочу чтобы текст прилегал к краям сетки и в дальнейшем ей следовал

[v3shin]

LolExtasy, хочу денег, пива и телок. И мир во всем мире.
Вы о какой сетке?

[Andrey Vasilev]

v3shin, рыболовной

[LolExtasy]

v3shin, Ну.. Смотрите, допустим у нас есть секта скажем 1170 пикселей. И тут попадается такой вот блок, картинка занимает 50% и текст 50%, но текст как вы видите он в макете по сетке, так вот я об этом и хочу спросить, как можно сделать так? Центровать текст margin'ом внутки блока текста (если я просто тупо центрую текст то он как бы не соблюдает сетке) или есть какие то другие варианты. Строго не судите))

[bqio]

LolExtasy,

.content {
  display: flex;
  align-content: center;
  justify-content: center:
}

[LolExtasy]

bqio, так я же пишу, если так сделать то он как бы не по сетке

[v3shin]

LolExtasy, есть вариант центрировать контент grid'ом, как написано в этом руководстве.

Answer 2

[Антон Литвиненко]

Я конкретно тут вообще не вижу проблемы.
1. картинка бекграундом, поверх нее в сетке текст, который занимает 4 колонки
2. Картинка абсолютом, поверх нее блок с все той же сеткой, 4 колонки которой занимает текст
серое - бекграунд под картинкой или одновременно с ней

Answer 3

[chingiz21]

Через display: flex, затем задать свойство wrap. Ну и по мелочи натянуть картинки, оформить текст.