แปลงฟรี

CSS กริด เครื่องกำเนิดเค้าโครง

สร้างเค้าโครง CSS Grid ด้วยสายตาพร้อมการแสดงตัวอย่างสด ปรับเทมเพลตตารางกริด คอลัมน์ แถว ช่องว่าง จัดเรียงรายการ จัดเรียงรายการ และอื่นๆ ได้ฟรีและฝั่งไคลเอ็นต์

ดูตัวอย่างสด
1
2
3
4
5
6
คอลัมน์ (repeat(3, 1fr))
แถว (repeat(2, 1fr))
คอลัมน์ช่องว่าง (12px)
0px16px32px
แถวช่องว่าง (12px)
0px16px32px
จัดชิดขอบรายการ
จัดรายการ
เอาต์พุต CSS
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  column-gap: 12px;
  row-gap: 12px;
  justify-items: stretch;
  align-items: stretch;
}

.item {
  padding: 1rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  text-align: center;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

เกี่ยวกับเครื่องมือนี้

สร้างและปรับแต่งเนื้อหาด้วย Css Grid Generator โดยตรงในเบราว์เซอร์ของคุณ กำหนดการตั้งค่าของคุณ สร้างเอาต์พุต และดาวน์โหลดหรือคัดลอกผลลัพธ์ ทุกอย่างทำงานฝั่งไคลเอ็นต์ — ข้อมูลของคุณยังคงเป็นส่วนตัวและประมวลผลได้ทันที

วิธีใช้งาน

  1. กำหนดการตั้งค่าและตัวเลือกให้ตรงกับความต้องการของคุณ
  2. คลิกสร้างเพื่อสร้างเอาต์พุตของคุณ
  3. ดูตัวอย่างผลลัพธ์และทำการปรับเปลี่ยนหากจำเป็น
  4. ดาวน์โหลดไฟล์เอาต์พุตหรือคัดลอกไปยังคลิปบอร์ดของคุณ

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

ฉันสามารถปรับแต่งเอาต์พุตที่สร้างขึ้นได้หรือไม่
ใช่. เครื่องมือนี้มีตัวเลือกการปรับแต่งที่หลากหลายเพื่อปรับแต่งผลลัพธ์ให้ตรงตามความต้องการเฉพาะของคุณ ปรับการตั้งค่าก่อนสร้างหรือสร้างใหม่ด้วยตัวเลือกต่างๆ
เนื้อหาที่สร้างขึ้นใช้งานได้ฟรีหรือไม่?
ใช่. ทุกสิ่งที่คุณสร้างด้วยเครื่องมือนี้เป็นของคุณเพื่อใช้เพื่อวัตถุประสงค์ส่วนตัว การศึกษา หรือเชิงพาณิชย์โดยไม่มีข้อจำกัดหรือข้อกำหนดการระบุแหล่งที่มา
สิ่งนี้จำเป็นต้องมีบัญชีหรือไม่?
ไม่ เครื่องมือนี้พร้อมใช้งานทันทีโดยไม่ต้องสมัคร ไม่มีอีเมล และไม่ต้องลงทะเบียน เพียงเปิดหน้าและเริ่มสร้าง
ข้อมูลอินพุตของฉันถูกเก็บไว้เป็นส่วนตัวหรือไม่?
ใช่. การประมวลผลทั้งหมดเกิดขึ้นในเบราว์เซอร์ของคุณ ข้อมูลอินพุตและเอาต์พุตที่สร้างขึ้นจะไม่ถูกส่งไปยังเซิร์ฟเวอร์ภายนอกใดๆ