Format email design using ASP.NET code behind

See more:

C#3.5

Gridview

CSS3

Hello,

I am developing an application and one of its module contains around 8 gridviews in a page.
I have designed them according to my needs in web page.
But there is another functionality in there that on the button click automatic email will be generated.
Currently, i am getting 8 gridviews generated but each line contains 1 gridview. I want to format it in a way that each line should contain 2 gridviews.
Now i want to format the Email as well but the css is not working on it. I even tried to attach the css file from code behind but to no luck.
I have around 8 gridviews and what i want is to display the gridviews in pair of 2 in each line and also want to set the width and height.
Currently, at the code behind i am using the following code.

string css = "<style>" + System.IO.File.ReadAllText(Server.MapPath("~/Styles/summary.css")) + "</style>";
            string Grid1= GetGridviewData(Grid1);
            string Grid2 = GetGridviewData(Grid2);
            string Grid3 = GetGridviewData(Grid3);
            string Grid4= GetGridviewData(Grid4);
            string Grid5= GetGridviewData(Grid5);
            string Grid6 =  GetGridviewData(Grid6);
            string Grid7 = GetGridviewData(Grid7);
            string Grid8 = GetGridviewData(Grid8);
            string concat = css + "<div class=\"col col-1\" >" + "<h4>" + "Grid1" + "</h4>" + Grid1 + "</div>" +
                 "<div class=\"col col-2\">" + "<h4>" + "Grid2" + "</h4>" + Grid2+ "</div>" +
                  "<div class=\"col col-3\">" + "<h4>" + "Grid3" + "</h4>" + Grid3 + "</div>" +
                  "<div class=\"col col-4\">" + "<h4>" + "Grid4" + "</h4>" + Grid4+ "</div>" +
                    "<div class=\"col col-7\">" + "<h4>" + "Grid5" + "</h4>" + Grid5+ "</div>" +
                     "<div class=\"col col-6\">" + "<h4>" + "Grid6" + "</h4>" + Grid6+ "</div>" +
                      "<div class=\"col col-5\">" + "<h4>" + "Grid7" + "</h4>" + Grid7+ "</div>" +
                      "<div class=\"col col-8\">" + "<h4>" + "Grid8" + "</h4>" + Grid8+ "</div>" ;

I am using the following CssFile (Summary.CSS)

#divBody,#menu
       {
           overflow: initial !important;
        height: auto !important;
       }

.tr-footer td{background-color: #00BFFF}

.col table{width:100% !important;}

.col-1{vertical-alignment:top;display:inline-block;width:49%}
.col-2{margin-left:15px;vertical-alignment:top;display:inline-block;width:49%}

.col-3{vertical-alignment:top;display:inline-block;width:49%}
.col-4{margin-left:15px;vertical-alignment:top;display:inline-block;width:49%}
.col-5{vertical-alignment:top;display:inline-block;width:49%}

.col-6{margin-left:15px;vertical-alignment:top;display:inline-block;width:49%}
.col-7{vertical-alignment:top;display:inline-block;width:49%}
.col-8{margin-left:15px;vertical-alignment:top;display:inline-block;width:49%}

What I have tried:

I have tried many things, attached the css file from backend and others as well but no luck