title: How can I use bootstrap grid mapping an array of images?
body: <p>I'm building a portfolio website with gatsby.js. All photos are posted in wordpress, fetched by graphQL and rendered to the website.</p>
  
  <p>I'm trying to use bootstrap grid to organize the photos and make it responsive, but because graphQL return an array with all images fetched from wordpress posts, I can't set a div with class='row' as I'm using array.map. And I don't know how to solve it.</p>
  
  <p>From graphQL i'm setting resolution to width=300px and height=300px. </p>
  
  <p>That's the only way I found to organize sizes, as long as I can't use class row and all images are considered in one row. The problem is that the photo size is not responsive, so it will always be 300X300... </p>
  
  <p>I'd like a way to make it a grid system as it's suppose to work... So when I resize the window, all photos are organized and resized.</p>
  
  <pre><code>
  const IndexPage = () =&gt; {
      const data = useStaticQuery(graphql`
          query {
              allWordpressPost {
                  edges {
                      node {
                          title
                          featured_media {
                              localFile {
                                  childImageSharp {
                                      resolutions(width: 300, height: 300) {
                                          src
                                          width
                                          height
                                      }
                                  }
                              }
                          }
                      }
                  }
              }
          }
      `);
      const imagesResolutions = data.allWordpressPost.edges.map(
          (edge) =&gt; edge.node.featured_media.localFile.childImageSharp.resolutions
      );
      return (
          &lt;Layout&gt;
              &lt;Jumbotron /&gt;
              &lt;div className="container"&gt;
                  &lt;h1 className="my-5 text-center"&gt;Portfolio&lt;/h1&gt;
                  {imagesResolutions.map((imageRes) =&gt; (
                      &lt;Img className="col-sm-6 col-lg-4 img-rounded img" resolutions={imageRes} key={imageRes.src} /&gt;
                  ))}
              &lt;/div&gt;
          &lt;/Layout&gt;
      );
  };
  </code></pre>