Stax
Tools

CSS Grid Generator

Build CSS Grid layouts visually with live preview.

grid-template-columns

grid-template-rows

1
2
3
4
5
6
7
8
9
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  gap: 8px;
}

CSS Grid Generator — สร้าง Layout ที่ซับซ้อนด้วยภาพโดยไม่ต้องจำ syntax

CSS Grid คือระบบจัดวางที่ทรงพลังที่สุดในเบราว์เซอร์ สามารถสร้าง layout 2 มิติที่ซับซ้อนซึ่งก่อนหน้านี้ทำได้เฉพาะด้วย JavaScript หรือเทคนิคแปลกๆ แต่ syntax นั้น — grid-template-columns, grid-template-rows, grid-template-areas, minmax(), repeat(), fr unit — มีเส้นทางการเรียนรู้ที่ชันมาก visual generator นี้ขจัดอุปสรรคนั้น: ตั้งค่า grid ด้วยตัวควบคุมและ copy CSS ที่พร้อมใช้งานทันที

ตั้งจำนวน column และ row ด้วย slider จากนั้นตั้งค่า column template โดยใช้ fr unit input (เช่น 1fr 2fr 1fr สำหรับ layout สามคอลัมน์ที่ตรงกลางกว้างเป็นสองเท่า) ตั้งค่า row template ในลักษณะเดียวกัน จากนั้นปรับ gap ระหว่าง cell ใช้ตัวควบคุม justify-items และ align-items เพื่อตั้งค่าการจัดแนว child เริ่มต้นภายใน cell preview แบบ live แสดง grid พร้อมเลขกำกับ cell เมื่อพอใจแล้ว คลิก Copy CSS เพื่อรับ grid container declaration ที่พร้อมใช้ในโปรเจกต์ของคุณ

CSS Grid เหมาะสำหรับ layout 2 มิติที่ต้องการควบคุมทั้ง row และ column พร้อมกัน — layout ระดับหน้าที่มี header, sidebar, เนื้อหาหลัก และ footer; gallery รูปภาพที่มีขนาด cell สม่ำเสมอ; widget dashboard ที่ต้องการขยายหลาย row หรือ column Flexbox เหมาะกว่าสำหรับ layout 1 มิติ: แถวของ navigation link, กลุ่มปุ่ม หรือฟอร์มที่เรียงซ้อนในแนวตั้ง ทั้งสองระบบประกอบกันได้สวยงาม — ใช้ Grid สำหรับโครงสร้างหน้าและ Flexbox ภายใน grid cell แต่ละอันสำหรับการจัดเนื้อหา

นักพัฒนา front-end ใช้เพื่อ prototype layout หน้าที่ซับซ้อนก่อนนำไปใส่ใน component library หรือ design system นักพัฒนาที่เรียนรู้ Grid เป็นครั้งแรกใช้เพื่อเข้าใจว่า fr unit และ repeat() กระจายพื้นที่อย่างไรด้วยภาพ แทนที่จะพยายามคิดเชิงนามธรรม ผู้สอน CSS ใช้ใน workshop เพื่อสาธิตแนวคิด Grid ด้วย visual feedback ทันที นักออกแบบที่ก้าวสู่การเขียนโค้ดใช้เพื่อ implement layout ที่ออกแบบใน Figma อย่างรวดเร็วโดยไม่ต้องจำ Grid specification ทั้งหมด

generator นี้ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ไม่มีการตั้งค่า layout หรือ CSS output ถูกส่งไปยังเซิร์ฟเวอร์ใดๆ ใช้งานได้อย่างอิสระในโปรเจกต์ของลูกค้าหรือเบื้องหลัง corporate firewall โดยไม่ต้องกังวลเรื่องข้อมูล

คำถามที่พบบ่อย

What is CSS Grid?
CSS Grid is a two-dimensional layout system that lets you create complex web layouts with rows and columns simultaneously. Unlike Flexbox (which is one-dimensional), Grid controls both axes at once, making it ideal for page-level layouts.
What does repeat(3, 1fr) mean?
repeat(3, 1fr) creates 3 equal-width columns where each column takes one fraction of the available space. 1fr means one fraction unit — all three columns share the space equally. You can mix units: repeat(2, 1fr) 200px creates two flexible columns and one fixed 200px column.
What is the difference between grid-gap and gap?
gap is the modern property (previously grid-gap). It sets the space between rows and columns. You can set row and column gaps independently with row-gap and column-gap, or use the shorthand gap: row-gap column-gap.
When should I use Grid vs Flexbox?
Use Grid for two-dimensional layouts (rows AND columns simultaneously) like full page layouts, card grids, and complex dashboards. Use Flexbox for one-dimensional layouts (either rows OR columns) like navigation bars, button groups, and centering.
What does fr unit mean?
fr stands for fraction. It represents a fraction of the available space in the grid container. 1fr 2fr 1fr creates three columns where the middle is twice as wide as the outer ones. fr units are calculated after fixed and auto-sized tracks are resolved.

เครื่องมือที่เกี่ยวข้อง