Showing Images in gridview as block items

Question

I want to show items in my gridview as a 5 across and a 5 down display - i already have the query pulling only 25 records per a page but cant seem to make the gridview do what i want - any suggestions?

example------------------------------

record 1 : record 2 : record 3 : record 4 : record 5

---

record 6 : record 7 : record 8 : record 9 : record 10

---

etc ...........................................

Answer 1

My suggestion would be to switch to a ListView instead of a GridView. ListView is new in .Net 3.5, and has worked wonders for me for exactly the scenario you are talking about. Scott Guthrie has a good example of it on his blog.

Here's an example for a 3x4 grid of pictures from my personal website...

<ul id="thumbnails">
    <asp:ListView runat="server" ID="PicturesListView" ItemPlaceholderID="PicturesListItemPlaceholder"
        DataSourceID="PicturesDataSource">
        <LayoutTemplate>
            <li runat="server" id="PicturesListItemPlaceholder"></li>
        </LayoutTemplate>
        <ItemTemplate>
            <li>
                <a href='Photos/<%# Eval("WebImageId") %>.jpg' class="thickbox" rel="gallery-test"
                    title='<%# Eval("Caption") %>'>
                    <img src="Photos/<%# Eval("ThumbnailId") %>.jpg" alt='<%# Eval("Caption") %>' />
                </a></li>
        </ItemTemplate>
    </asp:ListView>
</ul>

and my CSS to line things up is...

/* Picture Thumbnails */
#thumbnails ul
{
    width: 800px;
    list-style: none;
}
#thumbnails li
{
    text-align: center;
    display: inline;
    width: 200px;
    height: 130px;
    float: left;
    margin-bottom: 20px;
}