diff --git a/examples/container.zig b/examples/container.zig
index cd96a58..8cc75d4 100644
--- a/examples/container.zig
+++ b/examples/container.zig
@@ -23,11 +23,19 @@ pub fn main() !void {
     defer renderer.deinit();
 
     var container = try App.Container.init(allocator, .{
-        .border = .{ .color = .green, .corners = .rounded },
+        .border = .{
+            .color = .green,
+            .corners = .rounded,
+            .separator = .{ .enabled = true },
+        },
+        .layout = .{ .gap = 40 },
     });
     try container.append(try App.Container.init(allocator, .{
         .border = .{ .color = .light_green, .corners = .squared },
     }));
+    try container.append(try App.Container.init(allocator, .{
+        .border = .{ .color = .light_red, .corners = .squared },
+    }));
     defer container.deinit();
 
     // NOTE: should the min-size here be required?
diff --git a/src/container.zig b/src/container.zig
index 73b8ed8..4f98c9f 100644
--- a/src/container.zig
+++ b/src/container.zig
@@ -203,15 +203,27 @@ pub fn Container(comptime Event: type) type {
                     if (this.elements.items.len == 0)
                         break :resize;
 
+                    const sides = this.properties.border.sides;
+                    const gap = this.properties.layout.gap;
                     const len: u16 = @truncate(this.elements.items.len);
-                    const element_cols = @divTrunc(size.cols, len);
-                    const element_rows = @divTrunc(size.rows, len);
+                    const element_cols = blk: {
+                        var cols = size.cols - gap * (len - 1);
+                        if (sides.left) cols -= 1;
+                        if (sides.right) cols -= 1;
+                        break :blk @divTrunc(cols, len);
+                    };
+                    const element_rows = blk: {
+                        var rows = size.rows - gap * (len - 1);
+                        if (sides.top) rows -= 1;
+                        if (sides.bottom) rows -= 1;
+                        break :blk @divTrunc(rows, len);
+                    };
                     var offset: u16 = 0;
                     for (this.elements.items) |*element| {
                         var element_size: Size = undefined;
                         switch (this.properties.layout.direction) {
                             .horizontal => {
-                                var overflow = size.cols % len;
+                                var overflow = size.cols - element_cols * len;
                                 // adjust size according to the containing elements
                                 var cols = element_cols;
                                 if (overflow > 0) {
@@ -227,9 +239,10 @@ pub fn Container(comptime Event: type) type {
                                     .rows = size.rows,
                                 };
                                 offset += cols;
+                                offset += gap;
                             },
                             .vertical => {
-                                var overflow = size.rows % len;
+                                var overflow = size.rows - element_rows * len;
                                 // adjust size according to the containing elements
                                 var rows = element_rows;
                                 if (overflow > 0) {
@@ -245,11 +258,11 @@ pub fn Container(comptime Event: type) type {
                                     .rows = rows,
                                 };
                                 offset += rows;
+                                offset += gap;
                             },
                         }
 
                         // border resizing
-                        const sides = this.properties.border.sides;
                         if (sides.top) {
                             element_size.anchor.row += 1;
                             element_size.rows -|= 1;