To get the Grid to output your own custom HTML, rather than the default Bootstrap structure, you can add a new partial view in the /Views/Partials/Grid folder and then tell your Html.GetGridHtml method to use that view.

e.g. if you create a new view called CustomGrid.cshtml in /Views/Partials/Grid you can call this on your template:

@Html.GetGridHtml(Model, "propertyAlias", "CustomGrid")

and the page will output the Grid content using the razor script in CustomGrid.cshtml instead of the default Bootstrap3.cshtml view.

A good way to get this working is to copy Bootstrap3.cshtml, rename it to your custom name, and change the html tags in the view to be your custom structure, while leaving all the logic in place.

Alternatively you can use a barebones file like this and encapsulate the output structure in your editor views themselves (i.e. without requiring structural HTML in the renderer):

@inherits UmbracoViewPage<dynamic>
@using Umbraco.Web.Templates
@using Newtonsoft.Json.Linq

@if (Model != null && Model.sections != null)
{
    foreach (var section in Model.sections)
    {
        foreach (var row in section.rows)
        {
            @renderRow(row, true)
        }
    }
}

@helper renderRow(dynamic row, bool singleColumn)
{
    foreach (var area in row.areas)
    {
        foreach (var control in area.controls)
        {
            if (control != null && control.editor != null && control.editor.view != null)
            {                
                <text>@Html.Partial("grid/editors/base", (object)control)</text>
            }
        }
    }
}

Using this barebones approach tends to work better if your Grid is configured to only allow single column rows, with the blocks themselves managing any side-by-side or multi-column layouts internally.

I copied bootstrap3.chtml and renamed it materializcss.cshtml

Then added @Html.GetGridHtml(Model, "propertyAlias", "materializecss")
to my master tempalte but got the following error when I added a grid to a page:

Secondly, when I do have it using the custom structure, you've not provided any detail on how to amend the html structure.

I looked at the foundation5 grid for example but it's not apparent how it should change.

For example, I guess I should be changing the html at

<div class="row clearfix">
    @foreach (var s in Model.sections)
    {
        <div class="@[email protected] columns">
            @foreach (var row in s.rows)
            {
                @renderRow(row, baseColSize);
            }
        </div>
    }
</div>

But the format of foundation html is

<div class="row">
  <div class="small-2 large-4 columns">...</div>
  <div class="small-4 large-4 columns">...</div>
  <div class="small-6 large-4 columns">...</div>
</div>

So what maps @baseColSize to 'small' or 'medium' etc?

is working on a reply...