title: Customizing GridView layout in asp.net
body: <p>I am currently working on displaying a game library on an asp.net website. I have stored the game info (such as name, cover image etc) in a database, and I want to retrieve the games from the database and display it on my site. Right now, I am using GridView to get the data. It gets the values <code>uname</code> (the name of the videogame) and <code>uimg</code> (cover image for the game) from my table, and displays it like this:</p>
  
  <p><img src="https://i.stack.imgur.com/JGB4Z.png" alt="enter image description here"></p>
  
  <p>However, I would like to edit the layout so that it looks something like this:</p>
  
  <p><img src="https://i.stack.imgur.com/6HsX8.png" alt="enter image description here"></p>
  
  <p>So as you can see, where the <code>uname</code> is displayed right below <code>uimg</code>, and with something like 3 games on each row. </p>
  
  <p>The code (just using the standard GridView in Visual Studio) looks like this so far. Default.aspx:</p>
  
  <pre><code> &lt;asp:GridView ID="GridView1" runat="server" CellPadding="1" ForeColor="#333333" GridLines="None" AutoGenerateColumns="false"&gt;
          &lt;AlternatingRowStyle BackColor="White" /&gt;
          &lt;EditRowStyle BackColor="#7C6F57" /&gt;
          &lt;FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /&gt;
          &lt;HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" /&gt;
          &lt;PagerStyle BackColor="#666666" ForeColor="White" HorizontalAlign="Center" /&gt;
          &lt;RowStyle BackColor="#E3EAEB" /&gt;
          &lt;SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" /&gt;
          &lt;SortedAscendingCellStyle BackColor="#F8FAFA" /&gt;
          &lt;SortedAscendingHeaderStyle BackColor="#246B61" /&gt;
          &lt;SortedDescendingCellStyle BackColor="#D4DFE1" /&gt;
          &lt;SortedDescendingHeaderStyle BackColor="#15524A" /&gt;
          &lt;Columns&gt;
              &lt;asp:TemplateField HeaderText="Name"&gt;
                  &lt;ItemTemplate&gt;
                      &lt;asp:HyperLink ID="lbl1" runat="server" NavigateUrl='&lt;%#Eval("unavurl") %&gt;' Text='&lt;%#Eval("uname") %&gt;' /&gt;
                  &lt;/ItemTemplate&gt;
              &lt;/asp:TemplateField&gt;
              &lt;asp:TemplateField HeaderText="Image"&gt;
                  &lt;ItemTemplate&gt;
                      &lt;asp:HyperLink ID="img" runat="server" ImageUrl='&lt;%#Eval("uimg") %&gt;'  NavigateUrl='&lt;%#Eval("unavurl") %&gt;' ImageHeight="159" ImageWidth="128" /&gt;
                  &lt;/ItemTemplate&gt;
              &lt;/asp:TemplateField&gt;
          &lt;/Columns&gt;
      &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>Also, just to add it, here's the C# code:</p>
  
  <pre><code> SqlDataAdapter da = new SqlDataAdapter("select uname,uimg,unavurl from games", con);
      DataTable dt = new DataTable();
      da.Fill(dt);
      GridView1.DataSource = dt;
      DataBind();
  </code></pre>
  
  <p>So, does anyone know how I can achieve this? Can this be done with Gridview, or should I be looking at something different? Thanks!</p>