Menu icon Foundation
Emails: Can't nest grid with inky?

Hey all,

It looks like there is currently no way to nest grids using the inky templating language. It freaks out when I try and do this i.e placing a <row> inside a <row><column>.  I can create a nested grid using straight HTML though. Any ideas for how to implement a nested grid using inky? This is a great way to put multiple buttons, social icons etc in a horizontal line in a column that only takes up 6 columns.

emailsnestedgrid

Hey all,

It looks like there is currently no way to nest grids using the inky templating language. It freaks out when I try and do this i.e placing a <row> inside a <row><column>.  I can create a nested grid using straight HTML though. Any ideas for how to implement a nested grid using inky? This is a great way to put multiple buttons, social icons etc in a horizontal line in a column that only takes up 6 columns.

Rafi Benkual over 3 years ago

That's odd - we might need to see how you are doing the nesting. This seemed to work well for me:

  <row>
    <columns large="6">
      <row>
        <columns small="6">

        </columns>
        <columns small="6">

        </columns>
      </row>
    </columns>
    ...

You don't want to have anything between the <row> and <columns>

Also, not sure if you used <column> but I don't think it works without the 's'

Tom Gates over 3 years ago

 

### The aim

|  | -  -
|  | -  -

###

### What it actually looks like

|  | -  -  -  - 
|  | 

###

<row>
  <columns large="5">
    <img src="someimage.png?text=center" alt="image">
  </columns>
  <columns large="7">
    <row>
      <columns small="6" large="6">
        <p>Hello</p>
      </columns>
      <columns small="6" large="3">
        <p>Hello</p>
      </columns>
      <columns small="6" large="3">
        <p>Hello</p>
      </columns>
      <columns small="6" large="3">
        <p>Hello</p>
      </columns>
    </row>
  </columns>
</row>

Brandon L Shinholser over 3 years ago

Same has been happening to me if I nest a similar layout in Gmail App (Android). This is what I have been trying to do for days to no avail. I'm not even using media queries -- if I add an additional <row> after the first <columns large="9">, or an additional row in the <columns large="3"> in the sidebar, the layout blows up. I may be nesting too much, though.

<container>
  <row>
    <columns large="9">
      <row>
        <columns large="12">
           <row>
             <columns large="3">
               ## image
             </columns>
             <columns large="9">
               ## content
             </columns>
           </row>        
        </columns>
      </row>
    </columns>
    <columns large="3">
      <row>
        <columns large="12">
         ## ads
        </columns>
      </row>
    </columns>
  </row>
</container>
 

 

Corey Schaaf over 3 years ago

I think you two are describing two different scenarios. 

Tom, I'll start with your approach. 

The reason your layout is blowing up is because the number of columns that exist in a row, must add up to 12. (Unless you've changed that in your settings file). 

For example, this markup will blow up because the large 7 has a row with 24 columns in it for small. Foundation for Emails isn't like Foundation for Sites where the columns add up to 12 and bumps down to the next row. I believe that's the issue your facing here. I've nested three rows down and haven't had any issues with foundation 2.1.0 or 2.0. 

<row>
  <columns large="5">
    <img src="someimage.png?text=center" alt="image">
  </columns>
  <columns large="7">
    <row>
      <columns small="6" large="6">
        <p>Hello</p>
      </columns>
      <columns small="6" large="3">
        <p>Hello</p>
      </columns>
      <columns small="6" large="3">
        <p>Hello</p>
      </columns>
      <columns small="6" large="3">
        <p>Hello</p>
      </columns>
    </row>
  </columns>
</row>

 

Brandon, 

I believe your layout isn't working because based on your example, you have to be careful about the image sizes you are using. What I mean by that is the image size can't be larger than the column it's sitting inside of for large. If the image is larger, what you're describing will happen. I would suggest changing the size of the image you're using with a http://placehold.it/100x100 graphic and see if that solves the problem. 

Foundation for Emails use to have a guide with column sizes and the pixel counts so you would know the propper image size to use as to not break the column width however Foundation For Emails 2 doesn't have that info in the DOC. 

Let me know if this helps guys. 

Tom Gates over 3 years ago

I wondered whether that may be the case, thanks!

Brandon L Shinholser over 3 years ago

Corey,

If I replace the image with a couple of letters, it still breaks the same way unfortunately.

The first image is a shot of how it looks upon breaking -- the second is the way it's suppose to look.

 

This is what happens in Gmail App - Android, no matter what

This is much closer to what I

Corey Schaaf over 3 years ago

Post your Inky Markup ... don't worry about trying to remove the classes, I just want to see the markup.  

Brandon L Shinholser over 3 years ago

Thanks so much for your help Corey -- much appreciated.

As far as the classes go, there's a good bit of unused classes. However, even removing them all doesn't fix the issue.

 

---
subject: Daily Sales Email
---
<wrapper class="header">
  <row>
    <columns large="12 email-border">
    </columns>
  </row>
</wrapper>

<spacer size="25"></spacer>

<wrapper class="header">
  <container>
    <row class="quick-links">
      <columns large="5" class="logo">
        logo
      </columns>
      <columns large="3" class="large-offset-2 pr0 add-your-sale pt13">
        <p><a href="#"><img src="icon-plus.png" width="11" height="11">Add Your Sale</a></p>
      </columns>
      <columns large="3" class="pr0 list-your-company pt13">
        <p><a href="#"><img src="icon-plus.png" width="11" height="11">List Your Company</a></p>
      </columns>
    </row>
  </container>
</wrapper>

<spacer size="25"></spacer>

<container>
  <row>
    <columns large="12">
      <img src="ad_top.png" width="728" height="188">
      <spacer size="10"></spacer>
    </columns>
  </row>
</container>

<container>
  <row>
    <columns large="9">
      <row>
        <columns large="12" class="border">
          <spacer size="20"></spacer>
          <h5 class="mb20">List of Sales</h5>
          <row class="sale">
            <columns large="4" class="pl0 pr0">
              image
            </columns>
            <columns large="8" class="pr0 pl0">
              <h6 class="sale-title mb0"><a href="#">This is a title right here!</a></h6>
              <p class="sale-type pt0">The type of sale</p>
              <p class="sale-desc">Florida Estate Sale Online Auction Only! Jewelry, coins, currency, collectibles, furniture, antiques, glassware, hobby. Everything must be...</p>
              <p class="sale-location"><img src="icon-location.png" width="12" height="16"> Boise, ID 83706</p>
              <callout class="sale-duration-wrapper">
                <p class="sale-duration mb0">Started Fri. Nov 6, 2015, Ends Tue. Nov 10, 2015</p>
              </callout>
            </columns>
          </row>
          <row class="sale">
            <columns large="4" class="pl0 pr0">
              image
            </columns>
            <columns large="8" class="pr0 pl0">
              <h6 class="sale-title mb0"><a href="#">This is a title right here!</a></h6>
              <p class="sale-type pt0">The type of sale</p>
              <p class="sale-desc">Florida Estate Sale Online Auction Only! Jewelry, coins, currency, collectibles, furniture, antiques, glassware, hobby. Everything must be...</p>
              <p class="sale-location"><img src="icon-location.png" width="12" height="16"> Boise, ID 83706</p>
              <callout class="sale-duration-wrapper">
                <p class="sale-duration mb0">Started Fri. Nov 6, 2015, Ends Tue. Nov 10, 2015</p>
              </callout>
            </columns>
          </row>

          <h5 class="mb20">National Sales</h5>
          <row class="sale">
            <columns large="4" class="pl0 pr0">
              image
            </columns>
            <columns large="8" class="pr0 pl0">
              <h6 class="sale-title mb0"><a href="#">This is a title right here!</a></h6>
              <p class="sale-type pt0">The type of sale</p>
              <p class="sale-desc">Florida Estate Sale Online Auction Only! Jewelry, coins, currency, collectibles, furniture, antiques, glassware, hobby. Everything must be...</p>
              <p class="sale-location"><img src="icon-location.png" width="12" height="16"> Boise, ID 83706</p>
              <callout class="sale-duration-wrapper">
                <p class="sale-duration mb0">Started Fri. Nov 6, 2015, Ends Tue. Nov 10, 2015</p>
              </callout>
            </columns>
          </row>
          <row class="sale">
            <columns large="4" class="pl0 pr0">
              image
            </columns>
            <columns large="8" class="pr0 pl0">
              <h6 class="sale-title mb0"><a href="#">This is a title right here!</a></h6>
              <p class="sale-type pt0">The type of sale</p>
              <p class="sale-desc">Florida Estate Sale Online Auction Only! Jewelry, coins, currency, collectibles, furniture, antiques, glassware, hobby. Everything must be...</p>
              <p class="sale-location"><img src="icon-location.png" width="12" height="16"> Boise, ID 83706</p>
              <callout class="sale-duration-wrapper">
                <p class="sale-duration mb0">Started Fri. Nov 6, 2015, Ends Tue. Nov 10, 2015</p>
              </callout>
            </columns>
          </row>
        </columns>
      </row>

    </columns>

    <columns large="3" class="pl0">
      <row>
        <columns large="12" class="pr0">

          <row class="email-settings">
            <columns large="12" class="pb0 pl0 pr0">
              <callout class="email-settings-wrapper">
                <p class="opt-less-emails">
                  <strong>Want less emails?</strong><br>
                  <a href="#">Click here to manage your subscription</a>
                </p>
                <spacer size="10"></spacer>
                <p class="opt-unsubscribe">
                  <strong>Unsubscribe.</strong><br>
                  <a href="#">Click here to safely unsubscribe</a>
                </p>
              </callout>
            </columns>
          </row>

          <row class="sidebar-ads">
            <columns large="12" class="pl0 pr0">
              <img src="ad_side_1.jpg" width="160" height="600">
              <br>
              <img src="ad_side_2.png" width="160" height="600">
            </columns>
          </row>

        </columns>
      </row>
    </columns>

  </row>
</container>

Corey Schaaf over 3 years ago

 

I just created some really simply markup to do what you're trying to do and it does work. However I think I may have spotted something that could be causing you issues. Scroll past my code to see what I'm talking about. 

<container>  

  <!-- Hero Image -->
  <row>
    <columns small="12" large="12" >      
        <a href="test.html" target="_blank">
          <img src="http://placehold.it/580x200" alt="Hero Graphic">
        </a>      
    </columns>
  </row>
  <!-- / Hero Image -->

  <row>
    <columns small="12" large="9">
      <!-- if you add a class to the wrapper you should be able to add your background color and border -->
      <wrapper>
        <row>
          <columns>
            <h5>List of Sales</h5>
          </columns>
        </row>
        <row>
          <columns small="12" large="3">
            <img src="http://placehold.it/150x150" class="center-float">
          </columns>
          <columns small="12" large="9">
            <h5>This is a title here</h5>
            <p>The type of sale</p>
            <p>More copy to go here. Lipsum copy to go here. Lipsum copy to go here.</p>
            <p>Boise, ID 83706</p>
            <button href="http://placehold.it" class="extend">Started Fr. Nov 5, 2015 Ends Tues Nov 10, 2015</button>
          </columns>
        </row>
        <row>
          <columns small="12" large="3">
            <img src="http://placehold.it/150x150" class="center-float">
          </columns>
          <columns small="12" large="9">
            <h5>This is a title here</h5>
            <p>The type of sale</p>
            <p>More copy to go here. Lipsum copy to go here. Lipsum copy to go here.</p>
            <p>Boise, ID 83706</p>
            <button href="http://placehold.it" class="extend">Started Fr. Nov 5, 2015 Ends Tues Nov 10, 2015</button>
          </columns>
        </row>
        <row>
          <columns>
            <h5>National Sales</h5>
          </columns>
        </row>
        <row>
          <columns small="12" large="3">
            <img src="http://placehold.it/150x150" class="center-float">
          </columns>
          <columns small="12" large="9">
            <h5>This is a title here</h5>
            <p>The type of sale</p>
            <p>More copy to go here. Lipsum copy to go here. Lipsum copy to go here.</p>
            <p>Boise, ID 83706</p>
            <button href="http://placehold.it" class="extend">Started Fr. Nov 5, 2015 Ends Tues Nov 10, 2015</button>
          </columns>
        </row>
      <wrapper>
    </columns>
    <columns small="12" large="3" class="show-for-large">
      <wrapper>
        <row>
          <columns>
            <a href="">
              <img src="http://placehold.it/200x200?text=Want+Less+Email">
            </a>
          </columns>
        </row>
      </wrapper>
      <row>
        <columns>
          <a href="">
            <img src="http://placehold.it/200x600?text=Want+Less+Email">
          </a>
        </columns>
      </row>

      <row>
        <columns>
          <a href="">
            <img src="http://placehold.it/200x600?text=Want+Less+Email">
          </a>
        </columns>
      </row>


    </columns>
  </row>

</container>

 

In the code you posted (see below) you'll notice that your columns for large, don't add up to 12. They actually add up to over 13 when you include the offset. As a test, change your large-offset-2 to large-offset-1.  That could be what is wrecking your layout. 

<row class="quick-links">
      <columns large="5" class="logo">
        logo
      </columns>
      <columns large="3" class="large-offset-2 pr0 add-your-sale pt13">
        <p><a href="#"><img src="icon-plus.png" width="11" height="11">Add Your Sale</a></p>
      </columns>
      <columns large="3" class="pr0 list-your-company pt13">
        <p><a href="#"><img src="icon-plus.png" width="11" height="11">List Your Company</a></p>
      </columns>
    </row>

Also, based on your screenshot I think you're using Gmail in your small example. Gmail does not recognize media queries and will show the large version of your site. Gmail also doesn't support the hide-for-large (again, media query based). Not sure if you were adding any classes to show or hide things based on media queries. 

Let me know if my code or the fix I suggested works. 

 

 

Brandon L Shinholser over 3 years ago

Thanks, Corey. I'm about to test your layout.

The screenshot above where the layout breaks horribly, is happening only in Android. I actually have removed the media queries altogether as it's supposed to be nonresponsive email.

Corey Schaaf over 3 years ago

Brandon, 

This is a result of the code I created via EmailOnAcid.com.  

https://www.emailonacid.com/app/acidtest/display/summary/ekwLY7YNWqev2LGrnPxcmCk0ShSY5gufbH2qz3N11Lh2J/shared

Brandon L Shinholser over 3 years ago

Nice! Thanks for sending the Litmus screenshots over.

I'll use your example to revise my layout and give it another shot. I really appreciate your help!

Brandon L Shinholser over 3 years ago

Random, I noticed .wrapper only has one style (width: 100%;) and .wrapper-inner has no styles in my project.

Is that correct? Using <wrapper> creates the structure in the HTML, but I figured there would be more styles.

Brandon L Shinholser over 3 years ago

I spoke too soon Corey.

I'm a bit confused now hehe...

I pasted the exact same code you posted, ran it through litmus, and here's the result below.

I even created a new foundation emails project with the default styles, added your code, tested in litmus, and got the same result.

 

Brandon L Shinholser over 3 years ago

Here's your code, with my only edits being made to the large="" and small="" (to make the layout remain in desktop view) and removing the "show-for-large" tag. I also fixed one of the closing <wrappers> from your initial post.

As you see above, in Android, the large layout still breaks and the sidebar falls below the left column.

---
subject: My Email Subject
---
<container>

  <!-- Hero Image -->
  <row>
    <columns small="12" large="12" >
        <a href="test.html" target="_blank">
          <img src="http://placehold.it/580x200" alt="Hero Graphic">
        </a>
    </columns>
  </row>
  <!-- / Hero Image -->

  <row>
    <columns small="9" large="9">
      <!-- if you add a class to the wrapper you should be able to add your background color and border -->
      <wrapper>
        <row>
          <columns>
            <h5>List of Sales</h5>
          </columns>
        </row>
        <row>
          <columns small="3" large="3">
            <img src="http://placehold.it/150x150" class="center-float">
          </columns>
          <columns small="9" large="9">
            <h5>This is a title here</h5>
            <p>The type of sale</p>
            <p>More copy to go here. Lipsum copy to go here. Lipsum copy to go here.</p>
            <p>Boise, ID 83706</p>
            <button href="http://placehold.it" class="extend">Started Fr. Nov 5, 2015 Ends Tues Nov 10, 2015</button>
          </columns>
        </row>
        <row>
          <columns small="3" large="3">
            <img src="http://placehold.it/150x150" class="center-float">
          </columns>
          <columns small="9" large="9">
            <h5>This is a title here</h5>
            <p>The type of sale</p>
            <p>More copy to go here. Lipsum copy to go here. Lipsum copy to go here.</p>
            <p>Boise, ID 83706</p>
            <button href="http://placehold.it" class="extend">Started Fr. Nov 5, 2015 Ends Tues Nov 10, 2015</button>
          </columns>
        </row>
        <row>
          <columns>
            <h5>National Sales</h5>
          </columns>
        </row>
        <row>
          <columns small="3" large="3">
            <img src="http://placehold.it/150x150" class="center-float">
          </columns>
          <columns small="9" large="9">
            <h5>This is a title here</h5>
            <p>The type of sale</p>
            <p>More copy to go here. Lipsum copy to go here. Lipsum copy to go here.</p>
            <p>Boise, ID 83706</p>
            <button href="http://placehold.it" class="extend">Started Fr. Nov 5, 2015 Ends Tues Nov 10, 2015</button>
          </columns>
        </row>
      </wrapper>
    </columns>
    <columns small="3" large="3">
      <wrapper>
        <row>
          <columns>
            <a href="">
              <img src="http://placehold.it/200x200?text=Want+Less+Email">
            </a>
          </columns>
        </row>
      </wrapper>
      <row>
        <columns>
          <a href="">
            <img src="http://placehold.it/200x600?text=Want+Less+Email">
          </a>
        </columns>
      </row>

      <row>
        <columns>
          <a href="">
            <img src="http://placehold.it/200x600?text=Want+Less+Email">
          </a>
        </columns>
      </row>


    </columns>
  </row>

</container>

Rafi Benkual over 3 years ago

 The <wrapper> uses width: 100%; to ensure it created fluid with backgrounds. The .wrapper-inner class is there if you need to add padding to the wrapper.

You might use it like:

.wrapper-inner {
  padding: 30px 0 30px 0;
}

Rafi Benkual over 3 years ago

Not sure where it's going wrong for you - tested your code here and looks good: https://litmus.com/checklist/emails/public/0f2c7ed

You will probably want to change your outer columns from small-9 and small-3 to small-12 though or the sidebar is too small to see on the small breakpoint.

Brandon L Shinholser over 3 years ago

Rafi,

Rafi, The same thing is happening -- click the link you posted from Litmus, scroll to Detail view for Gmail App (Android) and you'll see the same thing occur -- the sidebar is tossed below the left-side. This is the problem I'm having, only occurring in Gmail Android.

 

Corey Schaaf over 3 years ago

Rafi, I think he's saying that the grid should maintain it's form because he wants the layout to be the same for small devices as he does for large. And it appears his markup is pushing the right column down on Android Gmail. I checked your litmus screenshots and it is indeed pushing down to the next line. I thought it might have to do with the image being to large to exist inside the container initially? 

Rafi Benkual over 3 years ago

Also, make sure to hit the helpful button when you get answers :)