สร้าง CSS Grid
เครื่องมือสร้าง CSS Grid ออนไลน์ฟรี กำหนดแถว คอลัมน์ และช่องว่างด้วยตัวแก้ไขภาพ สร้างโค้ดเลย์เอาต์อัตโนมัติ คัดลอกทันที
เครื่องมือสร้าง CSS Grid เป็นเครื่องมือออนไลน์ฟรีที่ออกแบบเลย์เอาต์กริดแบบเห็นภาพ ตั้งค่าแถว คอลัมน์ gap และตำแหน่งเซลล์ด้วยการลาก สร้างโค้ด CSS Grid อัตโนมัติ ดูตัวอย่างเรียลไทม์ ประมวลผลในเบราว์เซอร์ ฟรี
1
2
3
4
5
6
7
8
9
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 10px;
justify-items: stretch;
align-items: stretch;
}
โค้ด HTML
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
lock ไฟล์จะไม่ถูกส่งไปยังเซิร์ฟเวอร์