Menu icon Foundation
Grid system

Hi, 

Worked on getting a 3x3 grid system, but when i scale it down to mobile it just looks wrong. 

I understand that the row tag is making everything start a new row, but i dont know any other ways to do this.

my code looks like this: 

<row>
        <columns large="4" small="6">
          <img class="image-ah rounded-edges" src="http://via.placeholder.com/155x195">
        </columns>
        <columns large="4" small="6">
          <img class="image-ah rounded-edges" src="http://via.placeholder.com/155x195">
        </columns>
        <columns large="4" small="6">
          <img class="image-ah rounded-edges" src="http://via.placeholder.com/155x195">
        </columns>
    </row>
    <row>
        <columns large="4" small="6">
          <img class="image-ah rounded-edges" src="http://via.placeholder.com/155x195">
        </columns>
        <columns large="4" small="6">
          <img class="image-ah rounded-edges" src="http://via.placeholder.com/155x195">
        </columns>
        <columns large="4" small="6">
          <img class="image-ah rounded-edges" src="http://via.placeholder.com/155x195">
        </columns>

    </row>

emailgrid

Hi, 

Worked on getting a 3x3 grid system, but when i scale it down to mobile it just looks wrong. 

I understand that the row tag is making everything start a new row, but i dont know any other ways to do this.

my code looks like this: 

<row>
        <columns large="4" small="6">
          <img class="image-ah rounded-edges" src="http://via.placeholder.com/155x195">
        </columns>
        <columns large="4" small="6">
          <img class="image-ah rounded-edges" src="http://via.placeholder.com/155x195">
        </columns>
        <columns large="4" small="6">
          <img class="image-ah rounded-edges" src="http://via.placeholder.com/155x195">
        </columns>
    </row>
    <row>
        <columns large="4" small="6">
          <img class="image-ah rounded-edges" src="http://via.placeholder.com/155x195">
        </columns>
        <columns large="4" small="6">
          <img class="image-ah rounded-edges" src="http://via.placeholder.com/155x195">
        </columns>
        <columns large="4" small="6">
          <img class="image-ah rounded-edges" src="http://via.placeholder.com/155x195">
        </columns>

    </row>
Kevin Neal about 2 years ago

Take a look at using a Block Grid, this is perfect for making equally sized grids