diff --git a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
index cf71c5d..5a6f82a 100644
--- a/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
+++ b/ComponentPractice/ComponentPractice/Components/Layout/NavMenu.razor
@@ -35,6 +35,7 @@
+
diff --git a/ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor b/ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor
new file mode 100644
index 0000000..eaa4861
--- /dev/null
+++ b/ComponentPractice/ComponentPractice/Components/Pages/LayoutColumn.razor
@@ -0,0 +1,196 @@
+@page "/layoutcolumn"
+
+
+
+
+ Auto-layout columns
+
+
+ If Column size is not specified, the column width is automatically calculated with the available space.
+
+
+
+ Col 1 of 4
+
+
+ Col 2 of 4
+
+
+ Col 3 of 4
+
+
+ Col 4 of 4
+
+
+
+
+
+ Column sizes
+
+
+ When setting column size, make sure that the totoal sum of all column sizes is not greater than 12. Otherwise, columns might be wrapped.
+
+ One column with predefined size
+
+
+ Size="4"
+
+
+ Auto
+
+
+ Auto
+
+
+ All columns with a predefined size
+
+
+ Size="4"
+
+
+ Size="5"
+
+
+ Size="3"
+
+
+
+
+
+ Responsive column sizes
+
+
+ Column adapts to the predefined breakpoint sizes.
+
+
+
+ Size="12" SizeXS="12" SizeSM="9" SizeMD="7" SizeLG="5" SizeXL="3" SizeXX="1"
+
+
+
+
+
+ Column wrapping
+
+
+ If the totoal sum of all column sizes is greater than 12, columns might be wrapped. Use RowGap property to specify the vertical spacing.
+
+
+
+ Size="12" SizeXS="12" SizeSM="9" SizeMD="7" SizeLG="5" SizeXL="3" SizeXX="1"
+
+
+
+
+
+ Column Offset
+
+
+ The Offset property moves the column to the right.
+
+
+
+ Size="6" Offset="3"
+
+
+
+
+
+ Nested Layout
+
+
+ The rows and columns can be nested.
+
+ Auto-layout columns
+
+
+ Level 1
+
+
+
+
+ Level2-1
+
+
+
+
+ Level3-1
+
+
+ Level3-2
+
+
+
+
+ Level2-2
+
+
+
+
+
+ Columns with a predefined size
+
+
+ Size="3"
+
+
+ AutoSize
+
+
+ Size="3"
+
+
+ Size="6"
+
+
+ Size="6"
+
+
+ Size="6"
+
+
+
+
+ Size="3"
+
+
+
+
+
+
+
+ Gutters
+
+
+ Spacing between columns can be controlled by setting the Gap property of the parent RadzenRow component.
+
+
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+ 10
+ 11
+ 12
+
+
+ Col 1 of 3
+ Col 2 of 3
+ Col 3 of 3
+
+
+
+@code {
+
+}
diff --git a/ComponentPractice/ComponentPractice/wwwroot/app.css b/ComponentPractice/ComponentPractice/wwwroot/app.css
index 2bd9b78..d7ad8e2 100644
--- a/ComponentPractice/ComponentPractice/wwwroot/app.css
+++ b/ComponentPractice/ComponentPractice/wwwroot/app.css
@@ -48,4 +48,4 @@ h1:focus {
.darker-border-checkbox.form-check-input {
border-color: #929292;
-}
+}
\ No newline at end of file