How to output a grid field within a relationship?

Question

I was wondering how I output the contents of a grid field from within a relationship. I've got two related entries and everything is showing correctly except the grid (which contains an image and text field).

I have tried a number of variations but haven't been successful yet

{relationship}
...
  {relationship:grid_field}
    {relationship:grid_field:image}
    {relationship:grid_field:text}
  {/relationship:grid_field}
{/relationship}

{relationship}
...
  {relationship:grid_field}
    {grid_field:image}
    {grid_field:text}
  {/relationship:grid_field}
{/relationship}

{relationship}
...
  {relationship:grid_field}
    {relationship:image}
    {relationship:text}
  {/relationship:grid_field}
{/relationship}

{relationship}
...
  {grid_field:relationship}
    {grid_field:relationship:image}
    {grid_field:relationship:text}
  {/grid_field:relationship}
{/relationship}

etc. Does anyone know the correct way to do this? The three dots represent the other content / fields. The way I have been outputting the other fields is as so: {relationship:field_name} and that has been working fine.

Any help would be greatly appreciated, thank you.

edit

  {embed='includes/header'}
  {exp:channel:entries channel="project" status="not Closed"}
  <div class="col-100 content-area">
    <div class="container">
      <div class="row">
        <main class="col-sm-8 col-md-8">
          <h2>{title}</h2>
          <div class="flexslider">
            <ul class="slides">
              {project_image}
              <li data-thumb="{exp:ce_img:single src='{project_image:image}' height='102' width='170' crop='yes' url_only='yes' allow_scale_large='yes'}">
                {exp:ce_img:single src="{project_image:image}" height="330" width="555" crop="yes" attributes='alt="{project_image:alt_tag}"'}
              </li>
              {/project_image}
            </ul>
          </div>
          {project_content}
        </main>
        <aside class="col-sm-4 col-md-offset-1 col-md-3 sidebar">
          <h3>Project Overview</h3>
          <div class="project-overview">
            {if client != ""}<p><strong>Client:</strong> {client}</p>{/if}
            {if project_cost != ""}<p><strong>Project cost:</strong> {project_cost}</p>{/if}
            {if location != ""}<p><strong>Location:</strong> {project_location}</p>{/if}
            {features}
            {if features:feature != ""}
            {if features:count == 1}
            <p><strong>Features:</strong></p>
            <ul class="project-features">
              {/if}
              <li>{features:feature}</li>
              {if features:count == features:total_rows}
            </ul>
            {/if}
            {/if}
            {/features}
            <p><strong>Sectors:</strong> {exp:gwcode_categories entry_id="{entry_id}" group_id="1" style="linear"}<a href="{path='sectors'}/{cat_url_title}">{cat_name}</a>{if cat_count != results}, {/if}{/exp:gwcode_categories}</p>
            <p><strong>Services:</strong> {exp:gwcode_categories entry_id="{entry_id}" group_id="2" style="linear"}<a href="{path='services'}/{cat_url_title}">{cat_name}</a>{if cat_count != results}, {/if}{/exp:gwcode_categories}</p>
          </div>
          {testimonial}
          {if testimonial:quote != ""}
          <blockquote>
            <h3>"{exp:excerpt}{testimonial:quote}{/exp:excerpt}"</h3>
            <p>- {testimonial:quotee}</p>
          </blockquote>
          {/if}
          {/testimonial}
        </aside>
      </div>
    </div>
  </div>

  <div class="col-100 project-col">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <h2>Related Projects</h2><a href="{path='projects'}" class="more-link"> View all</a>
        </div>
      </div>
      <div class="row project-row">
        {projects_related status="not Closed" limit="2"}
        <div class="col-sm-6">
          <div class="row">
            <div class="col-sm-12">
              <h3>{projects_related:title}</h3>
            </div>
          </div>
          <div class="row">
            <div class="col-md-6">
              {projects_related:project_image limit="1"}
              {exp:ce_img:single src="{projects_related:project_image:image}" height="199" width="360" crop="yes" attributes='alt="{projects_related:project_image:alt_tag}"'}
              {/projects_related:project_image}
            </div>
            <div class="col-md-6">
              <p><strong>Location:</strong> {projects_related:project_location}</p>
              <p><strong>Brief details:</strong> {projects_related:project_brief}</p>
              <a href="{path='projects'}/{projects_related:url_title}" class="more-link">Find out more</a>
            </div>
          </div>
        </div>
        {/projects_related}
      </div>
    </div>
  </div>
  {/exp:channel:entries}
  {embed='includes/footer'}

Answer 1

This works in my tests when accessing a child relationship:

{relationship_field}

    <p>Child entry title: {relationship_field:title}</p>

    {relationship_field:grid_field}
        Column 1: {relationship_field:grid_field:grid_column_1} <br>
        Column 2: {relationship_field:grid_field:grid_column_2} <br>
        {!--   etc...   --}
    {/relationship_field:grid_field}

{/relationship_field}

Answer 2

I'm going to throw in my solution here because overall I find it much simpler.

{exp:channel:entries channel="relationship_channel" dynamic="no"}

  {relationship_field}

    {relationship_field:title} // the title of our channel entry which has the grid

    {relationship_field:grid_field} // starts our loop inside of the grid

      {grid_field:grid_field_label} // we don't need to specify that we're in the relationship anymore, just that we're in the grid.

    {/relationship_field:grid_field}

  {/relationship_field}

{/exp:channel:entries}

Hope this is helpful to someone.