Форматирование дизайна электронной почты с использованием ASP.NET код позади

---

Привет,

Я разрабатываю приложение, и один из его модулей содержит около 8 просмотров сетки на странице.
Я разработал их в соответствии с моими потребностями на веб-странице.
Но там есть еще одна функция, которая при нажатии кнопки автоматически генерирует электронную почту.
В настоящее время я получаю 8 сгенерированных GridView, но каждая строка содержит 1 gridview. Я хочу отформатировать его таким образом, чтобы каждая строка содержала 2 вида сетки.
Теперь я тоже хочу отформатировать электронную почту, но css на ней не работает. Я даже попытался прикрепить css-файл из кода позади, но безуспешно.
У меня есть около 8 gridviews, и то, что я хочу, это отобразить gridviews в паре по 2 в каждой строке, а также установить ширину и высоту.
В настоящее время в коде позади я использую следующий код.

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>" ;

Я использую следующий 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%}

Что я уже пробовал:

Я перепробовал много вещей, прикрепил css-файл из бэкенда и другие, но безуспешно

---