محاكي CSS Grid التفاعلي الشامل

Display:

Grid Template Columns:

Grid Template Rows:

Grid Template Areas:

Justify Content:

Align Content:

Justify Items:

Align Items:

Gap:

10px

انقر على عنصر لتحديده

Grid Column:

Grid Row:

Grid Area:

Justify Self:

Align Self:

إظهار خطوط الشبكة

إظهار أرقام الخطوط

حركة التغييرات

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