Responsive Grid Design Example Using Css in Asp.Net MVC,HTML

This article will show you how you can design responsive grid design example using css in asp.Net MVC,HTML. In this grid style will change as per resolution. This we can use in MVC2, MVC3, MVC4, MVC5.

Some of my previous articles area as follows: Stylish RadioButton, DropdownList, ListBox and TextBox Control In Asp.Net Using Css, Dynamic Css Menu Creation Up to Three Level in Asp.Net Using C#.Net, Dynamic Css Menu Creation in Asp.Net Using C#.Net, Login Form With LightbBox Effect in Asp.Net, Highlight GridView Row on Mouseover Using CSS in Asp.Net C#.Net.

So for this article first we will create a new asp.net mvc application and add the below code in your view.

@{     ViewBag.Title = "Responsive Grid Design Example Using Css in Asp.Net MVC,HTML"; } <style>     div     {         text-align: center;         float: left;         width: 90px;         height: 90px;     } </style> @using (Html.BeginForm("Index", "Home")) {     <div id="divfood" style="width: 100%">         <div>             <img src="../../Images/bananas-icon.png" />         </div>         <div>             <img src="../../Images/beer-icon (1).png" />         </div>         <div>             <img src="../../Images/Coffee-Cup-icon.png" />         </div>         <div>             <img src="../../Images/Piece-of-cake-icon.png" />         </div>         <div>             <img src="../../Images/Steak-icon.png" />         </div>         <div>             <img src="../../Images/strawberry-icon.png" />         </div>     </div> }

In above code have a look of the below mention style sheet.

div     {         text-align: center;         float: left;         width: 90px;         height: 90px;     }

In this I have assigned the float left, width and height of all the div controls. Have a look of the output.