เครื่องสร้าง 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

💬 User Feedback

How to Use

Enter or paste your data in the input field
Configure any options if available
Click the action button to process
Copy the result to your clipboard

Use Cases

Development and debugging workflows
Data format conversion
Code generation and formatting
Quick calculations and validation

FAQ

Is this Css Grid Generator tool free to use?

Yes, the Css Grid Generator tool is completely free. No registration or payment required.

Is my data secure?

Absolutely. All processing happens client-side in your browser. Your data never leaves your device or is sent to any server.

What formats does the Css Grid Generator tool support?

The tool supports all standard formats for CSS styling and formatting. Check the tool interface for specific format options.