عرض مصدر CSS/grid

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

== بطاقة الخاصية ==
{| class="wikitable" style="width: 100%;"
|-
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
|لكل قيمة مختصرة:
* <code>[[CSS/grid-template-rows|grid-template-rows]]</code>: <code>none</code>
* <code>[[CSS/grid-template-columns|grid-template-columns]]</code>: <code>none</code>
* <code>[[CSS/grid-template-areas|grid-template-areas]]</code>: <code>none</code>
* <code>[[CSS/grid-auto-rows|grid-auto-rows]]</code>: <code>auto</code>
* <code>[[CSS/grid-auto-columns|grid-auto-columns]]</code>: <code>auto</code>
* <code>[[CSS/grid-auto-flow|grid-auto-flow]]</code>: <code>row</code>
* <code>[[CSS/grid-column-gap|grid-column-gap]]</code>: <code>0</code>
* <code>[[CSS/grid-row-gap|grid-row-gap]]</code>: <code>0</code>
|-
! scope="row" |تُطبَّق على
|حاويات grid.
|-
! scope="row" |قابلة للوراثة
|لا
|-
!قابلة للتحريك
|لا
|-
! scope="row" |القيمة المحسوبة
|لكل قيمة مختصرة:
* <code>[[CSS/grid-template-rows|grid-template-rows]]</code>: كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.
* <code>[[CSS/grid-template-columns|grid-template-columns]]</code>: كما حُدِّدَت، لكن مع تحويل الأطوال النسبية إلى مطلقة.
* <code>[[CSS/grid-template-areas|grid-template-areas]]</code>: كما حُدِّدَت.
* <code>[[CSS/grid-auto-rows|grid-auto-rows]]</code>: نسبة مئوية أو طول مطلق.
* <code>[[CSS/grid-auto-columns|grid-auto-columns]]</code>: نسبة مئوية أو طول مطلق.
* <code>[[CSS/grid-auto-flow|grid-auto-flow]]</code>: كما حُدِّدَت.
* <code>[[CSS/grid-column-gap|grid-column-gap]]</code>: نسبة مئوية أو طول مطلق.
* <code>[[CSS/grid-row-gap|grid-row-gap]]</code>: نسبة مئوية أو طول مطلق.

|}

<syntaxhighlight lang="css">
/* <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;
</syntaxhighlight>
ملاحظة: يمكنك تحديد القيم التي تُحدِّد خصائص الشبكة بوضوح (explicit) '''أو''' التي تُحدِّدها ضمنيًا (implicit) في قاعدة grid، والخاصيات التي لا تُحدِّد قيمتها ستُضبَط إلى القيمة الابتدائية (كما هو معتاد في الخاصيات المختصرة). 

== أمثلة ==
استعملنا في المثال الآتي تخطيط <code>grid</code> مع تحديد مسارات الأسطر (row tracks) لتقسيم الشبكة إلى سطرين، وكل سطر بارتفاع <code>60px</code>، أما الأعمدة فهي بعرض <code>80px</code>:<syntaxhighlight lang="html">
<div id="container">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
#container {
  display: grid;
  grid: repeat(2, 60px) / auto-flow 80px;
}

#container > div {
  background-color: #8ca0ff;
  width: 50px;
  height: 50px;
}
</syntaxhighlight>
==دعم المتصفحات==
{| class="wikitable"
!الميزة
!|Chrome
!Firefox
!Internet Explorer
!Opera
!Safari
|-
!الدعم الأساسي
|57.0
|52.0
|10 (مع السابقة <code>-ms-</code>)
|44
|10.1
|}
الإصدارات القديمة من متصفح Edge كانت تدعم تخطيط Grid دعمًا جزئيًا (كما في متصفح IE)، لكن الإصدار Edge 16 أصبح يدعم تخطيط Gird دعمًا كاملًا.

== البنية العامة ==
تقبل الخاصية <code>gird</code> القيم التالية.

=== خصائص القالب ===
<syntaxhighlight lang="css">
<grid-template>
</syntaxhighlight>تحديد قيمة للخاصية <code>[[CSS/grid-template|grid-template]]</code> التي تتضمن الخاصيات <code>[[CSS/grid-template-columns|grid-template-columns]]</code> و <code>[[CSS/grid-template-rows|grid-template-rows]]</code> و <code>[[CSS/grid-template-areas|grid-template-areas]]</code>.

=== مسارات الأسطر ===
<syntaxhighlight lang="css">
<grid-template-rows> / [ auto-flow && dense? ] <grid-auto-columns>?
</syntaxhighlight>ضبط آلية ملء المحتوى بتحديد مسارات الأسطر (row tracks) بوضوح عبر الخاصية <code>[[CSS/grid-template-rows|grid-template-rows]]</code> (وبضبط الخاصية <code>[[CSS/grid-template-columns|grid-template-columns]]</code> إلى <code>none</code>) وبتحديد كيفية تكرار مسارات الأعمدة (column tracks) عبر الخاصية <code>[[CSS/grid-auto-columns|grid-auto-columns]]</code> (وبضبط  الخاصية <code>[[CSS/grid-auto-rows|grid-auto-rows]]</code> إلى <code>auto</code>)؛ وستُضبَط الخاصية <code>[[CSS/grid-auto-flow|grid-auto-flow]]</code> إلى <code>column</code>، مع  <code>dense</code> إن حُدِّدَت.

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

=== مسارات الأعمدة ===
<syntaxhighlight lang="css">
[ auto-flow && dense? ] <grid-auto-rows>? / <grid-template-columns>
</syntaxhighlight>ضبط آلية ملء المحتوى بتحديد مسارات الأعمدة (column tracks) بوضوح عبر الخاصية <code>[[CSS/grid-template-columns|grid-template-columns]]</code> (وبضبط الخاصية <code>[[CSS/grid-template-rows|grid-template-rows]]</code> إلى <code>none</code>) وبتحديد كيفية تكرار مسارات الأسطر (row tracks) عبر الخاصية <code>[[CSS/grid-auto-rows|grid-auto-rows]]</code> (وبضبط الخاصية <code>[[CSS/grid-auto-columns|grid-auto-columns]]</code> إلى <code>auto</code>)؛ وستُضبَط الخاصية <code>[[CSS/grid-auto-flow|grid-auto-flow]]</code> إلى <code>row</code>، مع  <code>dense</code> إن حُدِّدَت.

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

=== البنية الرسمية ===
<syntaxhighlight lang="css">
grid: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>;
</syntaxhighlight>
== انظر أيضًا ==
* صفحة الخاصيات الفرعية التي تضبطها الخاصية <code>grid</code> وهي  <code>[[CSS/grid-template-rows|grid-template-rows]]</code> و <code>[[CSS/grid-template-columns|grid-template-columns]]</code> و <code>[[CSS/grid-template-areas|grid-template-area]]</code><code>[[CSS/grid-auto-rows|grid-auto-rows]]</code> و <code>[[CSS/grid-auto-columns|grid-auto-columns]]</code> و <code>[[CSS/grid-auto-flow|grid-auto-flow]]</code> و <code>[[CSS/grid-column-gap|grid-column-gap]]</code> و <code>[[CSS/grid-row-gap|grid-row-gap]]</code>.

== مصادر ومواصفات ==
* مواصفة [https://drafts.csswg.org/css-grid/#propdef-grid CSS Grid Layout]. 
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Grid|{{SUBPAGENAME}}]]