In custom view of block grid item in backoffice, we can access

colSpan

and

rowSpan

. Furthermore we can style based on parent context by setting and attribute or class on layout block and update CSS variables as mentioned here. https://umbraco.com/blog/deep-dive-block-grid-editor-part-3/ However if I have two columns - left area which span 6 columns and right area which span 6 columns, is there any way to know area context inside the block? I would like to align content in block when in left area and "flip" the block content when placed in right area.

Could you do it with a combo of first-child/last-child selectors? Something like this:

css
[data-col-span="6"]:has(+[data-col-span="6"]):first-child { /* left column */ }
[data-col-span="6"]+[data-col-span="6"]:last-child { /* right column */ }

(I have no idea how the markup looks, so your mileage may of course vary...)

I could set this in

blockgridlayout.css

used in Block Grid datatype instance.

/* Left column */
.umb-block-grid__area[slot="left"] {
    --umb-block-grid--areas-context-left: 0;
    --umb-block-grid--areas-context-right: auto;
}

/* Right column */
.umb-block-grid__area[slot="right"] {
    --umb-block-grid--areas-context-left: auto;
    --umb-block-grid--areas-context-right: 0;
}

Then for styling of the specific block I have this:

margin-left: var(--umb-block-grid--areas-context-left, auto);
margin-right: var(--umb-block-grid--areas-context-right, auto);

However I think it mainly need to use the values directly. It would be great a block also knew about the area name (it does know the column span and row span from area).

Please take a look at Umbootstrap where I have used various techniques to achieve your aims, I should add, with some help from @User : https://umbootstrap.com/

with a couple of alterations you can pass the areaAlias down to the item via the ViewDataDictionary override on partialAsync. in

area.cshtml

@* @await Html.GetBlockGridItemsHtmlAsync(Model) *@

@await Html.PartialAsync($"{BlockGridTemplateExtensions.DefaultFolder}{BlockGridTemplateExtensions.DefaultItemsTemplate}", Model, new ViewDataDictionary(ViewData) { { "area", Model.Alias }})

replacing the helper extension method.. the helper method is only really adding the default partial name... https://github.com/umbraco/Umbraco-CMS/blob/contrib/src/Umbraco.Web.Common/Extensions/BlockGridTemplateExtensions.cs#L107-L108 then in

items.cshtml

pass the VDD on again

@await Html.PartialAsync(partialViewName, item, ViewData)

now in your blockgrid component renderer you can access

ViewData["area"]

giving you the area alias in the component.

It's a headless project using Delivery API 🙂 We only use the backend to hold data, so we haven't any razor views for the blocks. The frontend is separated using Nuxt3 and PrimeVue.

Ok, so you are calling the deliveryapi and getting json like below.. and the area alias is on the json parent? I don't know these new fangled front end headless tech.. but can't you just traverse the json to get the parent? https://cdn.discordapp.com/attachments/1244898847080185896/1245412988337393794/image.png?ex=6658a8bb&is=6657573b&hm=c212d9028efc900c2f1941a2b2e513d55bffa9c521847247a5ae291bbe3abb71&