Ionic responsive multi container grid layout

Question

Problem

I wanted to create a 3 containers, one being the main big container which will take up most of the screen, and the others almost positioned as hotbars at the left and bottom. something like this.

What i've tried

I have tried the ion grid but it just seems not to work with responsive layout as well as I thought maybe there was a better way to do it?

Answer 1

You can use flexbox for these situations, it is a group of native css commands.

Read more about it here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

This is a quick example of a layout like your image, you can tweak it to serve your purpose and use your research into flexbox to expand it.

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;
}

Here is a fiddle to get you started.

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