-
Trình Thực Thi
Trình biên dịch Python Trình biên dịch C++ Trình biên dịch C Trình biên dịch Matplotlib Trình thông dịch Node.js Trình thông dịch PHP Trình biên dịch C# / .NET Trình biên dịch Rust Ruby Interpreter Trình biên dịch Java Trình biên dịch Go Trình biên dịch Kotlin Trình biên dịch Swift Trình biên dịch TypeScript
-
Học lập trình
Trung tâm học Python Ví dụ chạy được, NumPy, pandas và nhiều nội dung khác Trung tâm học C và C++ Con trỏ, bộ nhớ, STL và C++ hiện đại Trung tâm học C#C# cơ bản, OOP, LINQ, async và bài tập .NET Thuật toán Python Tìm kiếm, sắp xếp, đệ quy và trình mô phỏng O(n) Thuật toán C và C++ So sánh cách cài đặt bằng C và C++
- Thử thách
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.
Luyện Python với thử thách lập trình
Giải các bài tập thực tế ngay trên trình soạn thảo này: chạy kiểm thử mẫu, nộp bài và nhận đánh giá code từ AI.