Как решить проблему адаптивного поведения XY-Grid в Foundation Sites v6.5.3

Question

Я новичок в Zurb Foundation, но с удовольствием изучаю эту новую структуру. Он заменяет старую рабочую лошадку, которой я пользуюсь много лет, и, кажется, делает почти все, что мне нужно.

К сожалению, есть отзывчивый заголовок, который я пытаюсь выполнить для веб-сайта, и я не могу понять, как этого добиться в новой XY-Grid. Я немного закрылся, хотя полностью потерпел неудачу с оранжевым блоком на малой точке останова:(

Буду очень признателен за некоторые предложения.

Спасибо, господин

Мне не удалось заставить красный элемент заправиться под оранжевый и синий при больших размерах (но я могу взломать его с помощью отрицательных полей) из-за очистки строк в xy-сетке и отсутствия поддержки поплавков. Быть новичком в Foundation и flex не помогает:(

<div class="grid-x align-right">
    <div class="cell small-5 medium-4 large-3" style="background-color:green;">
        GREEN
    </div>
    <div class="cell small-7 medium-8 large-9">
        <div class="grid-x">
            <div class="cell medium-12 large-7" style="background-color:orange;">
            <!-- Does not yet move above GREEN at small -->
                ORANGE
            </div>
            <div class="cell small-12 medium-12 large-5" style="background-color:blue;">
                BLUE
            </div>
        </div>
    </div>
    <div class="cell small-12 medium-12 large-9" style="background-color:red;">
        <!--Negative margin set at LARGE breakpoint (not a good solution)-->
        RED
    </div>
</div>

Я сделал образ того, чего я пытаюсь достичь, но не могу включить его, поскольку у меня нет репутации более 10+. Возможно, эта ссылка будет разрешена: https://i.imgur.com/TBSWGZr.png

Answer 1

Насколько я понимаю, flexbox просто не был предназначен для того, что вы пытаетесь сделать. Я считаю, что это будет вариант использования сетки над Flexbox.

Если вы действительно хотите придерживаться классов по умолчанию и использовать Foundation, то это лучшее, что я мог бы получить (codepen), основываясь на предоставленном вами изображении. Ваш HTML находится сверху, а мой - снизу, поэтому мы можем увидеть прямое сравнение поведения в точках останова.

Я уверен, что кто-то с лучшими отбивными, чем я, мог бы увидеть другое решение, и в этом случае мне было бы действительно интересно увидеть это!

<div class="grid-x">
  <div class="orange cell small-12 medium-9 medium-order-2 large-4 large-order-2">
    ORANGE
  </div>
  <div class="green cell small-6 medium-3 medium-order-1 large-4 large-order-1">
    <p>GREEN</p>
    <p>content</p>
  </div>
  <div class="blue cell small-6 medium-9 medium-offset-3 medium-order-3 large-4 large-offset-0 large-order-3">
    BLUE
  </div>
  <div class="red cell small-12 medium-12 medium-order-4 large-8 large-order-4 large-offset-4">
    RED
  </div>
</div>

Как вы можете видеть, когда к каждому div добавляется больше контента, он выталкивает весь "ряд" контента, так что все они занимают 100% высоты пространства.

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

Вот отличное руководство по использованию сетки.