CSS/grid

الخاصية grid المختصرة في CSS تضبط جميع الخاصيات التي تُحدَّد خصائص الشبكة بوضوح (أي grid-template-rows و grid-template-columns و grid-template-areas)، وجميع الخاصيات التي تُحدِّد خصائص الشبكة ضمنيًا (أي grid-auto-rows و grid-auto-columns و grid-auto-flow)، والخاصيات التي تُضبِط الفراغ بين الأعمدة والأسطر (أي grid-column-gap و grid-row-gap)، وكل ذلك في قاعدة واحدة.

/* <grid-template> */
grid: none;
grid: "a" 100px "b" 1fr;
grid: [linename1] "a" 100px [linename2];
grid: "a" 200px "b" min-content;
grid: "a" minmax(100px, max-content) "b" 20%;
grid: 100px / 200px;
grid: minmax(400px, min-content) / repeat(auto-fill, 50px);

/* <grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>? */
grid: 200px / auto-flow;
grid: 30% / auto-flow dense;
grid: repeat(3, [line1 line2 line3] 200px) / auto-flow 300px;
grid: [line1] minmax(20em, max-content) / auto-flow dense 40%;

/* [ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns> */
grid: auto-flow / 200px;
grid: auto-flow dense / 30%;
grid: auto-flow 300px / repeat(3, [line1 line2 line3] 200px);
grid: auto-flow dense 40% / [line1] minmax(20em, max-content);

/* القيم العامة */
grid: inherit;
grid: initial;
grid: unset;

ملاحظة: يمكنك تحديد القيم التي تُحدِّد خصائص الشبكة بوضوح (explicit) أو التي تُحدِّدها ضمنيًا (implicit) في قاعدة grid، والخاصيات التي لا تُحدِّد قيمتها ستُضبَط إلى القيمة الابتدائية (كما هو معتاد في الخاصيات المختصرة).

القيمة الابتدائية	لكل قيمة مختصرة: grid-template-rows: none grid-template-columns: none grid-template-areas: none grid-auto-rows: auto grid-auto-columns: auto grid-auto-flow: row grid-column-gap: 0 grid-row-gap: 0
تُطبَّق على	حاويات grid.
قابلة للوراثة	لا
قابلة للتحريك	لا
القيمة المحسوبة	لكل قيمة مختصرة: grid-template-rows: كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة. grid-template-columns: كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة. grid-template-areas: كما حُدِّدَت. grid-auto-rows: نسبة مئوية أو طول مطلق. grid-auto-columns: نسبة مئوية أو طول مطلق. grid-auto-flow: كما حُدِّدَت. grid-column-gap: نسبة مئوية أو طول مطلق. grid-row-gap: نسبة مئوية أو طول مطلق.

أمثلة

استعملنا في المثال الآتي تخطيط grid مع تحديد مسارات الأسطر (row tracks) لتقسيم الشبكة إلى سطرين، وكل سطر بارتفاع 60px، أما الأعمدة فهي بعرض 80px:

<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

شيفرة CSS:

#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	57.0	52.0	10 (مع السابقة -ms-)	44	10.1

الإصدارات القديمة من متصفح Edge كانت تدعم تخطيط Grid دعمًا جزئيًا (كما في متصفح IE)، لكن الإصدار Edge 16 أصبح يدعم تخطيط Gird دعمًا كاملًا.

البنية العامة

تقبل الخاصية gird القيم التالية.

خصائص القالب

<grid-template>

تحديد قيمة للخاصية grid-template التي تتضمن الخاصيات grid-template-columns و grid-template-rows و grid-template-areas.

مسارات الأسطر

<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?

ضبط آلية ملء المحتوى بتحديد مسارات الأسطر (row tracks) بوضوح عبر الخاصية grid-template-rows (وبضبط قيمة الخاصية grid-template-columns إلى none) وبتحديد كيفية تكرار مسارات الأعمدة (column tracks) عبر الخاصية grid-auto-columns (وبضبط قيمة الخاصية grid-auto-rows إلى auto)؛ وستُضبَط الخاصية grid-auto-flow إلى column، مع القيمة dense إن حُدِّدَت.

سيُعاد ضبط جميع الخاصيات الأخرى التي تضبطها الخاصية grid إلى قيمها الابتدائية.

مسارات الأعمدة

[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>

ضبط آلية ملء المحتوى بتحديد مسارات الأعمدة (column tracks) بوضوح عبر الخاصية grid-template-columns (وبضبط قيمة الخاصية grid-template-rows إلى none) وبتحديد كيفية تكرار مسارات الأسطر (row tracks) عبر الخاصية grid-auto-rows (وبضبط قيمة الخاصية grid-auto-columns إلى auto)؛ وستُضبَط الخاصية grid-auto-flow إلى row، مع القيمة dense إن حُدِّدَت.

سيُعاد ضبط جميع الخاصيات الأخرى التي تضبطها الخاصية grid إلى قيمها الابتدائية.

البنية الرسمية

grid: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>;

مصادر ومواصفات

• مواصفة CSS Grid Layout.