diff --git a/content/index.md b/content/index.md
index d2f9188..d8406f2 100644
--- a/content/index.md
+++ b/content/index.md
@@ -4,6 +4,15 @@
 
 ## 示例
 
+::::{.flex.gap-4}
+:::{.flex-1}
+blah
+:::
+:::{.flex-1}
+bler
+:::
+::::
+
 ### 骰子组件
 
 点击下面的骰子来掷骰：
diff --git a/src/styles.css b/src/styles.css
index cbe0bec..6376df5 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -5,6 +5,8 @@
     @apply prose-h2:first:mt-0 prose-h3:first:mt-0 prose-h4:first:mt-0 prose-h5:first:mt-0;
 }
 
+/*alert*/
+
 .markdown-alert-title{
     @apply hidden;
 }
@@ -40,4 +42,13 @@
 
 .markdown-alert-caution {
     @apply bg-orange-50 border-orange-500;
-}
\ No newline at end of file
+}
+
+/* cols */
+
+.cols{ @apply lg:flex lg:gap-4; }
+.col{ @apply lg:flex-1; }
+.col-2{ @apply lg:flex-2; }
+.col-3{ @apply lg:flex-3; }
+.col-4{ @apply lg:flex-4; }
+.col-5{ @apply lg:flex-5; }
\ No newline at end of file