diff --git a/frameworks/base/utils/utils.h b/frameworks/base/utils/utils.h
index c1663107e50efe8a406fa11f3623a0f0b81fd9a6..ca53e5050b8cd479329304b3b7e6e5bb2f05e9a3 100644
--- a/frameworks/base/utils/utils.h
+++ b/frameworks/base/utils/utils.h
@@ -38,6 +38,52 @@
         }                                                               \
     } while (0)
 
+#define PRIMITIVE_CAT(x, y) x##y
+#define CAT(x, y) PRIMITIVE_CAT(x, y)
+
+#define COPY_SENTENCE(x) x = other.x;
+#define LOOP_COPY(x) CAT(LOOP_COPY1 x, _END)
+#define LOOP_COPY1(x) COPY_SENTENCE(x) LOOP_COPY2
+#define LOOP_COPY2(x) COPY_SENTENCE(x) LOOP_COPY1
+#define LOOP_COPY1_END
+#define LOOP_COPY2_END
+
+#define COMPARE_SENTENCE(x) (x == other.x)
+#define LOOP_COMPARE(x) CAT(LOOP_COMPARE0 x, _END)
+#define LOOP_COMPARE0(x) COMPARE_SENTENCE(x) LOOP_COMPARE1
+#define LOOP_COMPARE1(x) &&COMPARE_SENTENCE(x) LOOP_COMPARE2
+#define LOOP_COMPARE2(x) &&COMPARE_SENTENCE(x) LOOP_COMPARE1
+#define LOOP_COMPARE1_END
+#define LOOP_COMPARE2_END
+
+#define DEFINE_COPY_CONSTRUCTOR(type) \
+    type(const type& other)           \
+    {                                 \
+        *this = other;                \
+    }
+
+#define DEFINE_COPY_OPERATOR_WITH_PROPERTIES(type, PROPS) \
+    type& operator=(const type& other)                    \
+    {                                                     \
+        if (&other != this) {                             \
+            LOOP_COPY(PROPS)                              \
+        }                                                 \
+        return *this;                                     \
+    }
+
+#define DEFINE_COMPARE_OPERATOR_WITH_PROPERTIES(type, PROPS) \
+    bool operator==(const type& other) const                 \
+    {                                                        \
+        if (&other != this) {                                \
+            return true;                                     \
+        }                                                    \
+        return LOOP_COMPARE(PROPS);                          \
+    }
+
+#define DEFINE_COPY_CONSTRUCTOR_AND_COPY_OPERATOR_AND_COMPARE_OPERATOR_WITH_PROPERTIES(type, PROPS) \
+    DEFINE_COPY_CONSTRUCTOR(type)                                                                   \
+    DEFINE_COPY_OPERATOR_WITH_PROPERTIES(type, PROPS) DEFINE_COMPARE_OPERATOR_WITH_PROPERTIES(type, PROPS)
+
 namespace OHOS::Ace {
 
 template<typename T, std::size_t N>
diff --git a/frameworks/bridge/declarative_frontend/jsview/js_grid_col.cpp b/frameworks/bridge/declarative_frontend/jsview/js_grid_col.cpp
index d69f1b82f0523f9ae0bfeaad9fe8704012025e20..5fdb13b2bd71ea70d410d2251fed91fd9bbdcd0a 100644
--- a/frameworks/bridge/declarative_frontend/jsview/js_grid_col.cpp
+++ b/frameworks/bridge/declarative_frontend/jsview/js_grid_col.cpp
@@ -19,6 +19,7 @@
 
 #include "base/log/ace_trace.h"
 #include "bridge/declarative_frontend/jsview/js_view_common_def.h"
+#include "core/components_ng/pattern/grid_col/grid_col_view.h"
 #include "core/components_v2/grid_layout/grid_col_component.h"
 #include "frameworks/bridge/declarative_frontend/view_stack_processor.h"
 
@@ -103,8 +104,8 @@ void JSGridCol::JSBind(BindingTarget globalObj)
 
 void JSGridCol::Create(const JSCallbackInfo& info)
 {
-    auto component = AceType::MakeRefPtr<V2::GridColComponent>();
-    ViewStackProcessor::GetInstance()->Push(component);
+    bool isNewPipeline = Container::IsCurrentUseNewPipeline();
+
     if (info.Length() > 0 && info[0]->IsObject()) {
         auto gridParam = JSRef<JSObject>::Cast(info[0]);
         auto spanParam = gridParam->GetProperty("span");
@@ -113,9 +114,24 @@ void JSGridCol::Create(const JSCallbackInfo& info)
         auto span = ParserGridContianerSize(spanParam, 1);
         auto offset = ParserGridContianerSize(offsetParam, 0);
         auto order = ParserGridContianerSize(orderParam, 0);
-        component->SetSpan(span);
-        component->SetOffset(offset);
-        component->SetOrder(order);
+
+        if (isNewPipeline) {
+            NG::GridColView::Create(span, offset, order);
+        } else {
+            auto component = AceType::MakeRefPtr<V2::GridColComponent>();
+            ViewStackProcessor::GetInstance()->Push(component);
+            component->SetSpan(span);
+            component->SetOffset(offset);
+            component->SetOrder(order);
+        }
+        return;
+    }
+
+    if (isNewPipeline) {
+        NG::GridColView::Create();
+    } else {
+        auto component = AceType::MakeRefPtr<V2::GridColComponent>();
+        ViewStackProcessor::GetInstance()->Push(component);
     }
 }
 
@@ -126,6 +142,12 @@ void JSGridCol::Span(const JSCallbackInfo& info)
         return;
     }
     auto span = ParserGridContianerSize(info[0], 1);
+    
+    if (Container::IsCurrentUseNewPipeline()) {
+        NG::GridColView::SetSpan(span);
+        return;
+    }
+
     auto component = ViewStackProcessor::GetInstance()->GetMainComponent();
     auto gridCol = AceType::DynamicCast<V2::GridColComponent>(component);
     if (gridCol) {
@@ -140,6 +162,12 @@ void JSGridCol::Offset(const JSCallbackInfo& info)
         return;
     }
     auto offset = ParserGridContianerSize(info[0], 0);
+    
+    if (Container::IsCurrentUseNewPipeline()) {
+        NG::GridColView::SetOffset(offset);
+        return;
+    }
+
     auto component = ViewStackProcessor::GetInstance()->GetMainComponent();
     auto gridCol = AceType::DynamicCast<V2::GridColComponent>(component);
     if (gridCol) {
@@ -154,6 +182,12 @@ void JSGridCol::Order(const JSCallbackInfo& info)
         return;
     }
     auto order = ParserGridContianerSize(info[0], 0);
+    
+    if (Container::IsCurrentUseNewPipeline()) {
+        NG::GridColView::SetOrder(order);
+        return;
+    }
+
     auto component = ViewStackProcessor::GetInstance()->GetMainComponent();
     auto gridCol = AceType::DynamicCast<V2::GridColComponent>(component);
     if (gridCol) {
diff --git a/frameworks/bridge/declarative_frontend/jsview/js_grid_row.cpp b/frameworks/bridge/declarative_frontend/jsview/js_grid_row.cpp
index 0c3d2b0ca7fbdf45450e7853ee7239aa488d4e6e..5b86b5ca50d766ca0e6d2171263f69c2c6149088 100644
--- a/frameworks/bridge/declarative_frontend/jsview/js_grid_row.cpp
+++ b/frameworks/bridge/declarative_frontend/jsview/js_grid_row.cpp
@@ -19,10 +19,10 @@
 #include "base/log/ace_trace.h"
 #include "base/memory/referenced.h"
 #include "bridge/declarative_frontend/jsview/js_view_common_def.h"
+#include "core/components_ng/pattern/grid_row/grid_row_view.h"
 #include "core/components_v2/grid_layout/grid_container_util_class.h"
 #include "core/components_v2/grid_layout/grid_row_component.h"
 #include "frameworks/bridge/declarative_frontend/view_stack_processor.h"
-
 namespace OHOS::Ace::Framework {
 namespace {
 
@@ -120,15 +120,15 @@ void ParseGutterObject(const JSRef<JSVal>& gutterObject, RefPtr<V2::Gutter>& gut
     }
 }
 
-void ParserGutter(const JSRef<JSVal>& jsValue, RefPtr<V2::GridRowComponent>& gridRow)
+RefPtr<V2::Gutter> ParserGutter(const JSRef<JSVal>& jsValue)
 {
     Dimension result;
     if (JSContainerBase::ParseJsDimensionVp(jsValue, result)) {
         auto gutter = AceType::MakeRefPtr<V2::Gutter>(result);
-        gridRow->SetGutter(gutter);
+        return gutter;
     } else {
         if (!jsValue->IsObject()) {
-            return;
+            return AceType::MakeRefPtr<V2::Gutter>();
         }
         auto paramGutter = JSRef<JSObject>::Cast(jsValue);
         auto xObject = paramGutter->GetProperty("x");
@@ -136,17 +136,16 @@ void ParserGutter(const JSRef<JSVal>& jsValue, RefPtr<V2::GridRowComponent>& gri
         auto gutter = AceType::MakeRefPtr<V2::Gutter>();
         ParseGutterObject(xObject, gutter, true);
         ParseGutterObject(yObject, gutter, false);
-        gridRow->SetGutter(gutter);
+        return gutter;
     }
 }
 
-void ParserColumns(const JSRef<JSVal>& jsValue, RefPtr<V2::GridRowComponent> gridRow)
+RefPtr<V2::GridContainerSize> ParserColumns(const JSRef<JSVal>& jsValue)
 {
     if (jsValue->IsNumber()) {
         double columnNumber = 0.0;
         JSViewAbstract::ParseJsDouble(jsValue, columnNumber);
-        auto gridContainerSize = AceType::MakeRefPtr<V2::GridContainerSize>(columnNumber);
-        gridRow->SetTotalCol(gridContainerSize);
+        return AceType::MakeRefPtr<V2::GridContainerSize>(columnNumber);
     } else if (jsValue->IsObject()) {
         auto gridContainerSize = AceType::MakeRefPtr<V2::GridContainerSize>(12);
         auto gridParam = JSRef<JSObject>::Cast(jsValue);
@@ -176,24 +175,22 @@ void ParserColumns(const JSRef<JSVal>& jsValue, RefPtr<V2::GridRowComponent> gri
             containerSizeArray[5] = xxl->ToNumber<int32_t>();
         }
         InheritGridRowOption(gridContainerSize, containerSizeArray);
-        gridRow->SetTotalCol(gridContainerSize);
+        return gridContainerSize;
     } else {
         LOGI("parse column error");
+        return AceType::MakeRefPtr<V2::GridContainerSize>();
     }
 }
 
-void ParserBreakpoints(const JSRef<JSVal>& jsValue, RefPtr<V2::GridRowComponent> gridRow)
+RefPtr<V2::BreakPoints> ParserBreakpoints(const JSRef<JSVal>& jsValue)
 {
     if (!jsValue->IsObject()) {
-        return;
+        return AceType::MakeRefPtr<V2::BreakPoints>();
     }
     auto breakpoints = JSRef<JSObject>::Cast(jsValue);
     auto value = breakpoints->GetProperty("value");
     auto reference = breakpoints->GetProperty("reference");
     auto breakpoint = AceType::MakeRefPtr<V2::BreakPoints>();
-    if (!gridRow) {
-        return;
-    }
     if (reference->IsNumber()) {
         breakpoint->reference = static_cast<V2::BreakPointsReference>(reference->ToNumber<int32_t>());
     }
@@ -202,8 +199,7 @@ void ParserBreakpoints(const JSRef<JSVal>& jsValue, RefPtr<V2::GridRowComponent>
         breakpoint->breakpoints.clear();
         if (array->Length() > MAX_NUMBER_BREAKPOINT - 1) {
             LOGI("The maximum number of breakpoints is %{public}zu", MAX_NUMBER_BREAKPOINT);
-            gridRow->SetBreakPoints(breakpoint);
-            return;
+            return breakpoint;
         }
         double width = -1.0;
         for (size_t i = 0; i < array->Length(); i++) {
@@ -213,22 +209,23 @@ void ParserBreakpoints(const JSRef<JSVal>& jsValue, RefPtr<V2::GridRowComponent>
                 JSContainerBase::ParseJsDimensionVp(threshold, valueDimension);
                 if (GreatNotEqual(width, valueDimension.Value())) {
                     LOGI("Array data must be sorted in ascending order");
-                    gridRow->SetBreakPoints(breakpoint);
-                    return;
+                    return breakpoint;
                 }
                 width = valueDimension.Value();
                 breakpoint->breakpoints.push_back(threshold->ToString());
             }
         }
     }
-    gridRow->SetBreakPoints(breakpoint);
+    return breakpoint;
 }
 
-void ParserDirection(const JSRef<JSVal>& jsValue, RefPtr<V2::GridRowComponent> gridRow)
+V2::GridRowDirection ParserDirection(const JSRef<JSVal>& jsValue)
 {
-    if (gridRow && jsValue->IsNumber()) {
-        gridRow->SetDirection(static_cast<V2::GridRowDirection>(jsValue->ToNumber<int32_t>()));
+    V2::GridRowDirection direction(V2::GridRowDirection::Row);
+    if (jsValue->IsNumber()) {
+        direction = static_cast<V2::GridRowDirection>(jsValue->ToNumber<int32_t>());
     }
+    return direction;
 }
 
 } // namespace
@@ -261,20 +258,46 @@ void JSGridRow::Height(const JSCallbackInfo& info)
     }
 }
 
+inline void FillComponent(const RefPtr<V2::GridRowComponent>& component, const RefPtr<V2::GridContainerSize>& col,
+    const RefPtr<V2::Gutter>& gutter, const RefPtr<V2::BreakPoints>& breakpoints, V2::GridRowDirection direction)
+{
+    component->SetTotalCol(col);
+    component->SetGutter(gutter);
+    component->SetBreakPoints(breakpoints);
+    component->SetDirection(direction);
+}
+
 void JSGridRow::Create(const JSCallbackInfo& info)
 {
-    auto component = AceType::MakeRefPtr<V2::GridRowComponent>();
-    ViewStackProcessor::GetInstance()->Push(component);
+    bool isNewPipeline = Container::IsCurrentUseNewPipeline();
+
     if (info.Length() > 0 && info[0]->IsObject()) {
         auto gridRow = JSRef<JSObject>::Cast(info[0]);
         auto columns = gridRow->GetProperty("columns");
         auto gutter = gridRow->GetProperty("gutter");
         auto breakpoints = gridRow->GetProperty("breakpoints");
         auto direction = gridRow->GetProperty("direction");
-        ParserColumns(columns, component);
-        ParserGutter(gutter, component);
-        ParserBreakpoints(breakpoints, component);
-        ParserDirection(direction, component);
+
+        auto parsedColumns = ParserColumns(columns);
+        auto parsedGutter = ParserGutter(gutter);
+        auto parsedBreakpoints = ParserBreakpoints(breakpoints);
+        auto parsedDirection = ParserDirection(direction);
+
+        if (isNewPipeline) {
+            NG::GridRowView::Create(parsedColumns, parsedGutter, parsedBreakpoints, parsedDirection);
+        } else {
+            auto component = AceType::MakeRefPtr<V2::GridRowComponent>();
+            ViewStackProcessor::GetInstance()->Push(component);
+            FillComponent(component, parsedColumns, parsedGutter, parsedBreakpoints, parsedDirection);
+        }
+        return;
+    }
+
+    if (isNewPipeline) {
+        NG::GridRowView::Create();
+    } else {
+        auto component = AceType::MakeRefPtr<V2::GridRowComponent>();
+        ViewStackProcessor::GetInstance()->Push(component);
     }
 }
 
@@ -287,7 +310,7 @@ void JSGridRow::Columns(const JSCallbackInfo& info)
     auto component = ViewStackProcessor::GetInstance()->GetMainComponent();
     auto grid = AceType::DynamicCast<V2::GridRowComponent>(component);
     if (grid) {
-        ParserColumns(info[0], grid);
+        grid->SetTotalCol(ParserColumns(info[0]));
     }
 }
 void JSGridRow::Gutter(const JSCallbackInfo& info)
@@ -299,7 +322,7 @@ void JSGridRow::Gutter(const JSCallbackInfo& info)
     auto component = ViewStackProcessor::GetInstance()->GetMainComponent();
     auto grid = AceType::DynamicCast<V2::GridRowComponent>(component);
     if (grid) {
-        ParserGutter(info[0], grid);
+        grid->SetGutter(ParserGutter(info[0]));
     }
 }
 
@@ -315,7 +338,7 @@ void JSGridRow::Breakpoints(const JSCallbackInfo& info)
     auto component = ViewStackProcessor::GetInstance()->GetMainComponent();
     auto grid = AceType::DynamicCast<V2::GridRowComponent>(component);
     if (grid) {
-        ParserBreakpoints(info[0], grid);
+        grid->SetBreakPoints(ParserBreakpoints(info[0]));
     }
 }
 
@@ -324,7 +347,7 @@ void JSGridRow::Direction(const JSCallbackInfo& info)
     auto component = ViewStackProcessor::GetInstance()->GetMainComponent();
     auto grid = AceType::DynamicCast<V2::GridRowComponent>(component);
     if (grid) {
-        ParserDirection(info[0], grid);
+        grid->SetDirection(ParserDirection(info[0]));
     }
 }
 
diff --git a/frameworks/core/components_ng/pattern/BUILD.gn b/frameworks/core/components_ng/pattern/BUILD.gn
index fd32e32b7b3e311617582678dab8bf0bc7ac7275..dda00d0f29d8cf4d0aba365bb40eff727f3542b8 100644
--- a/frameworks/core/components_ng/pattern/BUILD.gn
+++ b/frameworks/core/components_ng/pattern/BUILD.gn
@@ -81,8 +81,12 @@ build_component_ng("pattern_ng") {
     "grid/grid_scroll/grid_scroll_layout_algorithm.cpp",
     "grid/grid_utils.cpp",
     "grid/grid_view.cpp",
+    "grid_col/grid_col_layout_algorithm.cpp",
+    "grid_col/grid_col_view.cpp",
     "grid_container/grid_container_layout_property.cpp",
     "grid_container/grid_container_view.cpp",
+    "grid_row/grid_row_layout_algorithm.cpp",
+    "grid_row/grid_row_view.cpp",
     "image/image_layout_algorithm.cpp",
     "image/image_model_ng.cpp",
     "image/image_pattern.cpp",
diff --git a/frameworks/core/components_ng/pattern/grid_col/grid_col_layout_algorithm.cpp b/frameworks/core/components_ng/pattern/grid_col/grid_col_layout_algorithm.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..627197962fb00a6c77696f5a6f8558165c1ec4d6
--- /dev/null
+++ b/frameworks/core/components_ng/pattern/grid_col/grid_col_layout_algorithm.cpp
@@ -0,0 +1,32 @@
+
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "grid_col_layout_algorithm.h"
+
+#include "core/components_ng/property/measure_utils.h"
+#include "core/components_v2/grid_layout/grid_container_utils.h"
+
+namespace OHOS::Ace::NG {
+
+void GridColLayoutAlgorithm::Layout(LayoutWrapper* layoutWrapper)
+{
+    auto children = layoutWrapper->GetAllChildrenWithBuild();
+    for (auto&& child : children) {
+        child->Layout();
+    }
+}
+
+} // namespace OHOS::Ace::NG
diff --git a/frameworks/core/components_ng/pattern/grid_col/grid_col_layout_algorithm.h b/frameworks/core/components_ng/pattern/grid_col/grid_col_layout_algorithm.h
new file mode 100644
index 0000000000000000000000000000000000000000..1c93074a50a0bdd8aaa9fd8b2e38baa47329fc2b
--- /dev/null
+++ b/frameworks/core/components_ng/pattern/grid_col/grid_col_layout_algorithm.h
@@ -0,0 +1,35 @@
+
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERN_GRID_COL_LAYOUT_ALGORITHM_H
+#define FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERN_GRID_COL_LAYOUT_ALGORITHM_H
+
+#include "grid_col_layout_property.h"
+
+#include "core/components_ng/layout/layout_algorithm.h"
+#include "core/components_ng/property/measure_utils.h"
+
+namespace OHOS::Ace::NG {
+
+class ACE_EXPORT GridColLayoutAlgorithm : public BoxLayoutAlgorithm {
+    DECLARE_ACE_TYPE(GridColLayoutAlgorithm, BoxLayoutAlgorithm);
+
+public:
+    void Layout(LayoutWrapper* layoutWrapper) override;
+};
+} // namespace OHOS::Ace::NG
+
+#endif // FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERN_GRID_COL_LAYOUT_ALGORITHM_H
diff --git a/frameworks/core/components_ng/pattern/grid_col/grid_col_layout_pattern.h b/frameworks/core/components_ng/pattern/grid_col/grid_col_layout_pattern.h
new file mode 100644
index 0000000000000000000000000000000000000000..393867ee81da180521fe15b560399c31263c101f
--- /dev/null
+++ b/frameworks/core/components_ng/pattern/grid_col/grid_col_layout_pattern.h
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERNS_GRID_COL_PATTER_H
+#define FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERNS_GRID_COL_PATTER_H
+
+#include "base/utils/macros.h"
+#include "core/components_ng/pattern/pattern.h"
+#include "grid_col_layout_property.h"
+#include "grid_col_layout_algorithm.h"
+
+namespace OHOS::Ace::NG {
+class GridColLayoutPattern : public Pattern {
+    DECLARE_ACE_TYPE(GridColLayoutPattern, Pattern);
+
+public:
+    RefPtr<LayoutProperty> CreateLayoutProperty() override
+    {
+        return MakeRefPtr<GridColLayoutProperty>();
+    }
+
+    RefPtr<LayoutAlgorithm> CreateLayoutAlgorithm() override
+    {
+        return MakeRefPtr<GridColLayoutAlgorithm>();
+    }
+};
+} // namespace OHOS::Ace::NG
+
+#endif
\ No newline at end of file
diff --git a/frameworks/core/components_ng/pattern/grid_col/grid_col_layout_property.h b/frameworks/core/components_ng/pattern/grid_col/grid_col_layout_property.h
new file mode 100644
index 0000000000000000000000000000000000000000..2b4ab5023a8862790b385f2b44f52a66f1b98b57
--- /dev/null
+++ b/frameworks/core/components_ng/pattern/grid_col/grid_col_layout_property.h
@@ -0,0 +1,102 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERN_GRID_COL_LAYOUT_PROPERTY_H
+#define FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERN_GRID_COL_LAYOUT_PROPERTY_H
+
+#include <memory>
+#include <vector>
+
+#include "core/components_ng/base/frame_node.h"
+#include "core/components_ng/layout/layout_property.h"
+#include "core/components_v2/grid_layout/grid_container_util_class.h"
+
+namespace OHOS::Ace::NG {
+
+class ACE_EXPORT GridColLayoutProperty : public LayoutProperty {
+    DECLARE_ACE_TYPE(GridColLayoutProperty, LayoutProperty);
+
+public:
+    RefPtr<LayoutProperty> Clone() const override
+    {
+        auto value = MakeRefPtr<GridColLayoutProperty>();
+        value->LayoutProperty::UpdateLayoutProperty(this);
+
+        CloneSpan();
+        CloneOffset();
+        CloneOrder();
+        return value;
+    }
+
+    void Reset() override
+    {
+        ResetSpan();
+        ResetOffset();
+        ResetOrder();
+        LayoutProperty::Reset();
+    }
+
+    ACE_DEFINE_PROPERTY_ITEM_WITHOUT_GROUP(Span, V2::GridContainerSize, PROPERTY_UPDATE_MEASURE);
+    ACE_DEFINE_PROPERTY_ITEM_WITHOUT_GROUP(Offset, V2::GridContainerSize, PROPERTY_UPDATE_MEASURE);
+    ACE_DEFINE_PROPERTY_ITEM_WITHOUT_GROUP(Order, V2::GridContainerSize, PROPERTY_UPDATE_MEASURE);
+    ACE_DEFINE_PROPERTY_ITEM_WITHOUT_GROUP(SizeType, V2::GridSizeType, PROPERTY_UPDATE_NORMAL);
+
+    int32_t GetSpan(V2::GridSizeType sizeType) const
+    {
+        auto span = GetSpanValue();
+        return GetPropValue(span, sizeType);
+    }
+
+    int32_t GetOrder(V2::GridSizeType sizeType) const
+    {
+        auto order = GetOrderValue();
+        return GetPropValue(order, sizeType);
+    }
+
+    int32_t GetOffset(V2::GridSizeType sizeType) const
+    {
+        auto offset = GetOffsetValue();
+        return GetPropValue(offset, sizeType);
+    }
+
+private:
+    int32_t GetPropValue(const V2::GridContainerSize& prop, V2::GridSizeType sizeType) const
+    {
+        switch (sizeType) {
+            case V2::GridSizeType::XS:
+                return prop.xs;
+                break;
+            case V2::GridSizeType::SM:
+                return prop.sm;
+                break;
+            case V2::GridSizeType::MD:
+                return prop.md;
+                break;
+            case V2::GridSizeType::LG:
+                return prop.lg;
+                break;
+            case V2::GridSizeType::XL:
+                return prop.xl;
+                break;
+            case V2::GridSizeType::XXL:
+                return prop.xxl;
+                break;
+            default:
+                return prop.xs;
+        }
+    }
+};
+} // namespace OHOS::Ace::NG
+#endif
\ No newline at end of file
diff --git a/frameworks/core/components_ng/pattern/grid_col/grid_col_view.cpp b/frameworks/core/components_ng/pattern/grid_col/grid_col_view.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..04ff5ef130c4dd09fb7fb34932656ad25c83d156
--- /dev/null
+++ b/frameworks/core/components_ng/pattern/grid_col/grid_col_view.cpp
@@ -0,0 +1,65 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "grid_col_view.h"
+
+#include "grid_col_layout_pattern.h"
+
+#include "base/memory/referenced.h"
+#include "core/components_ng/base/frame_node.h"
+#include "core/components_ng/base/view_stack_processor.h"
+#include "core/components_ng/property/property.h"
+#include "core/components_v2/inspector/inspector_constants.h"
+
+namespace OHOS::Ace::NG {
+
+void GridColView::Create()
+{
+    RefPtr<V2::GridContainerSize> span = AceType::MakeRefPtr<V2::GridContainerSize>(1);
+    RefPtr<V2::GridContainerSize> offset = AceType::MakeRefPtr<V2::GridContainerSize>(0);
+    RefPtr<V2::GridContainerSize> order = AceType::MakeRefPtr<V2::GridContainerSize>(0);
+    Create(span, offset, order);
+}
+
+void GridColView::Create(const RefPtr<V2::GridContainerSize>& span, const RefPtr<V2::GridContainerSize>& offset,
+    const RefPtr<V2::GridContainerSize>& order)
+{
+    auto* stack = ViewStackProcessor::GetInstance();
+    auto nodeId = stack->ClaimNodeId();
+    auto frameNode = FrameNode::GetOrCreateFrameNode(
+        V2::GRID_COL_ETS_TAG, nodeId, []() { return AceType::MakeRefPtr<GridColLayoutPattern>(); });
+    stack->Push(frameNode);
+
+    ACE_UPDATE_LAYOUT_PROPERTY(GridColLayoutProperty, Span, *span);
+    ACE_UPDATE_LAYOUT_PROPERTY(GridColLayoutProperty, Offset, *offset);
+    ACE_UPDATE_LAYOUT_PROPERTY(GridColLayoutProperty, Order, *order);
+}
+
+void GridColView::SetSpan(const RefPtr<V2::GridContainerSize>& span)
+{
+    ACE_UPDATE_LAYOUT_PROPERTY(GridColLayoutProperty, Span, *span);
+}
+
+void GridColView::SetOffset(const RefPtr<V2::GridContainerSize>& offset)
+{
+    ACE_UPDATE_LAYOUT_PROPERTY(GridColLayoutProperty, Offset, *offset);
+}
+
+void GridColView::SetOrder(const RefPtr<V2::GridContainerSize>& order)
+{
+    ACE_UPDATE_LAYOUT_PROPERTY(GridColLayoutProperty, Order, *order);
+}
+
+} // namespace OHOS::Ace::NG
diff --git a/frameworks/core/components_ng/pattern/grid_col/grid_col_view.h b/frameworks/core/components_ng/pattern/grid_col/grid_col_view.h
new file mode 100644
index 0000000000000000000000000000000000000000..b8690de4ab9dbe3c21a7227886752ecf575d9369
--- /dev/null
+++ b/frameworks/core/components_ng/pattern/grid_col/grid_col_view.h
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERNS_GRID_COL_VIEW_H
+#define FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERNS_GRID_COL_VIEW_H
+
+#include "base/utils/macros.h"
+#include "frameworks/core/components_v2/grid_layout/grid_container_util_class.h"
+
+namespace OHOS::Ace::NG {
+class ACE_EXPORT GridColView {
+public:
+    static void Create();
+    static void Create(const RefPtr<V2::GridContainerSize>& span, const RefPtr<V2::GridContainerSize>& offset,
+        const RefPtr<V2::GridContainerSize>& order);
+    static void SetSpan(const RefPtr<V2::GridContainerSize>& span);
+    static void SetOffset(const RefPtr<V2::GridContainerSize>& offset);
+    static void SetOrder(const RefPtr<V2::GridContainerSize>& order);
+};
+} // namespace OHOS::Ace::NG
+
+#endif
\ No newline at end of file
diff --git a/frameworks/core/components_ng/pattern/grid_container/grid_container_layout_property.h b/frameworks/core/components_ng/pattern/grid_container/grid_container_layout_property.h
index 31f6446a1a7af982dcea3b8dcedc936ea4723495..617499bbdae5d5485fbe1744189db33f67cd81c4 100644
--- a/frameworks/core/components_ng/pattern/grid_container/grid_container_layout_property.h
+++ b/frameworks/core/components_ng/pattern/grid_container/grid_container_layout_property.h
@@ -45,7 +45,6 @@ public:
         LinearLayoutProperty::Clone(value);
         value->propContainerInfo_ = propContainerInfo_;
         value->childrenFramenode_ = childrenFramenode_;
-        value->LayoutProperty::UpdateLayoutProperty(DynamicCast<LayoutProperty>(this));
         return value;
     }
 
diff --git a/frameworks/core/components_ng/pattern/grid_row/grid_row_layout_algorithm.cpp b/frameworks/core/components_ng/pattern/grid_row/grid_row_layout_algorithm.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..9c429aacb3ff9a9db4eb44f74b8e0ab04012f706
--- /dev/null
+++ b/frameworks/core/components_ng/pattern/grid_row/grid_row_layout_algorithm.cpp
@@ -0,0 +1,240 @@
+
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "grid_row_layout_algorithm.h"
+
+#include <array>
+
+#include "../grid_col/grid_col_layout_property.h"
+
+#include "core/components_v2/grid_layout/grid_container_utils.h"
+#include "core/components_v2/inspector/inspector_constants.h"
+#include "core/pipeline_ng/pipeline_context.h"
+
+namespace OHOS::Ace::NG {
+
+using OHOS::Ace::V2::GridContainerUtils;
+using OHOS::Ace::V2::GridSizeType;
+using OHOS::Ace::V2::Gutter;
+using NewLineOffset = GridRowLayoutAlgorithm::NewLineOffset;
+using LayoutPair = std::pair<RefPtr<LayoutWrapper>, NewLineOffset>;
+
+namespace {
+
+bool OrderComparator(const LayoutPair& left, const LayoutPair& right)
+{
+    auto leftCol = AceType::DynamicCast<GridColLayoutProperty>(left.first->GetLayoutProperty());
+    auto rightCol = AceType::DynamicCast<GridColLayoutProperty>(right.first->GetLayoutProperty());
+    if (leftCol && rightCol) {
+        return (leftCol->GetOrder(leftCol->GetSizeTypeValue()) < rightCol->GetOrder(rightCol->GetSizeTypeValue()));
+    }
+    return false;
+}
+
+// std::string ConvertSizeTypeToString(GridSizeType sizeType)
+// {
+//     auto index = static_cast<int32_t>(sizeType);
+//     std::array<const char*, 7> refs { "xs", "sm", "lg", "md", "xl", "xxl", "undefined" }; // 7 types of size
+//     return refs[index];
+// }
+
+bool ParseNewLineForLargeOffset(
+    int32_t childSpan, int32_t childOffset, int32_t restColumnNum, int32_t totalColumnNum, NewLineOffset& newLineOffset)
+{
+    if (childOffset <= totalColumnNum) {
+        return false;
+    }
+    auto totalOffsetStartFromNewLine = childOffset - restColumnNum;
+    auto lineCountForLargeChildOffset = static_cast<int32_t>(totalOffsetStartFromNewLine / totalColumnNum);
+    if (totalOffsetStartFromNewLine > totalColumnNum) {
+        // ex. totalColumn 12, restColumn is 4, child offset 26, span 6. Offsets of next 2 lines are 12 and 10
+        // then the child will be placed at the third new line with offset 0.
+        if ((totalOffsetStartFromNewLine % totalColumnNum) + childSpan > totalColumnNum) {
+            newLineOffset.offset = 0;
+            lineCountForLargeChildOffset++;
+        } else {
+            // ex. totalColumn 12, restColumn is 4, child offset 20, span 6. Offsets of next 2 lines are 12 and 4
+            // then the child will be placed at the second new line with offset 4.
+            newLineOffset.offset = totalOffsetStartFromNewLine % totalColumnNum;
+        }
+        newLineOffset.newLineCount = lineCountForLargeChildOffset;
+        return true;
+    }
+    if (totalOffsetStartFromNewLine + childSpan > totalColumnNum) {
+        newLineOffset.newLineCount += 1;
+        newLineOffset.offset = 0;
+        return true;
+    }
+    return false;
+}
+
+void CalculateOffsetOfNewline(const RefPtr<GridColLayoutProperty>& gridCol, int32_t currentChildSpan,
+    int32_t restColumnNum, int32_t totalColumnNum, GridSizeType sizeType, NewLineOffset& newLineOffset)
+{
+    newLineOffset.span = currentChildSpan;
+    if (restColumnNum < gridCol->GetOffset(sizeType) + currentChildSpan) {
+        newLineOffset.newLineCount = 1;
+        // ex. if there are 7 columns left and chile span is 4 or 8(< or > than restColumnNum), offset is 5,
+        // child will be set on a new row with offset 0
+        if (restColumnNum >= gridCol->GetOffset(sizeType)) {
+            newLineOffset.offset = 0;
+            return;
+        }
+        // in this case, child will be set on a new row with offset (child offset - restColumnNum)
+        if (restColumnNum < gridCol->GetOffset(sizeType) && restColumnNum > currentChildSpan) {
+            if (ParseNewLineForLargeOffset(
+                    currentChildSpan, gridCol->GetOffset(sizeType), restColumnNum, totalColumnNum, newLineOffset)) {
+                return;
+            }
+            newLineOffset.offset = gridCol->GetOffset(sizeType) - restColumnNum;
+            return;
+        }
+        // in this case, empty line(s) will be placed
+        if (restColumnNum < gridCol->GetOffset(sizeType) && restColumnNum < currentChildSpan) {
+            if (ParseNewLineForLargeOffset(
+                    currentChildSpan, gridCol->GetOffset(sizeType), restColumnNum, totalColumnNum, newLineOffset)) {
+                return;
+            }
+            newLineOffset.offset = gridCol->GetOffset(sizeType) - restColumnNum;
+            return;
+        }
+    }
+    // in this case, child can be place at current row
+    newLineOffset.offset = gridCol->GetOffset(sizeType);
+}
+
+} // namespace
+
+void GridRowLayoutAlgorithm::MeasureSelf(LayoutWrapper* layoutWrapper, SizeF& frameSize)
+{
+    const auto& layoutProperty = DynamicCast<GridRowLayoutProperty>(layoutWrapper->GetLayoutProperty());
+    auto layoutConstraint = layoutProperty->GetLayoutConstraint();
+
+    frameSize.Constrain(layoutConstraint->minSize, layoutConstraint->maxSize);
+    layoutWrapper->GetGeometryNode()->SetFrameSize(frameSize);
+}
+
+/* Measure each child and return total height */
+float GridRowLayoutAlgorithm::MeasureChildren(LayoutWrapper* layoutWrapper, double columnUnitWidth,
+    double childHeightLimit, std::pair<double, double>& gutter, GridSizeType sizeType, int32_t columnNum)
+{
+    auto context = NG::PipelineContext::GetCurrentContext();
+    auto children = layoutWrapper->GetAllChildrenWithBuild();
+    int32_t offset = 0;
+    float totalHeight = 0.0;
+    float currentRowHeight = 0.0;
+
+    /* GridRow's child must be a GridCol */
+    for (auto& child : children) {
+        if (child->GetHostTag() != V2::GRID_COL_ETS_TAG) {
+            LOGE("Not a grid_col component");
+            continue;
+        }
+        auto gridCol = AceType::DynamicCast<GridColLayoutProperty>(child->GetLayoutProperty());
+        auto span = std::min(gridCol->GetSpan(sizeType), columnNum);
+        gridCol->UpdateSizeType(sizeType);
+
+        /* Measure child */
+        LayoutConstraintF parentConstraint;
+        parentConstraint.Reset();
+        SizeF tmpSz(columnUnitWidth * span + (span - 1) * gutter.first, childHeightLimit);
+        parentConstraint.UpdateMaxSizeWithCheck(tmpSz);
+        tmpSz.SetHeight(0);
+        parentConstraint.UpdateMinSizeWithCheck(tmpSz);
+        child->Measure(parentConstraint);
+
+        /* Calculate line break */
+        NewLineOffset newLineOffset;
+        CalculateOffsetOfNewline(gridCol, span, columnNum - offset, columnNum, sizeType, newLineOffset);
+
+        /* accumulate total lines */
+        if (newLineOffset.newLineCount > 0) {
+            newLineOffset.offsetY = currentRowHeight * newLineOffset.newLineCount + gutter.second;
+            totalHeight += newLineOffset.offsetY;
+            offset = newLineOffset.offset;
+            currentRowHeight = child->GetGeometryNode()->GetFrameSize().Height();
+        } else {
+            offset += newLineOffset.offset;
+            newLineOffset.offsetY = gutter.second;
+            auto childHeight = child->GetGeometryNode()->GetFrameSize().Height();
+            currentRowHeight = std::max(currentRowHeight, childHeight);
+        }
+
+        gridColChildren_.emplace_back(std::make_pair(child, newLineOffset));
+    }
+    totalHeight += currentRowHeight;
+    gridColChildren_.sort(OrderComparator);
+
+    return totalHeight;
+}
+
+void GridRowLayoutAlgorithm::Measure(LayoutWrapper* layoutWrapper)
+{
+    const auto& layoutProperty = DynamicCast<GridRowLayoutProperty>(layoutWrapper->GetLayoutProperty());
+
+    auto columnsVal = MakeRefPtr<V2::GridContainerSize>(layoutProperty->GetColumnsValue());
+    auto gutterVal = MakeRefPtr<V2::Gutter>(layoutProperty->GetGutterValue());
+    auto breakPointsVal = MakeRefPtr<V2::BreakPoints>(layoutProperty->GetBreakPointsValue());
+
+    auto maxSize = CreateIdealSize(
+        layoutProperty->GetLayoutConstraint().value(), Axis::HORIZONTAL, MeasureType::MATCH_PARENT, true);
+    auto context = NG::PipelineContext::GetCurrentContext();
+    auto sizeType = GridContainerUtils::ProcessGridSizeType(breakPointsVal, Size(maxSize.Width(), maxSize.Height()));
+    // TODO:
+    // if (currentSizeType_ != sizeType) {
+    //     auto sizeTypeString = ConvertSizeTypeToString(sizeType);
+    //     component->FirebreakPointEvent(sizeTypeString);
+    //     currentSizeType_ = sizeType;
+    // }
+    auto gutter = GridContainerUtils::ProcessGutter(sizeType, gutterVal);
+    gutterInDouble_ =
+        std::make_pair<double, double>(context->NormalizeToPx(gutter.first), context->NormalizeToPx(gutter.second));
+    int32_t columnNum = GridContainerUtils::ProcessColumn(sizeType, columnsVal);
+    columnUnitWidth_ = GridContainerUtils::ProcessColumnWidth(gutterInDouble_, columnNum, maxSize.Width());
+    float childrenHeight =
+        MeasureChildren(layoutWrapper, columnUnitWidth_, maxSize.Height(), gutterInDouble_, sizeType, columnNum);
+    maxSize.SetHeight(childrenHeight);
+    MeasureSelf(layoutWrapper, maxSize);
+}
+
+void GridRowLayoutAlgorithm::Layout(LayoutWrapper* layoutWrapper)
+{
+    if (gridColChildren_.empty()) {
+        return;
+    }
+
+    const auto& layoutProperty = DynamicCast<GridRowLayoutProperty>(layoutWrapper->GetLayoutProperty());
+    auto directionVal = layoutProperty->GetDirectionValue();
+
+    for (auto&& pair : gridColChildren_) {
+        auto childLayoutWrapper = pair.first;
+        auto& newLineOffset = pair.second;
+
+        double offsetWidth = 0.0;
+        if (directionVal == V2::GridRowDirection::RowReverse) {
+            offsetWidth = ((newLineOffset.span + newLineOffset.offset) * columnUnitWidth_ +
+                           ((newLineOffset.span + newLineOffset.offset) - 1) * gutterInDouble_.first);
+        } else { // V2::GridRowDirection::Row
+            offsetWidth = newLineOffset.offset * columnUnitWidth_ + newLineOffset.offset * gutterInDouble_.first;
+        }
+
+        OffsetF offset(offsetWidth, newLineOffset.offsetY);
+        childLayoutWrapper->GetGeometryNode()->SetMarginFrameOffset(offset);
+        childLayoutWrapper->Layout();
+    }
+}
+
+} // namespace OHOS::Ace::NG
diff --git a/frameworks/core/components_ng/pattern/grid_row/grid_row_layout_algorithm.h b/frameworks/core/components_ng/pattern/grid_row/grid_row_layout_algorithm.h
new file mode 100644
index 0000000000000000000000000000000000000000..434a45cc7daf08b2c20000ce6e27509c7460b813
--- /dev/null
+++ b/frameworks/core/components_ng/pattern/grid_row/grid_row_layout_algorithm.h
@@ -0,0 +1,53 @@
+
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERN_GRID_ROW_LAYOUT_ALGORITHM_H
+#define FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERN_GRID_ROW_LAYOUT_ALGORITHM_H
+
+#include "../grid_col/grid_col_layout_property.h"
+#include "grid_row_layout_property.h"
+
+#include "core/components_ng/layout/layout_algorithm.h"
+#include "core/components_ng/property/measure_utils.h"
+
+namespace OHOS::Ace::NG {
+
+class ACE_EXPORT GridRowLayoutAlgorithm : public LayoutAlgorithm {
+    DECLARE_ACE_TYPE(GridRowLayoutAlgorithm, LayoutAlgorithm);
+
+public:
+    struct NewLineOffset {
+        int32_t newLineCount = 0;
+        int32_t offset = 0;
+        int32_t span = 0;
+        float offsetY = 0;
+    };
+    GridRowLayoutAlgorithm() = default;
+    void Measure(LayoutWrapper* layoutWrapper) override;
+    void Layout(LayoutWrapper* layoutWrapper) override;
+
+private:
+    void MeasureSelf(LayoutWrapper* layoutWrapper, SizeF& childrenHeight);
+    float MeasureChildren(LayoutWrapper* layoutWrapper, double columnUnitWidth, double childHeightLimit,
+        std::pair<double, double>& gutter, V2::GridSizeType sizeType, int32_t columnNum);
+
+    std::pair<double, double> gutterInDouble_ { 0, 0 };
+    double columnUnitWidth_ = 0;
+    std::list<std::pair<RefPtr<LayoutWrapper>, NewLineOffset>> gridColChildren_ {};
+};
+} // namespace OHOS::Ace::NG
+
+#endif // FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERN_GRID_ROW_LAYOUT_ALGORITHM_H
diff --git a/frameworks/core/components_ng/pattern/grid_row/grid_row_layout_pattern.h b/frameworks/core/components_ng/pattern/grid_row/grid_row_layout_pattern.h
new file mode 100644
index 0000000000000000000000000000000000000000..f21f1319a31acf602cce03e36115662d42553fd2
--- /dev/null
+++ b/frameworks/core/components_ng/pattern/grid_row/grid_row_layout_pattern.h
@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERNS_GRID_ROW_PATTER_H
+#define FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERNS_GRID_ROW_PATTER_H
+
+#include "base/utils/macros.h"
+#include "core/components_ng/pattern/pattern.h"
+#include "grid_row_layout_property.h"
+#include "grid_row_layout_algorithm.h"
+
+namespace OHOS::Ace::NG {
+class GridRowLayoutPattern : public Pattern {
+    DECLARE_ACE_TYPE(GridRowLayoutPattern, Pattern);
+
+public:
+    RefPtr<LayoutProperty> CreateLayoutProperty() override
+    {
+        return MakeRefPtr<GridRowLayoutProperty>();
+    }
+
+    RefPtr<LayoutAlgorithm> CreateLayoutAlgorithm() override
+    {
+        return MakeRefPtr<GridRowLayoutAlgorithm>();
+    }
+};
+} // namespace OHOS::Ace::NG
+
+#endif
\ No newline at end of file
diff --git a/frameworks/core/components_ng/pattern/grid_row/grid_row_layout_property.h b/frameworks/core/components_ng/pattern/grid_row/grid_row_layout_property.h
new file mode 100644
index 0000000000000000000000000000000000000000..48a181431d3ee4e8c17bffea706adcea56db3b75
--- /dev/null
+++ b/frameworks/core/components_ng/pattern/grid_row/grid_row_layout_property.h
@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERN_GRID_ROW_LAYOUT_PROPERTY_H
+#define FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERN_GRID_ROW_LAYOUT_PROPERTY_H
+
+#include <memory>
+#include <vector>
+
+#include "core/components_ng/base/frame_node.h"
+#include "core/components_ng/layout/layout_property.h"
+#include "core/components_v2/grid_layout/grid_container_util_class.h"
+
+namespace OHOS::Ace::NG {
+
+class ACE_EXPORT GridRowLayoutProperty : public LayoutProperty {
+    DECLARE_ACE_TYPE(GridRowLayoutProperty, LayoutProperty);
+
+public:
+    RefPtr<LayoutProperty> Clone() const override
+    {
+        auto value = MakeRefPtr<GridRowLayoutProperty>();
+        value->LayoutProperty::UpdateLayoutProperty(this);
+
+        CloneColumns();
+        CloneGutter();
+        CloneBreakPoints();
+        CloneDirection();
+        return value;
+    }
+
+    void Reset() override
+    {
+        ResetColumns();
+        ResetGutter();
+        ResetBreakPoints();
+        ResetDirection();
+        LayoutProperty::Reset();
+    }
+
+    ACE_DEFINE_PROPERTY_ITEM_WITHOUT_GROUP(Columns, V2::GridContainerSize, PROPERTY_UPDATE_MEASURE);
+    ACE_DEFINE_PROPERTY_ITEM_WITHOUT_GROUP(Gutter, V2::Gutter, PROPERTY_UPDATE_MEASURE);
+    ACE_DEFINE_PROPERTY_ITEM_WITHOUT_GROUP(BreakPoints, V2::BreakPoints, PROPERTY_UPDATE_MEASURE);
+    ACE_DEFINE_PROPERTY_ITEM_WITHOUT_GROUP(Direction, V2::GridRowDirection, PROPERTY_UPDATE_MEASURE);
+};
+} // namespace OHOS::Ace::NG
+#endif
\ No newline at end of file
diff --git a/frameworks/core/components_ng/pattern/grid_row/grid_row_view.cpp b/frameworks/core/components_ng/pattern/grid_row/grid_row_view.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..18b18d1cf74336a5e40d9f5d7f4d1c94341a64a9
--- /dev/null
+++ b/frameworks/core/components_ng/pattern/grid_row/grid_row_view.cpp
@@ -0,0 +1,48 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#include "grid_row_view.h"
+
+#include "base/memory/referenced.h"
+#include "core/components_ng/base/frame_node.h"
+#include "core/components_ng/base/view_stack_processor.h"
+#include "core/components_v2/inspector/inspector_constants.h"
+#include "grid_row_layout_pattern.h"
+
+namespace OHOS::Ace::NG {
+void GridRowView::Create()
+{
+    auto col = Referenced::MakeRefPtr<V2::GridContainerSize>();
+    auto gutter = Referenced::MakeRefPtr<V2::Gutter>();
+    auto breakpoints = Referenced::MakeRefPtr<V2::BreakPoints>();
+    auto direction = V2::GridRowDirection::Row;
+    Create(col, gutter, breakpoints, direction);
+}
+
+void GridRowView::Create(const RefPtr<V2::GridContainerSize>& col, const RefPtr<V2::Gutter>& gutter,
+    const RefPtr<V2::BreakPoints>& breakpoints, V2::GridRowDirection direction)
+{
+    auto* stack = ViewStackProcessor::GetInstance();
+    auto nodeId = stack->ClaimNodeId();
+    auto frameNode = FrameNode::GetOrCreateFrameNode(
+        V2::GRID_ROW_ETS_TAG, nodeId, []() { return AceType::MakeRefPtr<GridRowLayoutPattern>(); });
+    stack->Push(frameNode);
+
+    ACE_UPDATE_LAYOUT_PROPERTY(GridRowLayoutProperty, Columns, *col);
+    ACE_UPDATE_LAYOUT_PROPERTY(GridRowLayoutProperty, Gutter, *gutter);
+    ACE_UPDATE_LAYOUT_PROPERTY(GridRowLayoutProperty, BreakPoints, *breakpoints);
+    ACE_UPDATE_LAYOUT_PROPERTY(GridRowLayoutProperty, Direction, direction);
+}
+} // namespace OHOS::Ace::NG
\ No newline at end of file
diff --git a/frameworks/core/components_ng/pattern/grid_row/grid_row_view.h b/frameworks/core/components_ng/pattern/grid_row/grid_row_view.h
new file mode 100644
index 0000000000000000000000000000000000000000..d06ff81a9bd51eb237aa7fb89708da131572b00f
--- /dev/null
+++ b/frameworks/core/components_ng/pattern/grid_row/grid_row_view.h
@@ -0,0 +1,33 @@
+/*
+ * Copyright (c) 2022 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+#ifndef FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERNS_GRID_ROW_VIEW_H
+#define FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_NG_PATTERNS_GRID_ROW_VIEW_H
+
+#include "base/utils/macros.h"
+#include "frameworks/core/components_v2/grid_layout/grid_container_util_class.h"
+
+namespace OHOS::Ace::NG {
+class ACE_EXPORT GridRowView {
+public:
+    static void Create();
+    static void Create(const RefPtr<V2::GridContainerSize>& col, const RefPtr<V2::Gutter>& gutter,
+        const RefPtr<V2::BreakPoints>& breakpoints, V2::GridRowDirection direction);
+    // TODO onBreakPoint changed
+    // TODO height
+};
+} // namespace OHOS::Ace::NG
+
+#endif
\ No newline at end of file
diff --git a/frameworks/core/components_v2/grid_layout/grid_container_util_class.h b/frameworks/core/components_v2/grid_layout/grid_container_util_class.h
index dd330a4d067fe5fd0682855c6ebb314e9e11d6fa..4bc0eb6a69fd44953f260c752b4e559994c47ef2 100644
--- a/frameworks/core/components_v2/grid_layout/grid_container_util_class.h
+++ b/frameworks/core/components_v2/grid_layout/grid_container_util_class.h
@@ -36,6 +36,8 @@ struct GridContainerSize : public AceType {
         xl = column;
         xxl = column;
     };
+    DEFINE_COPY_CONSTRUCTOR_AND_COPY_OPERATOR_AND_COMPARE_OPERATOR_WITH_PROPERTIES(
+        GridContainerSize, (xs)(sm)(md)(lg)(xl)(xxl))
     int32_t xs = DEFAULT_COLUMN_NUMBER;
     int32_t sm = DEFAULT_COLUMN_NUMBER;
     int32_t md = DEFAULT_COLUMN_NUMBER;
@@ -82,6 +84,8 @@ class Gutter : public AceType {
 
 public:
     Gutter() = default;
+    DEFINE_COPY_CONSTRUCTOR_AND_COPY_OPERATOR_AND_COMPARE_OPERATOR_WITH_PROPERTIES(
+        Gutter, (xXs)(yXs)(xSm)(ySm)(xMd)(yMd)(xLg)(yLg)(xXl)(yXl)(xXXl)(yXXl))
     explicit Gutter(Dimension dimension)
         : xXs(dimension), yXs(dimension), xSm(dimension), ySm(dimension), xMd(dimension), yMd(dimension),
           xLg(dimension), yLg(dimension), xXl(dimension), yXl(dimension), xXXl(dimension), yXXl(dimension) {};
@@ -126,6 +130,9 @@ class BreakPoints : public AceType {
     DECLARE_ACE_TYPE(BreakPoints, AceType);
 
 public:
+    BreakPoints() = default;
+    DEFINE_COPY_CONSTRUCTOR_AND_COPY_OPERATOR_AND_COMPARE_OPERATOR_WITH_PROPERTIES(
+        BreakPoints, (reference)(breakpoints))
     BreakPointsReference reference = BreakPointsReference::WindowSize;
     std::vector<std::string> breakpoints { "320vp", "520vp", "840vp" };
 };
diff --git a/frameworks/core/components_v2/grid_layout/grid_container_utils.cpp b/frameworks/core/components_v2/grid_layout/grid_container_utils.cpp
index c38887f62c7c118a5d192e0b13950328b09b5671..ad32c4ada486ea00c146672359adf8e2ac76b107 100644
--- a/frameworks/core/components_v2/grid_layout/grid_container_utils.cpp
+++ b/frameworks/core/components_v2/grid_layout/grid_container_utils.cpp
@@ -17,6 +17,7 @@
 
 #include "core/components/common/layout/grid_system_manager.h"
 #include "frameworks/bridge/common/utils/utils.h"
+#include "core/pipeline_ng/pipeline_context.h"
 
 namespace OHOS::Ace::V2 {
 namespace {
@@ -37,6 +38,26 @@ RefPtr<GridSizeInfo> ParseBreakpoints(const RefPtr<BreakPoints>& breakpoints)
 
 } // namespace
 
+GridSizeType GridContainerUtils::ProcessGridSizeType(const RefPtr<V2::BreakPoints>& breakpoints, const Size& size)
+{
+    auto threshold = ParseBreakpoints(breakpoints);
+    double windowWidth = 0.0;
+    if (breakpoints->reference == BreakPointsReference::WindowSize) {
+        windowWidth = GridSystemManager::GetInstance().GetScreenWidth();
+    } else {
+        windowWidth = size.Width();
+    }
+    auto context = NG::PipelineContext::GetCurrentContext();
+    int index = 0;
+    for (const auto& cur : threshold->sizeInfo) {
+        if (context->NormalizeToPx(cur) > windowWidth) {
+            break;
+        }
+        index++;
+    }
+    return static_cast<GridSizeType>(index);
+}
+
 GridSizeType GridContainerUtils::ProcessGridSizeType(
     const RefPtr<BreakPoints>& breakpoints, const Size& size, const RefPtr<PipelineContext>& pipeline)
 {
@@ -57,26 +78,31 @@ GridSizeType GridContainerUtils::ProcessGridSizeType(
     return static_cast<GridSizeType>(index);
 }
 
-std::pair<Dimension, Dimension> GridContainerUtils::ProcessGutter(GridSizeType sizeType, const RefPtr<Gutter>& gutter)
+std::pair<Dimension, Dimension> GridContainerUtils::ProcessGutter(GridSizeType sizeType, const Gutter& gutter)
 {
     switch (sizeType) {
         case GridSizeType::XS:
-            return std::pair<Dimension, Dimension>(gutter->xXs, gutter->yXs);
+            return std::pair<Dimension, Dimension>(gutter.xXs, gutter.yXs);
         case GridSizeType::SM:
-            return std::pair<Dimension, Dimension>(gutter->xSm, gutter->ySm);
+            return std::pair<Dimension, Dimension>(gutter.xSm, gutter.ySm);
         case GridSizeType::MD:
-            return std::pair<Dimension, Dimension>(gutter->xMd, gutter->yMd);
+            return std::pair<Dimension, Dimension>(gutter.xMd, gutter.yMd);
         case GridSizeType::LG:
-            return std::pair<Dimension, Dimension>(gutter->xLg, gutter->yLg);
+            return std::pair<Dimension, Dimension>(gutter.xLg, gutter.yLg);
         case GridSizeType::XL:
-            return std::pair<Dimension, Dimension>(gutter->xXl, gutter->yXl);
+            return std::pair<Dimension, Dimension>(gutter.xXl, gutter.yXl);
         case GridSizeType::XXL:
-            return std::pair<Dimension, Dimension>(gutter->xXXl, gutter->yXXl);
+            return std::pair<Dimension, Dimension>(gutter.xXXl, gutter.yXXl);
         default:
-            return std::pair<Dimension, Dimension>(gutter->xXs, gutter->yXs);
+            return std::pair<Dimension, Dimension>(gutter.xXs, gutter.yXs);
     }
 }
 
+std::pair<Dimension, Dimension> GridContainerUtils::ProcessGutter(GridSizeType sizeType, const RefPtr<Gutter>& gutter)
+{
+    return ProcessGutter(sizeType, *gutter);
+}
+
 int32_t GridContainerUtils::ProcessColumn(GridSizeType sizeType, const RefPtr<GridContainerSize>& columnNum)
 {
     switch (sizeType) {
@@ -97,12 +123,11 @@ int32_t GridContainerUtils::ProcessColumn(GridSizeType sizeType, const RefPtr<Gr
     }
 }
 
-double GridContainerUtils::ProcessColumnWidth(
-    const std::pair<double, double>& gutter, int32_t columnNum, const Size& size)
+double GridContainerUtils::ProcessColumnWidth(const std::pair<double, double>& gutter, int32_t columnNum, double width)
 {
     auto xGutter = gutter.first;
     if (columnNum != 0) {
-        return (size.Width() - (columnNum - 1) * xGutter) / columnNum;
+        return (width - (columnNum - 1) * xGutter) / columnNum;
     }
     return 0.0;
 }
diff --git a/frameworks/core/components_v2/grid_layout/grid_container_utils.h b/frameworks/core/components_v2/grid_layout/grid_container_utils.h
index b65bdc5e23988a485867f2830ac814aa1e452141..454e16f0d6838710d26a0b68af55b7a3d9b2f1f4 100644
--- a/frameworks/core/components_v2/grid_layout/grid_container_utils.h
+++ b/frameworks/core/components_v2/grid_layout/grid_container_utils.h
@@ -31,12 +31,14 @@ class GridContainerUtils : public AceType {
 public:
     ~GridContainerUtils() override = default;
 
+    static GridSizeType ProcessGridSizeType(const RefPtr<V2::BreakPoints>& breakpoints, const Size& size);
     static GridSizeType ProcessGridSizeType(
         const RefPtr<BreakPoints>& breakpoints, const Size& size, const RefPtr<PipelineContext>& pipeline);
     static std::pair<Dimension, Dimension> ProcessGutter(GridSizeType sizeType, const RefPtr<Gutter>& gutter);
+    static std::pair<Dimension, Dimension> ProcessGutter(GridSizeType sizeType, const Gutter& gutter);
 
     static int32_t ProcessColumn(GridSizeType sizeType, const RefPtr<GridContainerSize>& columnNum);
-    static double ProcessColumnWidth(const std::pair<double, double>& gutter, int32_t columnNum, const Size& size);
+    static double ProcessColumnWidth(const std::pair<double, double>& gutter, int32_t columnNum, double size);
 };
 } // namespace OHOS::Ace::V2
 #endif // FOUNDATION_ACE_FRAMEWORKS_CORE_COMPONENTS_V2_GRID_LAYOUT_GRID_COL_UTILS_H
\ No newline at end of file
diff --git a/frameworks/core/components_v2/grid_layout/render_grid_row.cpp b/frameworks/core/components_v2/grid_layout/render_grid_row.cpp
index ec39dbd6724a5da14365e89c570363d8cd968003..3e220e8bf13f829d5c9955eec14d851e7cd8016d 100644
--- a/frameworks/core/components_v2/grid_layout/render_grid_row.cpp
+++ b/frameworks/core/components_v2/grid_layout/render_grid_row.cpp
@@ -139,7 +139,7 @@ void RenderGridRow::PerformLayout()
     auto gutter = GridContainerUtils::ProcessGutter(sizeType, component->GetGutter());
     auto gutterInDouble = std::make_pair<double, double>(NormalizeToPx(gutter.first), NormalizeToPx(gutter.second));
     int32_t columnNum = GridContainerUtils::ProcessColumn(sizeType, component->GetTotalCol());
-    double columnUnitWidth = GridContainerUtils::ProcessColumnWidth(gutterInDouble, columnNum, maxSize);
+    double columnUnitWidth = GridContainerUtils::ProcessColumnWidth(gutterInDouble, columnNum, maxSize.Width());
     LayoutEachChild(columnUnitWidth, maxSize.Height(), gutterInDouble.first, sizeType, columnNum);
     int32_t offset = 0;
     Offset rowPosition;