Different Layouts for different windows size

Ionic Framework ionic-v3
1

Hello,

is it possible to use different layouts for different window size?

For example, I have 8 images:

 <ion-img width="100" height="100" src="./assets/img/icon1.png"></ion-img>
 <ion-img width="100" height="100" src="./assets/img/icon2.png"></ion-img>
 <ion-img width="100" height="100" src="./assets/img/icon3.png"></ion-img>
 <ion-img width="100" height="100" src="./assets/img/icon4.png"></ion-img>

And so on.

My target is:

900px show 8 of them in a row,
500px show 4 of them in a row
< 500px show 2 of them in a row

Grid with wrap works but make 5 and 3 and something like that.

Anybody a solution?

2

Ok this is my solution, based on 8 pics in a row, reduce two 4 and 2 in a row. Using responsive-lg and responsive-sm with a nested grid and 100px image width.

The Code is not very pretty but works. Tested with “ionic serve” on Chrome and with my Galaxy S6 Edge, switching between portrait and landscape mode.

HTML:

  <ion-grid class="responsiv-grid" style="padding-top: 20px;">
    <ion-row responsive-lg>
      <ion-col width-50>
        <ion-grid>
          <ion-row responsive-sm>
            <ion-col width-50>
              <ion-grid>
                <ion-row>
                  <ion-col width-50>
                    <ion-img width="100" height="100" src="./assets/img/pic.png"></ion-img>
                  </ion-col>
                  <ion-col width-50>
                    <ion-img width="100" height="100" src="./assets/img/pic.png"></ion-img>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </ion-col>
            <ion-col width-50>
              <ion-grid>
                <ion-row>
                  <ion-col width-50>
                    <ion-img width="100" height="100" src="./assets/img/pic.png"></ion-img>
                  </ion-col>
                  <ion-col width-50>
                    <ion-img width="100" height="100" src="./assets/img/pic.png"></ion-img>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
      <ion-col width-50>
        <ion-grid>
          <ion-row responsive-sm>
            <ion-col width-50>
              <ion-grid>
                <ion-row>
                  <ion-col width-50>
                    <ion-img width="100" height="100" src="./assets/img/pic.png"></ion-img>
                  </ion-col>
                  <ion-col width-50>
                    <ion-img width="100" height="100" src="./assets/img/pic.png"></ion-img>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </ion-col>
            <ion-col width-50>
              <ion-grid>
                <ion-row>
                  <ion-col width-50>
                    <ion-img width="100" height="100" src="./assets/img/pic.png"></ion-img>
                  </ion-col>
                  <ion-col width-50>
                    <ion-img width="100" height="100" src="./assets/img/pic.png"></ion-img>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-col>
    </ion-row>    
  </ion-grid>

CSS:

.responsiv-grid ion-col, .responsiv-grid ion-grid {
    text-align: center;
    padding: 0;
    margin:0;
}