CODEWITHSUNDEEP
cssionic-framework
GY22
GY22

Reputation: 785

Ionic grid system 3x3 not applying

I am trying to create this with the grid system of Ionic

enter image description here

My html code:

  <ion-content>
    <div class="row responsive-md" >
        <div class="col col-33">    
            <div>
                <a ng-repeat="gin in gins" href="#">
                    <img class="gin-mixes-placeholder" ng-src="{{gin.src}}">
                    <p>{{gin.title}}</p>
                </a>
            </div>
        </div>
    </div>
  </ion-content>

But the result is coming back like this:

enter image description here

My html code should work because I used this bit of code in another project, so I don't understand why my grid system is not working the why I want it to.

The only css that I am using is the width and height for the image.

Upvotes: 0

Views: 644

Answers (1)

GY22
GY22

Reputation: 785

Found the solution thanks to the people of the slack Ionic Community

For those of you wondering how to solve the issue here you go:

<ion-content class="padding" ng-controller="GinMixesCtrl">
        <div class="row" ng-repeat="gin in gins" ng-if="$index %3 === 0">
            <div class="col col-33" ng-if="$index < gins.length">   
                <a  href="#" >
                    <img class="gin-mixes-placeholder" ng-src="{{gins[$index].src}}">
                    <p class="customH2_gin-mixes-title">{{gins[$index].title}}</p>
                </a>
            </div>
            <div class="col col-33" ng-if="$index+1 < gins.length"> 
                <a  href="#" >
                    <img class="gin-mixes-placeholder" ng-src="{{gins[$index+1].src}}">
                    <p class="customH2_gin-mixes-title">{{gins[$index+1].title}}</p>
                </a>
            </div>
            <div class="col col-33" ng-if="$index+2 < gins.length"> 
                <a  href="#" >
                    <img class="gin-mixes-placeholder" ng-src="{{gins[$index+2].src}}">
                    <p class="customH2_gin-mixes-title">{{gins[$index+2].title}}</p>
                </a>
            </div>
        </div>
    </ion-content>

Upvotes: 2

Related Questions