Фонд 6 кладки эффект с идеально выровненными внешними краями? - PullRequest
Новая
       8

Фонд 6 кладки эффект с идеально выровненными внешними краями?

0 голосов
/ 24 декабря 2018

Используя Foundation 6, есть ли способ создать этот эффект?Это сложно описать, но легко визуализировать.

enter image description here

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

Мы пробовали вложение, но это не помогает.

Мы используем сетку XY но готовы при необходимости вернуться к другим сеткам Фонда.

1 Ответ

0 голосов
/ 28 декабря 2018

Сетка XY поддерживает это с небольшим вложением и добавлением класса fluid к внешней сетке, чтобы заставить детей растягиваться. 

@import url('//cdnjs.cloudflare.com/ajax/libs/foundation/6.5.1/css/foundation.min.css');

body {
  padding: 30px;
}

.content-cell {
  background: #f4f442;
  text-align: center;
}
<div class="grid-x fluid grid-margin-x">
  <div class="small-9 cell content-cell">small 9</div>
  <div class="small-3 cell">
    <div class="grid-y grid-margin-y">
      <div class="small-6 cell content-cell">small 6</div>
      <div class="small-6 cell content-cell">small 6</div>
    </div>
  </div>
</div>
...