Fix rows logic and fix front end

lib/block-supports/layout.php

@@ -495,6 +495,7 @@ function gutenberg_get_layout_style( $selector, $layout, $has_block_gap_support
 				'selector'     => $selector,
 				'declarations' => array(
 					'grid-template-columns' => 'repeat(auto-fill, minmax(' . $max_value . ', 1fr))',
+					'container-type'        => 'inline-size',
 				),
 			);
 		} elseif ( ! empty( $layout['columnCount'] ) ) {
@@ -664,17 +665,20 @@ function gutenberg_render_layout_support_flag( $block_content, $block ) {
 			 * A default gap value is used for this computation because custom gap values may not be
 			 * viable to use in the computation of the container query value.
 			 */
-			$default_gap_value     = 'px' === $parent_column_unit ? 24 : 1.5;
-			$container_query_value = $highest_number * $parent_column_value + ( $highest_number - 1 ) * $default_gap_value;
-			$container_query_value = $container_query_value . $parent_column_unit;
+			$default_gap_value             = 'px' === $parent_column_unit ? 24 : 1.5;
+			$container_query_value         = $highest_number * $parent_column_value + ( $highest_number - 1 ) * $default_gap_value;
+			$minimum_container_query_value = $parent_column_value * 2 + $default_gap_value - 1;
+			$container_query_value         = max( $container_query_value, $minimum_container_query_value ) . $parent_column_unit;
 			// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
 			$grid_column_value = $column_span ? '1/-1' : 'auto';
+			$grid_row_value    = $row_start && ( ! $row_span || '1' === $row_span ) ? 'auto' : 'span ' . $row_span;
 
 			$child_layout_styles[] = array(
 				'rules_group'  => "@container (max-width: $container_query_value )",
 				'selector'     => ".$container_content_class",
 				'declarations' => array(
 					'grid-column' => $grid_column_value,
+					'grid-row'    => $grid_row_value,
 				),
 			);
 		}

packages/block-editor/src/hooks/layout-child.js

@@ -116,6 +116,10 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 			const containerQueryValue =
 				highestNumber * parentColumnValue +
 				( highestNumber - 1 ) * defaultGapValue;
+			// For blocks that only span one column, we want to remove any rowStart values as
+			// the container reduces in size, so that blocks are still arranged in markup order.
+			const minimumContainerQueryValue =
+				parentColumnValue * 2 + defaultGapValue - 1;
 			// If a span is set we want to preserve it as long as possible, otherwise we just reset the value.
 			const gridColumnValue = columnSpan ? '1/-1' : 'auto';
 
@@ -125,7 +129,10 @@ function useBlockPropsChildLayoutStyles( { style } ) {
 					? 'auto'
 					: `span ${ rowSpan }`;
 
-			css += `@container (max-width: ${ containerQueryValue }${ parentColumnUnit }) {
+			css += `@container (max-width: ${ Math.max(
+				containerQueryValue,
+				minimumContainerQueryValue
+			) }${ parentColumnUnit }) {
 				${ selector } {
 					grid-column: ${ gridColumnValue };
 					grid-row: ${ gridRowValue };