tailwind container & grid

mr-wildcard · May 2, 2024 · 5ae806f · 5ae806f
1 parent a34baa7
commit 5ae806f
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 6 deletions.
diff --git a/src/components/@common/Grid.astro b/src/components/@common/Grid.astro
@@ -13,11 +13,11 @@ const { as: HTMLTag = "div", class: cssClasses, ...props } = Astro.props;
 <HTMLTag
   class:list={[
     "grid",
-    "gap-x-5",
-    "grid-cols-6",
-    "lg:gap-x-8",
+    "grid-cols-4",
+    "gap-x-2.5",
+    "sm:grid-cols-8",
+    "sm:gap-x-5",
     "lg:grid-cols-12",
-    "responsive-wrapper",
     cssClasses,
   ]}
   {...props}

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,12 +1,19 @@
 ---
 import MainLayout from "layouts/main.astro";
+import Grid from "components/@common/Grid.astro";
 ---
 
 <MainLayout
-  title="Home sweet home"
+  title="Home"
   description="Page description"
   og_title="Open Graph Title"
   og_description="Open Graph Description"
 >
-  <p class="body-normal">Hey</p>
+  <div class="container">
+    <Grid>
+      <div class="bg-neutral3 col-span-full">
+        <div>Hey</div>
+      </div>
+    </Grid>
+  </div>
 </MainLayout>
diff --git a/src/styles/base.css b/src/styles/base.css
@@ -28,6 +28,23 @@
 }
 
 @layer utilities {
+  .container {
+    margin: 0 auto;
+    max-width: calc(100% - 40px);
+
+    @screen lg {
+      max-width: 904px;
+    }
+
+    @screen xl {
+      max-width: 1160px;
+    }
+
+    @screen 2xl {
+      max-width: 1320px;
+    }
+  }
+
   .display-large-highlight {
     font-size: 36px;
     line-height: 120%;