Responsive Grid layout

ionic-v1
24

I know this is an old thread, but this might help someone. I tried using the bootstrap grid as suggested here, and it did not work well. Bootstrap doesn’t play well with flex elements, and the ionic css doesn’t work well with block layout.

So I rolled my own responsive flex grid, which, as suggested was really easy. Here is the scss code…

$col-widths: 10 20 25 30 33 40 40 66 70 75 80 90;
$sizes: "sm" "md" "lg";
$screens: $screen-sm $screen-md $screen-lg;

@mixin col-class-maker($size, $width){
  .col-#{$size}-#{$width} {
    @include flex(0, 0, percentage($width/100));
    max-width: percentage($width/100);
  }
}

// Create the small columns
@each $width in $col-widths {
 @include col-class-maker(sm, $width);
}

// Create the md columns
@each $width in $col-widths {
 @media ( min-width: ($screen-sm + 1) ){
   @include col-class-maker(md, $width);
 }
}

// Create the lg columns
@each $width in $col-widths {
 @media ( min-width: ($screen-md + 1) ){
   @include col-class-maker(lg, $width);
 }
}
2 Likes