پرش به محتوای اصلی
LibraTool logoLibraTool

تولیدکننده CSS Grid رایگان

یک CSS grid را بصری طراحی کنید — مسیرها، واحدها و شکاف‌ها — و CSS و HTML تولیدشده را کپی کنید.

پس از بارگذاری آفلاین کار می‌کند
پیش‌تعریف‌ها
ستون‌ها (3)
ردیف‌ها (2)
پیش‌نمایش مستقیم
1
2
3
4
5
6
css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 16px;
}
html
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
</div>

🔒 همه چیز در مرورگرتان اجرا می‌شود — هیچ چیز بارگذاری نمی‌شود.

نحوه کار

یک شبکه CSS را به‌صورت بصری طراحی کنید: تا ۸ ستون و ۸ ردیف اضافه کنید، هر مسیر را روی fr، px، auto یا min/max-content تنظیم کنید، و فاصله‌های ردیف/ستون را تنظیم کنید. پیش‌نمایش زنده شماره‌گذاری‌شده بلافاصله به‌روز می‌شود و CSS grid-template تولیدشده به‌علاوه HTML متناظر با یک کلیک از کلیپ‌بورد شما فاصله دارند.

  1. 1
    شبکه را شکل دهید
    با + و − ستون‌ها و ردیف‌ها را اضافه/حذف کنید.
  2. 2
    مسیرها را تنظیم کنید
    هر ستون و ردیف واحد خودش را می‌گیرد (1fr، 100px، auto…).
  3. 3
    فاصله‌ها را تنظیم کنید
    لغزنده‌های جدا برای row-gap و column-gap.
  4. 4
    کد را کپی کنید
    CSS آماده تولید و اسکلت HTML متناظر آن.

همه‌چیز در مرورگر شما اجرا می‌شود — چیزی آپلود نمی‌شود.

ابزارهای مرتبط

↔️

تولیدکننده CSS Flexbox

با جهت flex، wrap، justify و align روی آیتم‌های مستقیم آزمایش کنید — و CSS را کپی کنید.

امتحان کنید
📐

تولید CSS clamp()

یک مقدار CSS clamp() سیال برای تایپوگرافی و فاصله‌گذاری ریسپانسیو تولید کنید. حداقل/حداکثر اندازه و محدوده viewport را تنظیم کنید، پیش‌نمایش زنده ببینید و CSS یک‌خطی را کپی کنید.

امتحان کنید
📓

کاغذ قابل چاپ — خط‌دار، شطرنجی، نقطه‌ای، ایزومتریک و حامل موسیقی (PDF)

کاغذ دلخواه خود را چاپ کنید: خط‌دار (فاصلهٔ زیاد یا کم)، شطرنجی، نقطه‌ای، ایزومتریک، تمرین خوشنویسی، حامل موسیقی یا یادداشت Cornell، در اندازه‌های A4، Letter، A5 یا Legal، با هر رنگ خط و هر تعداد صفحه که لازم دارید. یک PDF برداری و تیز که در مرورگر شما ساخته می‌شود.

امتحان کنید

سؤالات متداول