مولّد CSS Grid

Q: كيف أجعل عنصراً يمتد بكامل العرض؟

اضبط grid-column على `1 / -1`؛ و-1 يشير إلى آخر خط في الشبكة.

ابنِ تخطيطات CSS Grid بصرياً: grid-template-columns/rows ومناطق مسماة مع تحقق وفجوات ومحاذاة وتموضع كل عنصر. انسخ CSS نظيفاً.

إعدادات جاهزة

الحاوية

grid-template-columns

grid-template-rows

grid-template-areas

سطر لكل صف، والأسماء مفصولة بمسافات، ونقطة (.) للخلية الفارغة. يجب أن يشكّل كل اسم مستطيلًا.

column-gappx

row-gappx

justify-items

align-items

عدد العناصر

العنصر 1

اختر عنصرًا من هنا أو انقر عليه في المعاينة.

grid-column

grid-row

grid-area

أمثلة: 1 / 3 و span 2 و 2 / -1. اسم المنطقة يتجاوز التموضع بالخطوط.

معاينة

اسحب الزاوية السفلية للمعاينة لتغيير حجم الحاوية.

كود CSS

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

أدوات ذات صلة

عرض الكل

مولّد ظل الصندوق CSS مولّد تدرج CSS مولّد Flexbox CSS مولّد نصف قطر الحدود مولّد Glassmorphism مولّد Neumorphism مولّد ظل النص CSS مولّد حركات CSS

ما هو مولّد Grid CSS؟

منشئ تخطيطات CSS Grid تكتب فيه أي قالب مسارات (مثل repeat(auto-fill, minmax(120px, 1fr))) وترسم مناطق مسماة وتضبط الفجوات والمحاذاة وتضع كل عنصر بأرقام الخطوط أو الامتدادات أو أسماء المناطق. تستخدم المعاينة الحية كود CSS المولَّد.

كيفية استخدام مولّد Grid CSS

ابدأ بإعداد مسبق (3 أعمدة أو بطاقات متجاوبة أو Holy grail أو شريط جانبي أو Bento) أو اكتب grid-template-columns وgrid-template-rows.
اكتب اختيارياً grid-template-areas: سطراً لكل صف وأسماء تفصلها مسافات ونقطة للخلية الفارغة.
اضبط row-gap وcolumn-gap وjustify-items وalign-items وعدد العناصر.
حدّد عنصراً واضبط grid-column وgrid-row (مثل 1 / 3 أو span 2) أو اختر grid-area.
انسخ كود CSS.

مثال

الإدخال

grid-template-columns 200px 1fr, row-gap 8px, column-gap 16px; item 2: grid-column 1 / 3, grid-row span 2

الإخراج

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 8px 16px;
}

.item-2 {
  grid-column: 1 / 3;
  grid-row: span 2;
}

متى تستخدم مولّد Grid CSS

استخدم grid للتخطيطات ثنائية البعد: هياكل الصفحات ولوحات المعلومات والمعارض وشبكات البطاقات. أما لصف أو عمود واحد من العناصر التي يُحدَّد حجمها بمحتواها فغالباً يكون flexbox أبسط (راجع مولّد CSS Flexbox).

كيف يعمل مولّد Grid CSS

تُفحص القوالب وقيم التموضع بدالة المتصفح نفسه CSS.supports()، فيُقبل كل ما هو صالح في CSS ويُعلَّم غير الصالح. يُتحقق من نص المناطق: يحتاج كل صف إلى عدد الخلايا نفسه ويجب أن يشكل كل اسم مستطيلاً واحداً. يحتوي المخرج على display: grid والقوالب وgrid-template-areas بسلسلة مقتبسة لكل صف وgap (قيمة واحدة إذا تساوت فجوتا الصف والعمود وإلا row column) والمحاذاة فقط إذا لم تكن stretch. وتحصل العناصر على قواعد grid-area أو grid-column/grid-row فقط عند ضبطها.