title: How to render 1 row and 2 column in html?
body: <p>I want to render 1 row and 2 columns within a row, </p>
  
  <pre><code>card 1   card 2    //1st Row
  
  card 3   card 4    //2nd Row
  
  card 5   card 6    //3rd Row
  </code></pre>
  
  <p>I tried using this logic <code>((index+1) % 2 == 0 )</code> but it seems not to be fit in my thought what I want to achieve</p>
  
  <p>Below code I tried to achieve:</p>
  
  <pre><code>return data &amp;&amp; data.map((data, index) =&gt; {
  
        if((index+1) % 2 == 0 ) {
  
          return (
            &lt;Row key={data.id}&gt;
              &lt;Column&gt;
                &lt;Container&gt;
                  &lt;Top imageUrl={data.image}&gt;
                  &lt;/Top&gt;
                  &lt;Bottom&gt;
                      &lt;Left&gt;
                        &lt;Details&gt;
                          &lt;SmallSUbText&gt;{data.name}&lt;/SmallSUbText&gt;
                        &lt;/Details&gt;
                      &lt;/Left&gt;
                    &lt;/Bottom&gt;
                &lt;/Container&gt;
              &lt;/Column&gt;
  
  
              &lt;Column&gt;
                &lt;Container&gt;
                  &lt;Top imageUrl={data.image}&gt;
                  &lt;/Top&gt;
                  &lt;Bottom&gt;
                      &lt;Left&gt;
                        &lt;Details&gt;
                          &lt;SmallSUbText&gt;{data.name}&lt;/SmallSUbText&gt;
                        &lt;/Details&gt;
                      &lt;/Left&gt;
                    &lt;/Bottom&gt;
                &lt;/Container&gt;
              &lt;/Column&gt;
            &lt;/Row&gt;
          ) 
        }
      })
  </code></pre>
  
  <p>But it seems not to be working</p>
  
  <p><strong>ANY HELP WOULD BE APPRECIATED!</strong></p>