styling

src/Umbraco.Web.UI.Client/src/mocks/data/document/document.data.ts

@@ -342,8 +342,12 @@ export const data: Array<UmbMockDocumentModel> = [
 											{
 												contentUdi: 'a1234',
 												settingsUdi: 'a5678',
-												columnSpan: 12,
-												areas: [],
+												columnSpan: 3,
+												rowSpan: 2,
+											},
+											{
+												contentUdi: 'c1234',
+												columnSpan: 3,
 											},
 										],
 									},
@@ -378,6 +382,11 @@ export const data: Array<UmbMockDocumentModel> = [
 							contentTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c',
 							elementProperty: 'Hello world from area 2',
 						},
+						{
+							udi: 'c1234',
+							contentTypeKey: '4f68ba66-6fb2-4778-83b8-6ab4ca3a7c5c',
+							elementProperty: 'Hello CCC from area 1',
+						},
 					],
 					settingsData: [
 						{

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/ref-grid-block/ref-grid-block.element.ts

@@ -19,6 +19,7 @@ export class UmbRefGridBlockElement extends UUIRefNodeElement {
 		css`
 			:host {
 				min-width: 20px; // Set to something, to overwrite UUI min width.
+				height: 100%; // Help to fill out the whole layout entry.
 				min-height: var(--uui-size-16);
 				flex-flow: row wrap;
 				background-color: var(--uui-color-surface);

src/Umbraco.Web.UI.Client/src/packages/block/block-grid/context/block-grid-entry.context.ts

@@ -116,7 +116,9 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext<
 	protected _gotLayout(layout: UmbBlockGridLayoutModel | undefined) {
 		if (layout) {
 			// TODO: Implement size correction to fit with configurations. both for columnSpan and rowSpan.
+			layout = { ...layout };
 			layout.columnSpan ??= 999;
+			layout.areas ??= [];
 		}
 		return layout;
 	}
@@ -258,6 +260,7 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext<
 		updateRowTemplate: boolean,
 	) {
 		if (!this._entries) return;
+		const layoutColumns = this._entries.getLayoutColumns() ?? 0;
 
 		const computedStyles = window.getComputedStyle(layoutContainer);
 
@@ -293,7 +296,6 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext<
 		// This will also ensure handling non-css-grid mode,
 		// use container width divided by amount of columns( or the item width divided by its amount of columnSpan)
 		let amountOfColumnsInWeightMap = gridColumns.length;
-		const layoutColumns = this._entries.getLayoutColumns() ?? 0;
 		const amountOfUnknownColumns = layoutColumns - amountOfColumnsInWeightMap;
 		if (amountOfUnknownColumns > 0) {
 			const accumulatedValue = getAccumulatedValueOfIndex(amountOfColumnsInWeightMap, gridColumns) || 0;
@@ -380,6 +382,7 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext<
 		*/
 	}
 
+	#updateLayoutRaf = 0;
 	onScaleMouseMove = (e: MouseEvent) => {
 		const layoutContainer = this._entries?.getLayoutContainerElement() as HTMLElement;
 		if (!layoutContainer) {
@@ -396,19 +399,16 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext<
 		const newSpans = this.#getNewSpans(startX, startY, endX, endY);
 		if (!newSpans) return;
 
-		console.log('newSpans', newSpans);
-
 		const updateRowTemplate = this.getColumnSpan() !== newSpans.columnSpan;
-
 		if (updateRowTemplate) {
 			// If we like to update we need to first remove the lock, make the browser render onces and then update.
 			(layoutContainer as HTMLElement).style.gridTemplateRows = '';
 		}
-		//cancelAnimationFrame(raf);
-		//raf = requestAnimationFrame(() => {
-		// As mentioned above we need to wait until the browser has rendered DOM without the lock of gridTemplateRows.
-		this.#updateGridData(layoutContainer, layoutContainerRect, layoutItemRect, updateRowTemplate);
-		//});
+		cancelAnimationFrame(this.#updateLayoutRaf);
+		this.#updateLayoutRaf = requestAnimationFrame(() => {
+			// As mentioned above we need to wait until the browser has rendered DOM without the lock of gridTemplateRows.
+			this.#updateGridData(layoutContainer, layoutContainerRect, layoutItemRect, updateRowTemplate);
+		});
 
 		// update as we go:
 		this.setColumnSpan(newSpans.columnSpan);
@@ -420,7 +420,7 @@ export class UmbBlockGridEntryContext extends UmbBlockEntryContext<
 		if (!layoutContainer) {
 			return;
 		}
-		//cancelAnimationFrame(raf);
+		cancelAnimationFrame(this.#updateLayoutRaf);
 
 		// Remove listeners:
 		window.removeEventListener('mousemove', this.onScaleMouseMove);