Home > css > Ionic grid system 3x3 not applying

Ionic grid system 3x3 not applying

February 2Hits:7
Advertisement

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

Ionic grid system 3x3 not applying

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:

Ionic grid system 3x3 not applying

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.

Answers

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>

Related Articles

  • Ionic grid system 3x3 not applying

    Ionic grid system 3x3 not applyingFebruary 2

    I am trying to create this with the grid system of Ionic My html code: <ion-content> <div class="row responsive-md" > <div class="col col-33"> <div> <a ng-repeat="gin in gins" href="#">

  • Anyone using 960 Grid System or YUI 2 Grids CSSApril 13

    Anyone having experience with 960 Grid system and getting it to play nicely with SharePoint? I am intrested in experience from other CSS Framework and how successfull was your team in implementing this? --------------Solutions------------- I'm using

  • most efficient way to create a grid system in unityMay 19

    I'm creating a little tower defence game to get myself acquainted with unity. At first I was going to emulate a grid system by capturing touches / mouse clicks and rounding the coordinates to the nearest whole numbers. This is very low cost and works

  • A Creative Grid System With Sass and calc()March 27

    Before we even get started talking about Sass and the code for this project, let me remind you this is no more than a quick experiment which by no means should be used in a live context. So what follows is only a proof of concept of what we could do

  • Simple grid system made out of CSS columnsApril 15

    I have been researching and experimenting with HTML5 and CSS3. I was aiming to create a very simple but efficient tiled gallery / grids. So some sort of grid system that I can layout anything inside. Below is what I have created, what are your opinio

  • Bootstrap's Grid System vs. Susy: A Comparison

    Bootstrap's Grid System vs. Susy: A ComparisonAugust 29

    There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap. Today, I'll like to introduce you to a slightly lesser kn

  • Grid System Comparison: Bootstrap 3 vs. Foundation 5

    Grid System Comparison: Bootstrap 3 vs. Foundation 5January 6

    Bootstrap and Foundation are two of my favorite front-end frameworks, especially for rapid website prototyping. Both come with ready-to-use components that speed up my workflow. Beyond their small differences, most of their fundamental features look

  • Grid system for mobile app mockups?February 10

    1) For native mobile apps (iOS7, Android etc.), do you guys do mockups using the grid system too? Like maybe, 4-column grid layout for mobile apps? I heard of the grid system being used for responsive websites but don't seem to hear much of it being

  • Understanding CSS Grid Systems from the Ground UpMarch 11

    Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming considered best practice for rapid layout scaffolding. As a result, there has been no shortage of frameworks popping up offering their own grid systems trying t

  • How I can use grid system of bootstrap in views-exposed-form.tpl.php?November 6

    I have a form with filters exposed and I want to apply the bootstrap grid system for each input to adapt to different devices, but in the views-exposed-form.tpl.php I don't know how to access each generated input.

  • Introducing sGrid: A Stylus-based Flexbox Grid SystemDecember 2

    After reading the title of this post, you might ask: Why another grid system? This is a good question. Basically there are plenty of grids out there and many of them are flexbox grids too. So why have I built another tool that's similar? The short an

  • Bootstrap Grid System on mobiles?February 11

    See the following JSFIDDLE <div class="row"> <div class="col-md-3 col-xs-6"> <div style="background: blue;"> test & test & </div> </div> <div class="col-md-3 col-xs-6"> &l

  • A grid system (Photoshop/Pixelmator) for designing for the iPadSeptember 24

    I am designing an iPad app, so I could really use a grid template. I could probably just work with the 960 grid system; however, I'd love to find a solution that is tailor-made for the purpose (that is, takes into account such things as the iPad's re

  • My 960 grid system has wider columns that standard. 55px instead 40px for 16 columnsOctober 27

    I was surprised to discover my website is wider than is supposed to be. I am using Drupal + Omega Theme that uses 960 grid system. The total width of the site is 1180 instead 960. The columns are wider: On 16 columns options: they are supposed to be

  • Mixing the classic type size scale, grid systems and modular scalesNovember 25

    I'm coming from a programmers background and just trying to understand how sizes should relate. I read in the book "designing for the web" that these are the classic type sizes and text set in these size should look better if typeset correctly.

  • Designing for the Web: Templates and Grid Systems

    Designing for the Web: Templates and Grid SystemsDecember 12

    Continuing on from the previous article in this series, Designing for the Web: Resolution and Size, we cover some helpful and important factors while creating a template for designing a website. In this article, we will cover some important issues an

  • DesignFestival: Designing for the Web: Templates and Grid SystemsDecember 13

    Continuing on from the previous article in this series, Designing for the Web: Resolution and Size , we cover some helpful and important factors while creating a template for designing a website. In this article, we will cover some important issues a

  • How to choose a CSS grid system for new theme?August 4

    I am going to make a new responsive theme based on an existing base theme for drupal 6. The theme need to be minimal but flexible. As there are many CSS grid systems to choose from, I've read that 960.gs has fallen out of fashion as it is too small f

  • Is there a comparison of Frameworks, Grid Systems and Boilerplates? September 1

    There are so much of them, how can I know what to use for a project? --------------Solutions------------- Well, there is a comparison of web application frameworks in a Wikipedia page. Also you may find this Stackoverflow post on Grid system comparis

  • What are "rows" in a responsive grid system?

    What are "rows" in a responsive grid system?January 22

    I'm looking at various grid systems to make a responsive design, but I keep coming across the same thing that puzzles me : What's a row in a design where everything can move based on the screen size ? Say I want the following design on a large screen

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.771 s.