get_pages – Display child then grandchild pages

I have a page structure like this.

    Portfolio
    - Residential
    - - Resident 1
    - - Resident 2
    - - Resident 3
    - Commercial
    - - Commercial 1
    - - Commercial 2
    - - Commercial 3

The grandchild pages Resident 1 – Commercial 3 have post thumbnails

I have a template for the Portfolio page where i would like to display the ‘Residential’ and ‘Commerical’ pages with their child pages like so.

    <div class="grid">
      <h2>Residential</h2>
      <ul>
        <li>  Resident 1 post_thumbnail </li>
        <li>  Resident 2 post_thumbnail </li>
        <li>  Resident 3 post_thumbnail </li>
      </ul>
    </div>
    <div class="grid">
      <h2>Commercial</h2>
      <ul>
        <li>  Commercial 1 post_thumbnail </li>
        <li>  Commercial 2 post_thumbnail </li>
        <li>  Commercial 3 post_thumbnail </li>
      </ul>
    </div>

I’m using get_pages and I have the div’s created for ‘Residential’ and ‘Commercial’

    <?php

        $portfolio_sections = array(
            'post_type'     => 'page',
            'child_of'      => $post->ID,
            'sort_column' => 'menu_order',
            'sort_order'    => 'ASC',
            'parent'            => $post->ID
        );

        $sections = get_pages($portfolio_sections);

        foreach($sections as $section){

        ?>

        <div class="grid">
            <h2><?php echo $section->post_title; ?></h2>

              //Create Child pages

        </div><!--.grid-->

        <?php   
        }
    ?>

My problem is creating the child pages in the ‘ul’ list

I tried using a second foreach loop but this didn’t work and I don’t know if this is the correct way

    <?php

        $portfolio_sections = array(
            'post_type'     => 'page',
            'child_of'      => $post->ID,
            'sort_column' => 'menu_order',
            'sort_order'    => 'ASC',
            'parent'            => $post->ID
        );

        $sections = get_pages($portfolio_sections);

        foreach($sections as $section){

        ?>

        <div class="grid">
            <h2><?php echo $section->post_title; ?></h2>
            <ul class="imageGrid">
                <?php
                    $portfolio_pages = array(
                        'post_type'     => 'page',
                        'child_of'      => $section->ID,
                        'sort_column' => 'menu_order',
                        'sort_order'    => 'ASC',
                        'parent'            => $section->ID
                    );

                    $pages = get_pages($portfolio_pages);

                    foreach($pages as $page){
                        ?>
                            <li><a href="<?php echo get_the_permalink($page->ID);?>"><?php echo get_the_post_thumbnail($page->ID, "thumbnail"); ?><span><?php echo get_the_title($page->ID);?></span></a></li>
                        <?php
                    }
                ?>
            </ul>
        </div><!--.grid-->

        <?php   
        }
    ?>

— UPDATE —-

The structure I wanted. A div around each ul list

    <div class="grid">
      <h2>Residential</h2>
      <ul>
        <li>  Resident 1 post_thumbnail </li>
        <li>  Resident 2 post_thumbnail </li>
        <li>  Resident 3 post_thumbnail </li>
      </ul>
    </div>
    <div class="grid">
      <h2>Commercial</h2>
      <ul>
        <li>  Commercial 1 post_thumbnail </li>
        <li>  Commercial 2 post_thumbnail </li>
        <li>  Commercial 3 post_thumbnail </li>
      </ul>
    </div>

The structure from the code is one surrounding div.

    <div class="grid">
      <h2>Residential</h2>
      <ul>
        <li>  Resident 1 post_thumbnail </li>
        <li>  Resident 2 post_thumbnail </li>
        <li>  Resident 3 post_thumbnail </li>
      </ul>
      <h2>Commercial</h2>
      <ul>
        <li>  Commercial 1 post_thumbnail </li>
        <li>  Commercial 2 post_thumbnail </li>
        <li>  Commercial 3 post_thumbnail </li>
      </ul>
    </div>