الفرق بين المراجعتين ل"CSS/grid-column"

من موسوعة حسوب
< CSS
اذهب إلى التنقل اذهب إلى البحث
ط (استبدال النص - '\[\[تصنيف:(.*)\]\]' ب'{{SUBPAGENAME}}')
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-column</code>}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:الخاصية <code>grid-column</code>}}</noinclude>
−
الخاصية <code>grid-column</code> في CSS هي خاصية مختصرة تضبط قيمة الخاصيتين <code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-column-end|grid-column-end]]</code> التي تُحدِّد أبعاد عنصر grid ومكانه في العمود.<syntaxhighlight lang="css">
+
الخاصية <code>grid-column</code> في CSS هي خاصية مختصرة تضبط قيمة الخاصيتين <code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-column-end|grid-column-end]]</code> التي تُحدِّد أبعاد عنصر grid ومكانه في العمود.
 +
 
 +
== بطاقة الخاصية ==
 +
{| class="wikitable" style="width: 100%;"
 +
|-
 +
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
 +
|لكل خاصية مختصرة:
 +
* <code>[[CSS/grid-column-start|grid-column-start]]</code>: <code>auto</code>
 +
* <code>[[CSS/grid-column-end|grid-column-end]]</code>: <code>auto</code>
 +
|-
 +
! scope="row" |تُطبَّق على
 +
|عناصر grid الموجودة داخل حاويات grid.
 +
|-
 +
! scope="row" |قابلة للوراثة
 +
|لا
 +
|-
 +
!قابلة للتحريك
 +
|لا
 +
|-
 +
! scope="row" |القيمة المحسوبة
 +
|لكل خاصية مختصرة:
 +
* <code>[[CSS/grid-column-start|grid-column-start]]</code>: كما حُدِّدَت.
 +
* <code>[[CSS/grid-column-end|grid-column-end]]</code>: كما حُدِّدَت.
 +
 
 +
|}
 +
 
 +
<syntaxhighlight lang="css">
 
/* كلمات محجوزة */
 
/* كلمات محجوزة */
 
grid-column: auto;
 
grid-column: auto;
سطر 27: سطر 53:
  
 
</syntaxhighlight>إذا حُدِّد قيمتَي <code><grid-line></code> فستُضبَط قيمة الخاصية <code>[[CSS/grid-column-start|grid-column-start]]</code> قبل الشرطة المائلة <code>/</code>، وقيمة الخاصية <code>[[CSS/grid-column-end|grid-column-end]]</code> بعد الشرطة المائلة.
 
</syntaxhighlight>إذا حُدِّد قيمتَي <code><grid-line></code> فستُضبَط قيمة الخاصية <code>[[CSS/grid-column-start|grid-column-start]]</code> قبل الشرطة المائلة <code>/</code>، وقيمة الخاصية <code>[[CSS/grid-column-end|grid-column-end]]</code> بعد الشرطة المائلة.
−
{| class="wikitable" style="width: 100%;"
 
−
|-
 
−
! scope="row" style="width: 20%;" |[[CSS/initial value|القيمة الابتدائية]]
 
−
|لكل خاصية مختصرة:
 
−
* <code>[[CSS/grid-column-start|grid-column-start]]</code>: <code>auto</code>
 
−
* <code>[[CSS/grid-column-end|grid-column-end]]</code>: <code>auto</code>
 
−
|-
 
−
! scope="row" |تُطبَّق على
 
−
|عناصر grid الموجودة داخل حاويات grid.
 
−
|-
 
−
! scope="row" |قابلة للوراثة
 
−
|لا
 
−
|-
 
−
!قابلة للتحريك
 
−
|لا
 
−
|-
 
−
! scope="row" |القيمة المحسوبة
 
−
|لكل خاصية مختصرة:
 
−
* <code>[[CSS/grid-column-start|grid-column-start]]</code>: كما حُدِّدَت.
 
−
* <code>[[CSS/grid-column-end|grid-column-end]]</code>: كما حُدِّدَت.
 
−
 
−
|}
 
  
 
== أمثلة ==
 
== أمثلة ==
سطر 99: سطر 103:
  
 
== البنية العامة ==
 
== البنية العامة ==
−
تقبل الخاصية <code>grid-column</code> قيمةً واحدةً أو قيمتين هما <code><grid-line></code>. إذا حُدِّدَت قيمةٌ واحدة فهي قيمة الخاصية <code>[[CSS/grid-column-start|grid-column-start]]</code>، وإذا حُدِّدَت قيمتان فستؤديان إلى ضبط قيمة الخاصية <code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-column-end|grid-column-end]]</code> على التوالي، ويُفصَل بين القيمتين بشرطة مائلة <code>/</code>.
+
تقبل الخاصية <code>grid-column</code> قيمةً واحدةً أو قيمتين هما <code><grid-line></code>. إذا حُدِّدَت قيمةٌ واحدة فهي الخاصية <code>[[CSS/grid-column-start|grid-column-start]]</code>، وإذا حُدِّدَت قيمتان فستؤديان إلى ضبط الخاصية <code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-column-end|grid-column-end]]</code> على التوالي، ويُفصَل بين القيمتين بشرطة مائلة <code>/</code>.
  
−
قيمة <code><grid-line></code> تُحدِّد كما يلي:
+
<code><grid-line></code> تُحدِّد كما يلي:
 
* الكلمة المحجوزة <code>auto</code>
 
* الكلمة المحجوزة <code>auto</code>
−
* أو قيمة <code>[[CSS/custom-ident|<custom-ident>]]</code>
+
* أو <code>[[CSS/custom-ident|<custom-ident>]]</code>
 
* أو عدد صحيح <code>[[CSS/integer|<integer>]]</code>
 
* أو عدد صحيح <code>[[CSS/integer|<integer>]]</code>
−
* أو قيمة <code>[[CSS/custom-ident|<custom-ident>]]</code> وعدد صحيح <code>[[CSS/integer|<integer>]]</code> يُفصَل بينهما بفراغ
+
* أو <code>[[CSS/custom-ident|<custom-ident>]]</code> وعدد صحيح <code>[[CSS/integer|<integer>]]</code> يُفصَل بينهما بفراغ
 
* أو الكلمة المحجوزة <code>span</code> مع <code>[[CSS/custom-ident|<custom-ident>]]</code> أو عدد صحيح <code>[[CSS/integer|<integer>]]</code> أو كلاهما.
 
* أو الكلمة المحجوزة <code>span</code> مع <code>[[CSS/custom-ident|<custom-ident>]]</code> أو عدد صحيح <code>[[CSS/integer|<integer>]]</code> أو كلاهما.
  
−
=== القيمة <code>auto</code> ===
+
=== <code>auto</code> ===
 
تُشير هذه الكلمة المحجوزة إلى أنَّ هذه الخاصية لن تُساهم في تحديد موضع عنصر grid.
 
تُشير هذه الكلمة المحجوزة إلى أنَّ هذه الخاصية لن تُساهم في تحديد موضع عنصر grid.
  
−
=== القيمة <code><custom-ident></code> ===
+
=== <code><custom-ident></code> ===
 
إذا كان هنالك سطرٌ له الاسم ‎<code><custom-ident>-start</code> فستساهم هذه القيمة في تحديد موضع عنصر <code>grid</code> في ذاك العمود.
 
إذا كان هنالك سطرٌ له الاسم ‎<code><custom-ident>-start</code> فستساهم هذه القيمة في تحديد موضع عنصر <code>grid</code> في ذاك العمود.
  
 
ملاحظة: المناطق المسماة (grid areas) ستولد -ضمنيًا- أسماء أعمدة لها هذا الشكل، فلو ضبطنا قيمة هذه الخاصية إلى <code>foo</code>، فسيبدأ العنصر من حافة المنطقة المسماة (ما لم يكن هنالك سطرٌ آخر باسم <code>foo-start</code> حُدِّدَ اسمه بوضوح قبل تعريف هذه المنطقة).
 
ملاحظة: المناطق المسماة (grid areas) ستولد -ضمنيًا- أسماء أعمدة لها هذا الشكل، فلو ضبطنا قيمة هذه الخاصية إلى <code>foo</code>، فسيبدأ العنصر من حافة المنطقة المسماة (ما لم يكن هنالك سطرٌ آخر باسم <code>foo-start</code> حُدِّدَ اسمه بوضوح قبل تعريف هذه المنطقة).
  
−
===  القيمة‎<code><integer> && <custom-ident>?</code> ‎ ===
+
===  ‎<code><integer> && <custom-ident>?</code> ‎ ===
−
تحديد موضع عنصر grid حسب قيمة العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى العمود؛ وإذا كانت قيمة العدد الصحيح سالبةً فسيبدأ العد بالمقلوب، أي بدءًا من حافة النهاية للشبكة. لا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر.
+
تحديد موضع عنصر grid حسب العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى العمود؛ وإذا كانت قيمة العدد الصحيح سالبةً فسيبدأ العد بالمقلوب، أي بدءًا من حافة النهاية للشبكة. لا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر.
  
−
=== القيمة<code>span && [ <integer> || <custom-ident> ]</code> ‎ ===
+
=== <code>span && [ <integer> || <custom-ident> ]</code> ‎ ===
−
تحديد موضع عنصر grid حسب قيمة العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى العمود وبدءًا من حافة النهاية، ولا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر، ولا يجوز أن تكون قيمة <code><custom-ident></code> تساوي <code>span</code>.
+
تحديد موضع عنصر grid حسب العدد الصحيح <code>[[CSS/integer|<integer>]]</code> نسبةً إلى العمود وبدءًا من حافة النهاية، ولا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر، ولا يجوز أن تكون <code><custom-ident></code> تساوي <code>span</code>.
  
 
=== البنية الرسمية ===
 
=== البنية الرسمية ===

مراجعة 16:34، 3 سبتمبر 2018

الخاصية grid-column في CSS هي خاصية مختصرة تضبط قيمة الخاصيتين grid-column-start و grid-column-end التي تُحدِّد أبعاد عنصر grid ومكانه في العمود.

بطاقة الخاصية

القيمة الابتدائية لكل خاصية مختصرة:
تُطبَّق على عناصر grid الموجودة داخل حاويات grid.
قابلة للوراثة لا
قابلة للتحريك لا
القيمة المحسوبة لكل خاصية مختصرة: 
/* كلمات محجوزة */
grid-column: auto;
grid-column: auto / auto;

/* <custom-ident> */
grid-column: somegridarea;
grid-column: somegridarea / someothergridarea;

/* <integer> + <custom-ident> */
grid-column: somegridarea 4;
grid-column: 4 somegridarea / 6;

/* span + <integer> + <custom-ident> */
grid-column: span 3;
grid-column: span somegridarea;
grid-column: 5 somegridarea span;
grid-column: span 3 / 6;
grid-column: span somegridarea / span someothergridarea;
grid-column: 5 somegridarea span / 2 span;

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

إذا حُدِّد قيمتَي <grid-line> فستُضبَط قيمة الخاصية grid-column-start قبل الشرطة المائلة /، وقيمة الخاصية grid-column-end بعد الشرطة المائلة.

أمثلة

مثال عن استخدام grid-column لجعل عنصر grid الثاني يمتد بدءًا من خط العمود الثاني وانتهاءً بخط العمود الرابع، وجعل عنصر grid الثالث يمتد على عمودين على أن تكون نهايته عند خط العمود السابع. لاحظ استخدام الدالة repeat()‎ مع الخاصية grid-template-rows:

<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>

شيفرة CSS:

#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-column: span 2 / 7;
}

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

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

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

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

تقبل الخاصية grid-column قيمةً واحدةً أو قيمتين هما <grid-line>. إذا حُدِّدَت قيمةٌ واحدة فهي الخاصية grid-column-start، وإذا حُدِّدَت قيمتان فستؤديان إلى ضبط الخاصية grid-column-start و grid-column-end على التوالي، ويُفصَل بين القيمتين بشرطة مائلة /.

<grid-line> تُحدِّد كما يلي:

auto

تُشير هذه الكلمة المحجوزة إلى أنَّ هذه الخاصية لن تُساهم في تحديد موضع عنصر grid.

<custom-ident>

إذا كان هنالك سطرٌ له الاسم ‎<custom-ident>-start فستساهم هذه القيمة في تحديد موضع عنصر grid في ذاك العمود.

ملاحظة: المناطق المسماة (grid areas) ستولد -ضمنيًا- أسماء أعمدة لها هذا الشكل، فلو ضبطنا قيمة هذه الخاصية إلى foo، فسيبدأ العنصر من حافة المنطقة المسماة (ما لم يكن هنالك سطرٌ آخر باسم foo-start حُدِّدَ اسمه بوضوح قبل تعريف هذه المنطقة).

‎<integer> && <custom-ident>? ‎

تحديد موضع عنصر grid حسب العدد الصحيح <integer> نسبةً إلى العمود؛ وإذا كانت قيمة العدد الصحيح سالبةً فسيبدأ العد بالمقلوب، أي بدءًا من حافة النهاية للشبكة. لا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر.

span && [ <integer> || <custom-ident> ] ‎

تحديد موضع عنصر grid حسب العدد الصحيح <integer> نسبةً إلى العمود وبدءًا من حافة النهاية، ولا يجوز أن تكون قيمة العدد الصحيح مساويةً للصفر، ولا يجوز أن تكون <custom-ident> تساوي span.

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

grid-column: <grid-line> [ / <grid-line> ]?;

حيث:

<grid-line> = auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]

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

مجلوبة من "https://wiki.hsoub.com/index.php?title=CSS/grid-column&oldid=16398"