เครื่องสร้าง CSS Grid

ตัวสร้างเลย์เอาต์ CSS Grid แบบวิชวล

พรีเซ็ต:

คอลัมน์ (3)

แถว (2)

ช่องว่างคอลัมน์: 16pxช่องว่างแถว: 16px

จัดแนวจัดแนว

ตัวอย่าง

CSS

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 16px;
}

.grid-item {
  padding: 16px;
  background: #e2e8f0;
  border-radius: 8px;
}

HTML

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
  <div class="grid-item">5</div>
  <div class="grid-item">6</div>
</div>

เครื่องสร้าง CSS Grid ฟรี

สร้างเลย์เอาต์ CSS Grid แบบวิชวล

อ้างอิง

คุณสมบัติ	คำอธิบาย	ตัวอย่าง
grid-template-columns	คอลัมน์	1fr 1fr 1fr
grid-template-rows	แถว	auto 1fr auto
gap	ช่องว่าง	16px
justify-items	แนวนอน	stretch
align-items	แนวตั้ง	stretch

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

CSS Grid คืออะไร?

CSS Grid เป็นระบบเลย์เอาต์สองมิติ

Grid vs Flexbox?

Grid เป็น 2D, Flexbox เป็น 1D

"fr" หมายถึงอะไร?

"fr" แทนสัดส่วนของพื้นที่ที่มี

รองรับเบราว์เซอร์?

ใช่ ทุกเบราว์เซอร์สมัยใหม่

Grid และ Flexbox ด้วยกัน?

ใช่ เสริมซึ่งกันและกัน

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

CSS Flexbox Generator CSS Gradient Generator CSS Shadow Generator Em/Px Converter

𝕏 Twitter in LinkedIn

ให้คะแนนเครื่องมือนี้

3.6 / 5 · 47 คะแนน

เครื่องมือเพิ่มเติม

📐CSS Flexbox Generator 🌈CSS Gradient Generator 📐Em/Px Converter

อัปเดตข่าวสาร

รับเคล็ดลับการพัฒนาและเครื่องมือใหม่ทุกสัปดาห์

ไม่มีสแปม ยกเลิกได้ตลอดเวลา

Enjoy these free tools?

☕Buy Me a Coffee