Ионно-адаптивная многоконтейнерная сетка

Question

проблема

Я хотел создать 3 контейнера, один из которых будет основным большим контейнером, который будет занимать большую часть экрана, а другие почти позиционируются как горячие панели слева и снизу. как то так

Что я пробовал

Я попробовал ионную решетку, но она, кажется, не работает с адаптивным макетом, а я подумал, может быть, есть лучший способ сделать это?

Answer 1

Вы можете использовать flexbox для этих ситуаций, это группа собственных команд CSS.

Подробнее об этом читайте здесь https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Это быстрый пример макета, подобного вашему изображению, вы можете настроить его для своей цели и использовать свои исследования в flexbox для его расширения.

HTML

<div id="main-wrapper">
  <div id="side-bar"></div>
  <div id="other-content">
    <div id="main-content"></div>
    <div id="footer"></div>
  </div>
</div>

CSS

#main-wrapper {
  width: 100%;
  height: 300px;
  display: flex;  
  align-items: stretch;
  background-color: grey;
  padding: 10px;
  box-sizing: border-box;
}

#side-bar{
  background-color: blue;
  width: 90px;
}

#other-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-left: 10px;
}

#main-content {
  flex: 1;
  background-color: blue;
  margin-bottom: 10px;
}

#footer {
  height: 90px;
  background-color: blue;
}

Вот скрипка, чтобы вы начали.

https://jsfiddle.net/7wj31ucb/69/