It's displaying like this :

I tried to change your code back and forth , but idk .. thx anyways.

how about this, then :

@foreach(var row in groups.InGroupsOf(2))
{  
    <div class="submenu-row">
    @foreach(var item in row)
    {
        <div class="submenu-column">
        <p>@category.Key</p>
        @foreach(var subitem in row)
        {
            <a href="@subitem.Value("contentLink")" title="@subitem.Value("title")">@subitem.Name</a>
        }
        </div>
    }            
    </div>
}

you probably forgot to put category smw , look :

can't check the code, when I don't have your solution setup ;)

@foreach(var row in groups.InGroupsOf(2))
{  
    <div class="submenu-row">
    @foreach(var item in row)
    {
        <div class="submenu-column">
        <p>@item.Key</p>
        @foreach(var subitem in item)
        {
            <a href="@subitem.Value("contentLink")" title="@subitem.Value("title")">@subitem.Name</a>
        }
        </div>
    }            
    </div>
}

Something like that?

so far so good

how about to wrap "view all" item ( item without category ) in a separate row , so it should be wrapped in a

something like...

@{
    var categories = item.Children
        .GroupBy(i => i.Value<string>("category"))
        .Select(x => new {
            Category = x.Key,
            Links = x.Select(y => new {
                Link = y.Value<string>("contentLink"),
                Title = y.Value<string>("title"),
                Name = y.Name,
            }).ToArray(),
        }).ToList();

    categories.Insert(0,
        new{
            Category = string.Empty,
            Links = new[]{
                new {
                    Link = "some/where",
                    Title = string.Empty,
                    Name = "View All"
                }
            }
        });


    foreach(var row in categories.InGroupsOf(2))
    {  
        <div class="submenu-row">
        @foreach(var item in row)
        {
            <div class="submenu-column">
            @if(!string.IsNullOrWhiteSpace(item.Category)){
                <p>@item.Category</p>
            }
            @foreach(var link in item.Links)
            {
                <a href="@link.Link" title="@link.Title">@link.Name</a>
            }
            </div>
        }            
        </div>
    }
}

okay , smth wrong with key , take a look :

but i just deleted this line ahhahah to see how it will be without category names

dope af , if we can fix repeating item "view all" and rendering categories

well, I think you should be able to get it working with the bits I've given.

I can't see why you get the "View all" two times -- it's only in the list once.

it's because i actually have a page in my content named "view all"

but even when i deleted it

cuz the row div isn't close afted view all rendered

final result , if let's go ultra last one w/ rendering it in a separe row

we need pretty much just to start rendering in pairs if it's not "view all" item , simply saying to make render it just a bit differently. hope u understand me ;)

Couldn't have done it without you, understood the idea, goddamn code don't wanna work though.

is you casing correct? Item <> item

ohh, i know it, i just changed item to Item, cuz i already using name item in my code

anyways, it's throwing an error