How to make a grid that repeat horizontally according to contents

See more:

grid

HI dears !
i have make a page to display services in grid box way. i am populating data by using inline coding and i made a list <> for filling the respective databounds. following is my code for populating the gridbox. the problem is that this displays on the left of the page and in a single column .my requirement is that it should displays as three columns in a row.or any pattern that looking good.
your response will be appreciated.

What I have tried:

%foreach (var product in product_list)
                                    {%>
                            <div class="blocks">
                                <div class="grid_3 alpha" style="left: 0px; top: 0px; width: 289px;">
                                    <img src="<%=product.img %>" alt="" class="img_inner">
                                    <div class="text1"><a href="OrderBook.aspx"><%=product.name%></a></div>
                                    <div class="center">
                                   <asp:Label runat="server" Text="Price" Font-Bold="True"></asp:Label> <%=product.price %>
                                    <br />
                                   <a href="_Services.aspx?pro_id=<%=product.id %>&action=add"  class="l1" onclick="book_click">BOOK NOW </a>
                                        <br />
                                        <asp:Label ID="Label1" runat="server"></asp:Label>
                                        <br />
                                        <asp:Button ID="Button1" runat="server" BackColor="Fuchsia" BorderColor="Black" BorderStyle="Inset" PostBackUrl="~/datalist.aspx" Text="Check Cart" OnClick="Button1_Click" />
                                    </div>
                                </div>