وثائق CSS قابلة للتشغيل: CSS Grid

Q: ما هو CSS grid؟

نظام تخطيط يضع العناصر في صفوف وأعمدة في الوقت نفسه. تضبط display: grid على الحاوية، وتصف أعمدتها بـ grid-template-columns (وصفوفها اختياريًا)، فيملأ أبناؤها المباشرون الخلايا بالترتيب.

Q: ماذا تعني 1fr في CSS grid؟

fr جزء من المساحة الحرة في حاوية grid. تعطي grid-template-columns: 1fr 1fr 1fr ثلاثة أعمدة متساوية، و1fr 2fr تجعل العمود الثاني ضعف عرض الأول. تُطرح الأحجام الثابتة والفجوات أولًا؛ ثم تتقاسم أعمدة fr ما تبقى.

Q: ما الفرق بين auto-fill وauto-fit؟

كلتاهما تنشئ أكبر عدد من الأعمدة يتسع. تحتفظ auto-fill بالأعمدة الفارغة، فتبقى العناصر القليلة ضيقة وتترك مساحة فارغة في نهاية الصف. وتطوي auto-fit الأعمدة الفارغة، فتتمدد العناصر لتملأ الصف. ومع عناصر كافية لملء الصف تبدوان متطابقتين.

Q: كيف أجعل عنصرًا في grid يمتد على عمودين؟

استخدم grid-column: span 2 على العنصر، أو أعطه خطي بداية ونهاية: grid-column: 1 / 3 يغطي العمودين 1 و2. وgrid-column: 1 / -1 يمتد على العرض الكامل، لأن -1 هو الخط الأخير.

Q: هل grid-gap هي نفسها gap؟

نعم. grid-gap وgrid-row-gap وgrid-column-gap هي الأسماء القديمة. ما زالت المتصفحات تقبلها كأسماء بديلة، لكن اكتب gap وrow-gap وcolumn-gap، التي تعمل في flexbox أيضًا.

شبكة في ثلاثة أسطر

اضبط display: grid على حاوية واذكر أعمدتها بـ grid-template-columns. يملأ الأبناء الخلايا بالترتيب، بترتيب القراءة (من اليسار إلى اليمين في الإنجليزية، ومن اليمين إلى اليسار في صفحة عربية)، ويبدأ صف جديد كلما امتلأت الأعمدة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>CSS grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr; /* three equal columns */
      gap: 12px;
    }
    .grid div { background: #2563eb; color: white; padding: 16px; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="grid">
    <div>1</div><div>2</div><div>3</div>
    <div>4</div><div>5</div><div>6</div>
    <div>7</div>
  </div>
</body>
</html>

سبعة عناصر في ثلاثة أعمدة: صفان كاملان وصف ثالث فيه العنصر 7 في العمود الأول. كل الأعمدة بالعرض نفسه، وكل العناصر في الصف بالارتفاع نفسه، فتصطف الحواف في الاتجاهين. هذا ما يضيفه grid على flexbox.

ساحة تجربة Grid

اكتب أي قيمة لـ grid-template-columns، أو انقر قيمة جاهزة. تعرض القراءة عروض الأعمدة التي حسبها المتصفح (من getComputedStyle) وعدد الصفوف التي احتاجتها العناصر:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid playground</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
    .presets button { font: 12px ui-monospace, monospace; padding: 4px 8px; border: 1px solid #111827; background: white; cursor: pointer; }
    #grid { display: grid; gap: 8px; padding: 8px; background: #e5e7eb; }
    #grid div { background: #16a34a; color: white; padding: 10px; text-align: center; }
    pre { white-space: pre-wrap; background: #f3f4f6; padding: 8px; }
  </style>
</head>
<body>
  <label>grid-template-columns: <input id="cols" size="36" value="repeat(3, 1fr)"></label>
  <div class="presets" id="presets"></div>
  <div id="grid"></div>
  <pre id="out"></pre>
  <script>
    const grid = document.getElementById('grid');
    const input = document.getElementById('cols');
    for (let i = 1; i <= 8; i++) grid.insertAdjacentHTML('beforeend', '<div>' + i + '</div>');
    const update = () => {
      grid.style.gridTemplateColumns = input.value;
      const cols = getComputedStyle(grid).gridTemplateColumns;
      const rows = getComputedStyle(grid).gridTemplateRows.split(' ').length;
      document.getElementById('out').textContent =
        'columns: ' + cols + '\n' + cols.split(' ').length + ' columns, ' + rows + ' rows';
    };
    ['repeat(3, 1fr)', '1fr 2fr', '200px 1fr', 'auto 1fr auto', 'repeat(4, 100px)', 'repeat(auto-fill, minmax(120px, 1fr))'].forEach((v) => {
      const b = document.createElement('button');
      b.textContent = v;
      b.addEventListener('click', () => { input.value = v; update(); });
      document.getElementById('presets').append(b);
    });
    input.addEventListener('input', update);
    update();
  </script>
</body>
</html>

أمور تستحق الملاحظة: 1fr 2fr تجعل العمود الثاني ضعف الأول تمامًا. و200px 1fr تحتفظ بـ 200px وتعطي الباقي للعمود الثاني. وauto 1fr auto تجعل العمودين الطرفيين بحجم محتواهما. وrepeat(4, 100px) تترك مساحة فارغة في النهاية لأن لا شيء مرن. والقيمة غير الصالحة، مثل 1fr 2، تُتجاهل، وتحتفظ الشبكة بآخر قيمة صالحة.

وحدة fr

تعني fr «حصة واحدة من المساحة الحرة». يطرح المتصفح أولًا الأعمدة الثابتة (px وrem و% ومحتوى auto) والفجوات، ثم يقسم ما تبقى بين أعمدة fr حسب أرقامها.

`grid-template-columns` في حاوية بعرض 600px، بلا فجوة	عروض الأعمدة
`1fr 1fr 1fr`	`200, 200, 200`
`1fr 2fr`	`200, 400`
`100px 1fr 1fr`	`100, 250, 250`
`1fr 50%`	`300, 300`

fr ليست مثل %: النسب المئوية مع الفجوات قد يتجاوز مجموعها 100% فتفيض، بينما تتقاسم أعمدة fr دائمًا ما يتبقى بعد الفجوات فقط.

repeat() وminmax() وشبكة متجاوبة من دون استعلامات وسائط

repeat(4, 1fr) هي 1fr 1fr 1fr 1fr. وminmax(120px, 1fr) عمود لا يضيق أبدًا عن 120px ويكبر ليأخذ حصة. اجمعهما مع auto-fill أو auto-fit مكان العدد، فتنشئ الشبكة أكبر عدد من الأعمدة يتسع:

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

هذا التصريح الواحد يعطي أكبر عدد يتسع في الحاوية من الأعمدة التي لا يقل عرضها عن 180px: عدة أعمدة على شاشة عريضة، وعمود واحد على الهاتف، من دون استعلام وسائط. يظهر الفرق بين auto-fill وauto-fit حين تكون العناصر أقل من الأعمدة:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>auto-fill vs auto-fit</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .g { display: grid; width: 560px; background: #e5e7eb; margin: 4px 0 14px; }
    .fill { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .fit { grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
    .g div { background: #2563eb; color: white; padding: 10px; outline: 1px solid white; }
  </style>
</head>
<body>
  <code>auto-fill</code>
  <div class="g fill"><div>A</div><div>B</div><div>C</div></div>
  <code>auto-fit</code>
  <div class="g fit"><div>A</div><div>B</div><div>C</div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent = [...document.querySelectorAll('.g')].map((g) =>
      g.className.split(' ')[1] + ': ' + [...g.children].map((c) => Math.round(c.getBoundingClientRect().width) + 'px').join(', ')
    ).join(' | ');
  </script>
</body>
</html>

تتسع الحاوية لخمسة أعمدة بعرض 100px. تحتفظ auto-fill بالخمسة كلها، فيكون كل من A وB وC بعرض 112px ويبقى عمودان فارغان. وتطوي auto-fit الفارغة، فتتمدد العناصر الثلاثة إلى نحو 187px لكل منها.

وضع العناصر: grid-column وgrid-row

تُرقَّم خطوط الشبكة بدءًا من 1 عند حافة البداية (اليمين في صفحة عربية). تعني grid-column: 1 / 3 «من الخط 1 إلى الخط 3»، أي عمودين. وتعني span 2 «عمودين من حيث تستقر»، و-1 هو الخط الأخير:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spanning</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 13px; }
    .grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 60px; gap: 8px; }
    .grid div { background: #16a34a; color: white; padding: 8px; }
    .grid .wide { grid-column: 1 / -1; background: #111827; }
    .grid .big { grid-column: span 2; grid-row: span 2; background: #2563eb; }
    .grid .tall { grid-row: span 2; background: #f59e0b; }
  </style>
</head>
<body>
  <div class="grid">
    <div class="wide">grid-column: 1 / -1</div>
    <div class="big">span 2 x 2</div>
    <div class="tall">grid-row: span 2</div>
    <div>a</div>
    <div>b</div>
  </div>
</body>
</html>

يملأ العنصر الداكن الصف الأول كله. ويغطي الأزرق كتلة من صفين في عمودين، والكهرماني صفين. ويملأ العنصران a وb الخلايا المتبقية من تلقاء نفسيهما: تضع الشبكة كل عنصر تستطيع وضعه في الخلية الحرة التالية. وتضبط grid-auto-rows: 60px ارتفاع الصفوف التي لم تعرّفها بـ grid-template-rows.

grid-template-areas: سمِّ أجزاء التخطيط

لتخطيط صفحة، سمِّ المناطق وارسمها كنص. كل سلسلة نصية صف، وكل كلمة خلية، وينضم العنصر إلى منطقة عبر grid-area:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Grid areas</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      display: grid;
      grid-template-columns: 160px 1fr;
      grid-template-rows: auto 1fr auto;
      grid-template-areas:
        "header header"
        "side   main"
        "footer footer";
      gap: 8px;
      min-height: 280px;
    }
    header { grid-area: header; background: #111827; color: white; }
    aside  { grid-area: side;   background: #e5e7eb; }
    main   { grid-area: main;   background: #bfdbfe; }
    footer { grid-area: footer; background: #111827; color: white; }
    .page > * { padding: 12px; }
  </style>
</head>
<body>
  <div class="page">
    <header>Header</header>
    <aside>Sidebar</aside>
    <main>Main content</main>
    <footer>Footer</footer>
  </div>
</body>
</html>

تمتد الترويسة والتذييل على العمودين لأن اسميهما يملآن خليتي صفيهما. والصف الأوسط 1fr، فيأخذ ما تبقى من الارتفاع البالغ 280px. لتكديس كل شيء على الهاتف، يكفي أن يعيد استعلام وسائط رسم المناطق كعمود واحد: grid-template-areas: "header" "side" "main" "footer" مع grid-template-columns: 1fr. تعرض صفحة استعلامات الوسائط هذا النمط.

المحاذاة داخل الخلايا

تتمدد عناصر grid افتراضيًا لتملأ خليتها. هذه الخصائص تحركها داخلها:

الخاصية	على	تحرك
`justify-items`	الحاوية	كل عنصر على امتداد الصف (المحور السطري)
`align-items`	الحاوية	كل عنصر صعودًا ونزولًا (المحور الكتلي)
`place-items`	الحاوية	اختصار: `place-items: center` توسّط في الاتجاهين
`justify-self` / `align-self`	العنصر	عنصر واحد
`justify-content` / `align-content`	الحاوية	مجموعة المسارات كلها، حين تكون الشبكة أصغر من الحاوية

display: grid; place-items: center; هي أقصر طريقة لتوسيط ابن واحد في صندوق.

Grid أم flexbox

Grid ثنائي الأبعاد: تقرر الأعمدة (والصفوف)، ويملؤها المحتوى، فتكون كل بطاقة في المعرض بالعرض نفسه حتى في الصف الأخير. أما Flexbox فأحادي البعد: تتحدد أحجام العناصر من محتواها على خط واحد. ويعملان معًا جيدًا: grid للصفحة ولمعرض البطاقات، وflexbox داخل كل بطاقة لصف ترويستها. تشرح صفحة flexbox النصف الآخر.

الترتيب وسهولة الوصول

يمكن لـ grid-template-areas وgrid-row وgrid-column وorder وضع العنصر في أي مكان، لكن قارئات الشاشة ومفتاح Tab ما زالت تتبع ترتيب HTML. أبقِ ترتيب المصدر ذا معنى (الترويسة، التنقل، المحتوى الرئيسي، التذييل)، واستخدم grid لترتيبه، لا لإصلاح ترتيب HTML لا معنى له.

أخطاء شائعة

وضع display: grid على العناصر. مكانها الأب؛ والأبناء المباشرون وحدهم عناصر grid.
استخدام النسب المئوية مع الفجوات. grid-template-columns: 50% 50% مع gap: 16px تفيض بمقدار 16px. استخدم 1fr 1fr.
auto-fill حين كنت تريد auto-fit. مع عناصر قليلة تترك auto-fill أعمدة فارغة. بدّل إلى auto-fit لتمديد العناصر.
عمود 1fr يكبر أكثر من حصته. عمود 1fr لا يصغر عن أطول محتوى فيه (رابط URL طويل، صورة عريضة). استخدم minmax(0, 1fr) كي يتمكن من التقلص.
سلاسل مناطق ليست مستطيلات. يجب أن تشكّل كل منطقة مسماة مستطيلًا، ويجب أن تحتوي كل سلسلة صف على عدد الخلايا نفسه، وإلا يُتجاهل تصريح grid-template-areas كله.
نسيان أن أرقام الخطوط تبدأ من 1. لثلاثة أعمدة أربعة خطوط: 1 / 4 أو 1 / -1 تمتد على الثلاثة.

الأسئلة الشائعة

ما هو CSS grid؟

نظام تخطيط يضع العناصر في صفوف وأعمدة في الوقت نفسه. تضبط display: grid على الحاوية، وتصف أعمدتها بـ grid-template-columns (وصفوفها اختياريًا)، فيملأ أبناؤها المباشرون الخلايا بالترتيب.

ماذا تعني 1fr في CSS grid؟

fr جزء من المساحة الحرة في حاوية grid. تعطي grid-template-columns: 1fr 1fr 1fr ثلاثة أعمدة متساوية، و1fr 2fr تجعل العمود الثاني ضعف عرض الأول. تُطرح الأحجام الثابتة والفجوات أولًا؛ ثم تتقاسم أعمدة fr ما تبقى.

ما الفرق بين auto-fill وauto-fit؟

كلتاهما تنشئ أكبر عدد من الأعمدة يتسع. تحتفظ auto-fill بالأعمدة الفارغة، فتبقى العناصر القليلة ضيقة وتترك مساحة فارغة في نهاية الصف. وتطوي auto-fit الأعمدة الفارغة، فتتمدد العناصر لتملأ الصف. ومع عناصر كافية لملء الصف تبدوان متطابقتين.

كيف أجعل عنصرًا في grid يمتد على عمودين؟

استخدم grid-column: span 2 على العنصر، أو أعطه خطي بداية ونهاية: grid-column: 1 / 3 يغطي العمودين 1 و2. وgrid-column: 1 / -1 يمتد على العرض الكامل، لأن -1 هو الخط الأخير.

متى أستخدم grid بدل flexbox؟

استخدم grid حين يجب أن تصطف الصفوف والأعمدة مع بعضها: معارض البطاقات، والنماذج ذات التسميات المحاذاة، والصفحة ذات الترويسة والشريط الجانبي والتذييل. واستخدم flexbox لصف أو عمود واحد تتحدد أحجام عناصره من محتواها، مثل شريط التنقل.

هل grid-gap هي نفسها gap؟

نعم. grid-gap وgrid-row-gap وgrid-column-gap هي الأسماء القديمة. ما زالت المتصفحات تقبلها كأسماء بديلة، لكن اكتب gap وrow-gap وcolumn-gap، التي تعمل في flexbox أيضًا.

مفاهيم ذات صلة