ساخت CSS Grid

گرید بصری با ستون، ردیف و gap دلخواه بسازید، خانه‌ها را برای ادغام کلیک کنید و کد grid-template را کپی کنید.

ستون‌ها: 4

ردیف‌ها: 3

gap: 10px

واحد اندازه ستون

روی چند خانه کلیک کنید تا انتخاب شوند، سپس «ادغام» بزنید تا با grid-column/row span ترکیب شوند.

کد CSS

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 10px;
}

ابزار ساخت CSS Grid چیدمان شبکه‌ای دوبعدی را با محیط بصری می‌سازد. طراحی گرید حرفه‌ای بدون حفظ‌کردن خصوصیات.

ستون‌ها، ردیف‌ها و فاصله (gap) را تنظیم کنید، خانه‌ها را برای ادغام کلیک کنید و کد grid-template را کپی کنید.

CSS Grid برای چیدمان دوبعدی که هم‌زمان ردیف و ستون دارد قدرتمندترین ابزار است و این محیط بصری کار با آن را ساده می‌کند.

توسعه‌دهندگان فرانت‌اند برای چیدمان صفحه و گالری از این ابزار استفاده می‌کنند. برای چیدمان یک‌بعدی از ساخت Flexbox کمک بگیرید.

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

CSS Grid چیست؟

CSS Grid سیستم چیدمان دوبعدی است که به شما اجازه می‌دهد عناصر را هم‌زمان در ردیف‌ها و ستون‌ها بچینید.

gap در گرید چه می‌کند؟

gap فاصله‌ی بین خانه‌های گرید را تعیین می‌کند بدون اینکه لازم باشد به هر خانه margin بدهید.

چطور چند خانه را ادغام کنم؟

با تعیین اینکه یک آیتم چند ستون یا ردیف را بگیرد، می‌توانید خانه‌ها را ادغام کنید؛ این ابزار کد آن را می‌سازد.