- ตัวดำเนินการ
-
เรียนรู้
ศูนย์การเรียนรู้ Python ตัวอย่างที่รันได้, NumPy, pandas และอื่น ๆ ศูนย์การเรียนรู้ C และ C++ พอยน์เตอร์ หน่วยความจำ STL และ C++ สมัยใหม่ ศูนย์การเรียนรู้ C#พื้นฐาน C#, OOP, LINQ, async และแบบฝึกหัด .NET อัลกอริทึม Python การค้นหา การเรียงลำดับ รีเคอร์ชัน และภาพจำลอง O(n) อัลกอริทึม C และ C++ เปรียบเทียบการเขียนด้วย C และ C++
- โจทย์
CSS and design
CSS Grid Generator
Design a CSS grid by drawing items on it, and get clean grid-template and grid-area code.
- Runs in your browser
- Instant results
- Free, no sign-up
Loading the tool…
How to use the CSS Grid Generator
- Set the number of columns and rows, their sizes and the gaps.
- Drag across empty cells to add an item; click × to remove one.
- Copy the CSS and HTML.
Frequently asked questions
What does 1fr mean?
One fraction of the free space. Three 1fr columns share the width equally.
What does grid-area: 1 / 1 / 2 / 3 mean?
Row start / column start / row end / column end, counted in grid lines, so the item spans the first two columns of row 1.
Can items overlap?
Yes. CSS grid allows it; the item that comes later in the HTML is drawn on top.
ฝึก Python ด้วยโจทย์เขียนโค้ด
แก้โจทย์จริงใน editor นี้: รันทดสอบตัวอย่าง ส่งคำตอบ และรับรีวิวโค้ดจาก AI