diff --git a/packages/svelte-lexical/src/global.css b/packages/svelte-lexical/src/global.css
index 122c1d5d..ccfc3668 100644
--- a/packages/svelte-lexical/src/global.css
+++ b/packages/svelte-lexical/src/global.css
@@ -464,6 +464,10 @@ i.poll {
   background-image: url(/images/icons/card-checklist.svg);
 }
 
+i.columns {
+  background-image: url(images/icons/3-columns.svg);
+}
+
 i.tweet {
   background-image: url(/images/icons/tweet.svg);
 }
diff --git a/packages/svelte-lexical/src/lib/components/generic/dialog/ModalDialog.svelte b/packages/svelte-lexical/src/lib/components/generic/dialog/ModalDialog.svelte
index bb567d30..69dc0c44 100644
--- a/packages/svelte-lexical/src/lib/components/generic/dialog/ModalDialog.svelte
+++ b/packages/svelte-lexical/src/lib/components/generic/dialog/ModalDialog.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
   export let showModal: boolean;
+  export let stopPropagation = true;
 
   let dialog: HTMLDialogElement;
 
@@ -18,10 +19,17 @@
   bind:this={dialog}
   on:close={() => (showModal = false)}
   on:click|self={() => dialog.close()}>
-  <!-- svelte-ignore a11y-no-static-element-interactions -->
-  <div on:click|stopPropagation>
-    <slot />
-  </div>
+  {#if stopPropagation}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div on:click|stopPropagation>
+      <slot />
+    </div>
+  {:else}
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div on:click>
+      <slot />
+    </div>
+  {/if}
 </dialog>
 
 <style>
diff --git a/packages/svelte-lexical/src/lib/components/toolbar/InsertDropDown/InsertColumnLayoutDropDownItem.svelte b/packages/svelte-lexical/src/lib/components/toolbar/InsertDropDown/InsertColumnLayoutDropDownItem.svelte
new file mode 100644
index 00000000..98765052
--- /dev/null
+++ b/packages/svelte-lexical/src/lib/components/toolbar/InsertDropDown/InsertColumnLayoutDropDownItem.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+  import DropDownItem from '../../generic/dropdown/DropDownItem.svelte';
+</script>
+
+<DropDownItem on:click class="item">
+  <i class="icon columns" />
+  <span class="text">Columns Layout</span>
+</DropDownItem>
diff --git a/packages/svelte-lexical/src/lib/components/toolbar/dialogs/InsertColumnsDialog.svelte b/packages/svelte-lexical/src/lib/components/toolbar/dialogs/InsertColumnsDialog.svelte
new file mode 100644
index 00000000..bd4f96fe
--- /dev/null
+++ b/packages/svelte-lexical/src/lib/components/toolbar/dialogs/InsertColumnsDialog.svelte
@@ -0,0 +1,81 @@
+<script lang="ts">
+  import {getActiveEditor} from '$lib/core/composerContext.js';
+  import {getCommands} from '$lib/core/commands.js';
+  import {getEditor} from '$lib/core/composerContext.js';
+  import CloseCircleButton from '../../generic/button/CloseCircleButton.svelte';
+  import ModalDialog from '../../generic/dialog/ModalDialog.svelte';
+  import {INSERT_LAYOUT_COMMAND} from '../../../core/plugins/ColumnsLayout/LayoutItemNode.js';
+  import DropDownItem from '../../generic/dropdown/DropDownItem.svelte';
+  import DropDown from '../../generic/dropdown/DropDown.svelte';
+
+  const editor = getEditor();
+  const activeEditor = getActiveEditor();
+
+  export let showModal = false;
+  export function open() {
+    showModal = true;
+  }
+
+  function close() {
+    showModal = false;
+    getCommands().FocusEditor.execute(editor);
+  }
+
+  const LAYOUTS = [
+    {label: '2 columns (equal width)', value: '1fr 1fr'},
+    {label: '2 columns (25% - 75%)', value: '1fr 3fr'},
+    {label: '3 columns (equal width)', value: '1fr 1fr 1fr'},
+    {label: '3 columns (25% - 50% - 25%)', value: '1fr 2fr 1fr'},
+    {label: '4 columns (equal width)', value: '1fr 1fr 1fr 1fr'},
+  ];
+
+  let currentLabel = LAYOUTS[0].label;
+  let currentValue = LAYOUTS[0].value;
+  const handleClick = (label: string, value: string) => {
+    currentLabel = label;
+    currentValue = value;
+  };
+</script>
+
+<ModalDialog bind:showModal stopPropagation={false}>
+  <CloseCircleButton on:click={close} />
+
+  <div class="modal">
+    <h2 class="Modal__title">Insert Columns Layout</h2>
+    <div class="Modal__content">
+      <DropDown
+        buttonClassName="toolbar-item spaced"
+        buttonLabel={currentLabel}
+        buttonAriaLabel="Insert specialized editor node"
+        buttonIconClassName="">
+        {#each LAYOUTS as layout}
+          <DropDownItem
+            class={`item ${currentLabel === layout.label ? 'active dropdown-item-active' : ''}`}
+            on:click={() => {
+              handleClick(layout.label, layout.value);
+            }}>
+            <span class="text">{layout.label}</span>
+          </DropDownItem>
+        {/each}
+      </DropDown>
+
+      <div class="ToolbarPlugin__dialogActions">
+        <button
+          data-test-id="image-modal-file-upload-btn"
+          class="Button__root"
+          on:click={() => {
+            $activeEditor.dispatchCommand(INSERT_LAYOUT_COMMAND, currentValue);
+            close();
+          }}>
+          Insert
+        </button>
+      </div>
+    </div>
+  </div>
+</ModalDialog>
+
+<style>
+  .modal {
+    width: 20em;
+  }
+</style>
diff --git a/packages/svelte-lexical/src/lib/core/plugins/ColumnsLayout/ColumnLayoutPlugin.svelte b/packages/svelte-lexical/src/lib/core/plugins/ColumnsLayout/ColumnLayoutPlugin.svelte
new file mode 100644
index 00000000..c0aa7f21
--- /dev/null
+++ b/packages/svelte-lexical/src/lib/core/plugins/ColumnsLayout/ColumnLayoutPlugin.svelte
@@ -0,0 +1,204 @@
+<script lang="ts">
+  import type {ElementNode, LexicalNode} from 'lexical';
+
+  import {getEditor} from '../../composerContext.js';
+
+  import {
+    $findMatchingParent as findMatchingParent,
+    $insertNodeToNearestRoot as insertNodeToNearestRoot,
+    mergeRegister,
+  } from '@lexical/utils';
+  import {
+    $createParagraphNode as createParagraphNode,
+    $getNodeByKey as getNodeByKey,
+    $getSelection as getSelection,
+    $isRangeSelection as isRangeSelection,
+    COMMAND_PRIORITY_EDITOR,
+    COMMAND_PRIORITY_LOW,
+    KEY_ARROW_DOWN_COMMAND,
+    KEY_ARROW_LEFT_COMMAND,
+    KEY_ARROW_RIGHT_COMMAND,
+    KEY_ARROW_UP_COMMAND,
+  } from 'lexical';
+  import {onMount} from 'svelte';
+
+  import {
+    $createLayoutContainerNode as createLayoutContainerNode,
+    $isLayoutContainerNode as isLayoutContainerNode,
+    LayoutContainerNode,
+  } from './LayoutContainerNode.js';
+  import {
+    $createLayoutItemNode as createLayoutItemNode,
+    $isLayoutItemNode as isLayoutItemNode,
+    LayoutItemNode,
+    INSERT_LAYOUT_COMMAND,
+    UPDATE_LAYOUT_COMMAND,
+  } from './LayoutItemNode.js';
+
+  const editor = getEditor();
+
+  onMount(() => {
+    if (!editor.hasNodes([LayoutContainerNode, LayoutItemNode])) {
+      throw new Error(
+        'LayoutPlugin: LayoutContainerNode, or LayoutItemNode not registered on editor',
+      );
+    }
+
+    const $onEscape = (before: boolean) => {
+      const selection = getSelection();
+      if (
+        isRangeSelection(selection) &&
+        selection.isCollapsed() &&
+        selection.anchor.offset === 0
+      ) {
+        const container = findMatchingParent(
+          selection.anchor.getNode(),
+          isLayoutContainerNode,
+        );
+
+        if (isLayoutContainerNode(container)) {
+          const parent = container.getParent<ElementNode>();
+          const child =
+            parent &&
+            (before
+              ? parent.getFirstChild<LexicalNode>()
+              : parent?.getLastChild<LexicalNode>());
+          const descendant = before
+            ? container.getFirstDescendant<LexicalNode>()?.getKey()
+            : container.getLastDescendant<LexicalNode>()?.getKey();
+
+          if (
+            parent !== null &&
+            child === container &&
+            selection.anchor.key === descendant
+          ) {
+            if (before) {
+              container.insertBefore(createParagraphNode());
+            } else {
+              container.insertAfter(createParagraphNode());
+            }
+          }
+        }
+      }
+
+      return false;
+    };
+
+    return mergeRegister(
+      // When layout is the last child pressing down/right arrow will insert paragraph
+      // below it to allow adding more content. It's similar what $insertBlockNode
+      // (mainly for decorators), except it'll always be possible to continue adding
+      // new content even if trailing paragraph is accidentally deleted
+      editor.registerCommand(
+        KEY_ARROW_DOWN_COMMAND,
+        () => $onEscape(false),
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        KEY_ARROW_RIGHT_COMMAND,
+        () => $onEscape(false),
+        COMMAND_PRIORITY_LOW,
+      ),
+      // When layout is the first child pressing up/left arrow will insert paragraph
+      // above it to allow adding more content. It's similar what $insertBlockNode
+      // (mainly for decorators), except it'll always be possible to continue adding
+      // new content even if leading paragraph is accidentally deleted
+      editor.registerCommand(
+        KEY_ARROW_UP_COMMAND,
+        () => $onEscape(true),
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        KEY_ARROW_LEFT_COMMAND,
+        () => $onEscape(true),
+        COMMAND_PRIORITY_LOW,
+      ),
+      editor.registerCommand(
+        INSERT_LAYOUT_COMMAND,
+        (template: string) => {
+          editor.update(() => {
+            const container = createLayoutContainerNode(template);
+            const itemsCount = getItemsCountFromTemplate(template);
+
+            for (let i = 0; i < itemsCount; i++) {
+              container.append(
+                createLayoutItemNode().append(createParagraphNode()),
+              );
+            }
+
+            insertNodeToNearestRoot(container);
+            container.selectStart();
+          });
+
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      editor.registerCommand(
+        UPDATE_LAYOUT_COMMAND,
+        ({template, nodeKey}) => {
+          editor.update(() => {
+            const container = getNodeByKey<LexicalNode>(nodeKey);
+
+            if (!isLayoutContainerNode(container)) {
+              return;
+            }
+
+            const itemsCount = getItemsCountFromTemplate(template);
+            const prevItemsCount = getItemsCountFromTemplate(
+              container.getTemplateColumns(),
+            );
+
+            // Add or remove extra columns if new template does not match existing one
+            if (itemsCount > prevItemsCount) {
+              for (let i = prevItemsCount; i < itemsCount; i++) {
+                container.append(
+                  createLayoutItemNode().append(createParagraphNode()),
+                );
+              }
+            } else if (itemsCount < prevItemsCount) {
+              for (let i = prevItemsCount - 1; i >= itemsCount; i--) {
+                const layoutItem = container.getChildAtIndex<LexicalNode>(i);
+
+                if (isLayoutItemNode(layoutItem)) {
+                  layoutItem.remove();
+                }
+              }
+            }
+
+            container.setTemplateColumns(template);
+          });
+
+          return true;
+        },
+        COMMAND_PRIORITY_EDITOR,
+      ),
+      // Structure enforcing transformers for each node type. In case nesting structure is not
+      // "Container > Item" it'll unwrap nodes and convert it back
+      // to regular content.
+      editor.registerNodeTransform(LayoutItemNode, (node) => {
+        const parent = node.getParent<ElementNode>();
+        if (!isLayoutContainerNode(parent)) {
+          const children = node.getChildren<LexicalNode>();
+          for (const child of children) {
+            node.insertBefore(child);
+          }
+          node.remove();
+        }
+      }),
+      editor.registerNodeTransform(LayoutContainerNode, (node) => {
+        const children = node.getChildren<LexicalNode>();
+        if (!children.every(isLayoutItemNode)) {
+          for (const child of children) {
+            node.insertBefore(child);
+          }
+          node.remove();
+        }
+      }),
+    );
+  });
+
+  function getItemsCountFromTemplate(template: string): number {
+    return template.trim().split(/\s+/).length;
+  }
+</script>
diff --git a/packages/svelte-lexical/src/lib/core/plugins/ColumnsLayout/LayoutContainerNode.ts b/packages/svelte-lexical/src/lib/core/plugins/ColumnsLayout/LayoutContainerNode.ts
new file mode 100644
index 00000000..743136c3
--- /dev/null
+++ b/packages/svelte-lexical/src/lib/core/plugins/ColumnsLayout/LayoutContainerNode.ts
@@ -0,0 +1,129 @@
+import type {
+  DOMConversionMap,
+  DOMConversionOutput,
+  DOMExportOutput,
+  EditorConfig,
+  LexicalNode,
+  NodeKey,
+  SerializedElementNode,
+  Spread,
+} from 'lexical';
+
+import {addClassNamesToElement} from '@lexical/utils';
+import {ElementNode} from 'lexical';
+
+export type SerializedLayoutContainerNode = Spread<
+  {
+    templateColumns: string;
+  },
+  SerializedElementNode
+>;
+
+function $convertLayoutContainerElement(
+  domNode: HTMLElement,
+): DOMConversionOutput | null {
+  const styleAttributes = window.getComputedStyle(domNode);
+  const templateColumns = styleAttributes.getPropertyValue(
+    'grid-template-columns',
+  );
+  if (templateColumns) {
+    const node = $createLayoutContainerNode(templateColumns);
+    return {node};
+  }
+  return null;
+}
+
+export class LayoutContainerNode extends ElementNode {
+  __templateColumns: string;
+
+  constructor(templateColumns: string, key?: NodeKey) {
+    super(key);
+    this.__templateColumns = templateColumns;
+  }
+
+  static getType(): string {
+    return 'layout-container';
+  }
+
+  static clone(node: LayoutContainerNode): LayoutContainerNode {
+    return new LayoutContainerNode(node.__templateColumns, node.__key);
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = document.createElement('div');
+    dom.style.gridTemplateColumns = this.__templateColumns;
+    if (typeof config.theme.layoutContainer === 'string') {
+      addClassNamesToElement(dom, config.theme.layoutContainer);
+    }
+    return dom;
+  }
+
+  exportDOM(): DOMExportOutput {
+    const element = document.createElement('div');
+    element.style.gridTemplateColumns = this.__templateColumns;
+    element.setAttribute('data-lexical-layout-container', 'true');
+    return {element};
+  }
+
+  updateDOM(prevNode: LayoutContainerNode, dom: HTMLElement): boolean {
+    if (prevNode.__templateColumns !== this.__templateColumns) {
+      dom.style.gridTemplateColumns = this.__templateColumns;
+    }
+    return false;
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {
+      div: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute('data-lexical-layout-container')) {
+          return null;
+        }
+        return {
+          conversion: $convertLayoutContainerElement,
+          priority: 2,
+        };
+      },
+    };
+  }
+
+  static importJSON(json: SerializedLayoutContainerNode): LayoutContainerNode {
+    return $createLayoutContainerNode(json.templateColumns);
+  }
+
+  isShadowRoot(): boolean {
+    return true;
+  }
+
+  canBeEmpty(): boolean {
+    return false;
+  }
+
+  exportJSON(): SerializedLayoutContainerNode {
+    return {
+      ...super.exportJSON(),
+      templateColumns: this.__templateColumns,
+      type: 'layout-container',
+      version: 1,
+    };
+  }
+
+  getTemplateColumns(): string {
+    return this.getLatest().__templateColumns;
+  }
+
+  setTemplateColumns(templateColumns: string) {
+    this.getWritable().__templateColumns = templateColumns;
+  }
+}
+
+export function $createLayoutContainerNode(
+  templateColumns: string,
+): LayoutContainerNode {
+  return new LayoutContainerNode(templateColumns);
+}
+
+export function $isLayoutContainerNode(
+  node: LexicalNode | null | undefined,
+): node is LayoutContainerNode {
+  return node instanceof LayoutContainerNode;
+}
diff --git a/packages/svelte-lexical/src/lib/core/plugins/ColumnsLayout/LayoutItemNode.ts b/packages/svelte-lexical/src/lib/core/plugins/ColumnsLayout/LayoutItemNode.ts
new file mode 100644
index 00000000..40f7adf0
--- /dev/null
+++ b/packages/svelte-lexical/src/lib/core/plugins/ColumnsLayout/LayoutItemNode.ts
@@ -0,0 +1,75 @@
+import type {
+  DOMConversionMap,
+  EditorConfig,
+  LexicalNode,
+  SerializedElementNode,
+  NodeKey,
+} from 'lexical';
+
+import {ElementNode} from 'lexical';
+import type {LexicalCommand} from 'lexical';
+import {createCommand} from 'lexical';
+import {addClassNamesToElement} from '@lexical/utils';
+
+export type SerializedLayoutItemNode = SerializedElementNode;
+
+export const INSERT_LAYOUT_COMMAND: LexicalCommand<string> = createCommand(
+  'INSERT_LAYOUT_COMMAND',
+);
+
+export const UPDATE_LAYOUT_COMMAND: LexicalCommand<{
+  template: string;
+  nodeKey: NodeKey;
+}> = createCommand<{template: string; nodeKey: NodeKey}>();
+
+export class LayoutItemNode extends ElementNode {
+  static getType(): string {
+    return 'layout-item';
+  }
+
+  static clone(node: LayoutItemNode): LayoutItemNode {
+    return new LayoutItemNode(node.__key);
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = document.createElement('div');
+    if (typeof config.theme.layoutItem === 'string') {
+      addClassNamesToElement(dom, config.theme.layoutItem);
+    }
+    return dom;
+  }
+
+  updateDOM(): boolean {
+    return false;
+  }
+
+  static importDOM(): DOMConversionMap | null {
+    return {};
+  }
+
+  static importJSON(): LayoutItemNode {
+    return $createLayoutItemNode();
+  }
+
+  isShadowRoot(): boolean {
+    return true;
+  }
+
+  exportJSON(): SerializedLayoutItemNode {
+    return {
+      ...super.exportJSON(),
+      type: 'layout-item',
+      version: 1,
+    };
+  }
+}
+
+export function $createLayoutItemNode(): LayoutItemNode {
+  return new LayoutItemNode();
+}
+
+export function $isLayoutItemNode(
+  node: LexicalNode | null | undefined,
+): node is LayoutItemNode {
+  return node instanceof LayoutItemNode;
+}
diff --git a/packages/svelte-lexical/src/lib/index.ts b/packages/svelte-lexical/src/lib/index.ts
index e1dbccfd..aff49156 100644
--- a/packages/svelte-lexical/src/lib/index.ts
+++ b/packages/svelte-lexical/src/lib/index.ts
@@ -21,6 +21,7 @@ export {sanitizeUrl, validateUrl} from './core/plugins/link/url.js';
 export {default as FloatingLinkEditorPlugin} from './core/plugins/link/FloatingLinkEditorPlugin.svelte';
 export {default as CodeHighlightPlugin} from './core/plugins/CodeBlock/CodeHighlightPlugin.svelte';
 export {default as CodeActionMenuPlugin} from './core/plugins/CodeBlock/CodeActionMenuPlugin/CodeActionMenuPlugin.svelte';
+export {default as ColumnLayoutPlugin} from './core/plugins/ColumnsLayout/ColumnLayoutPlugin.svelte';
 
 export {default as MarkdownShortcutPlugin} from './core/plugins/MardownShortcut/MarkdownShortcutPlugin.svelte';
 export {
@@ -58,6 +59,8 @@ export {HashtagNode} from './core/plugins/HashtagNode.js';
 export {AutoLinkNode, LinkNode} from '@lexical/link';
 export {CodeNode, CodeHighlightNode} from '@lexical/code';
 export type {Provider} from '@lexical/yjs';
+export {LayoutContainerNode} from './core/plugins/ColumnsLayout/LayoutContainerNode.js';
+export {LayoutItemNode} from './core/plugins/ColumnsLayout/LayoutItemNode.js';
 
 // toolbar
 export {default as ToolbarRichText} from './components/richtext/ToolbarRichText.svelte';
@@ -95,10 +98,12 @@ export {default as StrikethroughDropDownItem} from './components/toolbar/MoreSty
 export {default as SubscriptDropDownItem} from './components/toolbar/MoreStylesDropDown/SubscriptDropDownItem.svelte';
 export {default as SuperscriptDropDownItem} from './components/toolbar/MoreStylesDropDown/SuperscriptDropDownItem.svelte';
 export {default as ClearFormattingDropDownItem} from './components/toolbar/MoreStylesDropDown/ClearFormattingDropDownItem.svelte';
+export {default as InsertColumnLayoutDropDownItem} from './components/toolbar/InsertDropDown/InsertColumnLayoutDropDownItem.svelte';
 // dialogs
 export {default as InsertImageDialog} from './components/toolbar/dialogs/InsertImageDialog.svelte';
 export {default as InsertImageUploadedDialogBody} from './components/toolbar/dialogs/InsertImageUploadedDialogBody.svelte';
 export {default as InsertImageUriDialogBody} from './components/toolbar/dialogs/InsertImageUriDialogBody.svelte';
+export {default as InsertColumnsDialog} from './components/toolbar/dialogs/InsertColumnsDialog.svelte';
 
 export {getCommands} from './core/commands.js';
 export type {ImagePayload} from './core/plugins/Image/ImageNode.js';
diff --git a/packages/svelte-lexical/src/routes/RichTextComposer.svelte b/packages/svelte-lexical/src/routes/RichTextComposer.svelte
index f59f4474..bd10ecf2 100644
--- a/packages/svelte-lexical/src/routes/RichTextComposer.svelte
+++ b/packages/svelte-lexical/src/routes/RichTextComposer.svelte
@@ -27,6 +27,7 @@
     CodeHighlightNode,
     CodeHighlightPlugin,
     CodeActionMenuPlugin,
+    ColumnLayoutPlugin,
   } from '$lib/index.js';
   import {
     HeadingNode,
@@ -35,6 +36,8 @@
     ListItemNode,
     HorizontalRuleNode,
     ImageNode,
+    LayoutContainerNode,
+    LayoutItemNode,
   } from '$lib/index.js';
   import PlaygroundEditorTheme from './themes/PlaygroundEditorTheme.js';
   import {
@@ -62,6 +65,8 @@
       AutoLinkNode,
       CodeNode,
       CodeHighlightNode,
+      LayoutContainerNode,
+      LayoutItemNode,
     ],
     onError: (error: Error) => {
       throw error;
@@ -134,7 +139,7 @@
           CHECK_LIST,
           LINK,
         ]} />
-
+      <ColumnLayoutPlugin />
       <ActionBar />
     </div>
   </div>
diff --git a/packages/svelte-lexical/src/routes/RichTextToolbar.svelte b/packages/svelte-lexical/src/routes/RichTextToolbar.svelte
index 1fa199b1..15fabb8d 100644
--- a/packages/svelte-lexical/src/routes/RichTextToolbar.svelte
+++ b/packages/svelte-lexical/src/routes/RichTextToolbar.svelte
@@ -26,8 +26,11 @@
   import {InsertImageDialog} from '../lib/index.js';
   import {InsertHRDropDownItem} from '../lib/index.js';
   import {InsertImageDropDownItem} from '../lib/index.js';
+  import {InsertColumnLayoutDropDownItem} from '../lib/index.js';
+  import {InsertColumnsDialog} from '../lib/index.js';
 
   let imageDialog: InsertImageDialog;
+  let columnsDialog: InsertColumnsDialog;
 </script>
 
 <Toolbar let:editor let:activeEditor let:blockType>
@@ -61,9 +64,11 @@
   <InsertDropDown>
     <InsertHRDropDownItem />
     <InsertImageDropDownItem on:click={() => imageDialog.open()} />
+    <InsertColumnLayoutDropDownItem on:click={() => columnsDialog.open()} />
   </InsertDropDown>
   <Divider />
   <DropDownAlign />
   <!-- dialogs -->
   <InsertImageDialog bind:this={imageDialog} />
+  <InsertColumnsDialog bind:this={columnsDialog} />
 </Toolbar>
diff --git a/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.css b/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.css
index 4e5b551e..82ae6754 100644
--- a/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.css
+++ b/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.css
@@ -6,6 +6,15 @@
  *
  *
  */
+.PlaygroundEditorTheme__layoutContainer {
+  display: grid;
+  gap: 10px;
+  margin: 10px 0;
+}
+.PlaygroundEditorTheme__layoutItem {
+  border: 1px dashed #ddd;
+  padding: 8px 16px;
+}
 .PlaygroundEditorTheme__ltr {
   text-align: left;
 }
diff --git a/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.js b/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.js
index ffc3adf7..e781fb4b 100644
--- a/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.js
+++ b/packages/svelte-lexical/src/routes/themes/PlaygroundEditorTheme.js
@@ -9,6 +9,8 @@
 import './PlaygroundEditorTheme.css';
 
 const theme = {
+  layoutContainer: 'PlaygroundEditorTheme__layoutContainer',
+  layoutItem: 'PlaygroundEditorTheme__layoutItem',
   blockCursor: 'PlaygroundEditorTheme__blockCursor',
   characterLimit: 'PlaygroundEditorTheme__characterLimit',
   code: 'PlaygroundEditorTheme__code',