الفرق بين المراجعتين لصفحة: «CSS/Topics/Grid»

من موسوعة حسوب
< CSS‏ | Topics
مرئينص الويكي
لا ملخص تعديل
 
طلا ملخص تعديل
 
سطر 4: سطر 4:
|-
|-
|<code>[[CSS/grid|grid]]</code>
|<code>[[CSS/grid|grid]]</code>
|الخاصية <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>)، وكل ذلك في قاعدة واحدة.
|الخاصية <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>)، وكل ذلك في قاعدة واحدة.
|-
|-
|<code>[[CSS/grid-area|grid-area]]</code>
|<code>[[CSS/grid-area|grid-area]]</code>
|الخاصية <code>grid-area</code> في CSS هي خاصية مختصرة تضبط قيمة الخاصيات <code>[[CSS/grid-row-start|grid-row-start]]</code> و <code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-row-end|grid-row-end]]</code> و <code>[[CSS/grid-column-end|grid-column-end]]</code>، مُحدَّدةً أبعاد عنصر grid وموضعه.
|الخاصية <code>grid-area</code> في لغة CSS هي خاصية مختصرة تضبط قيمة الخاصيات <code>[[CSS/grid-row-start|grid-row-start]]</code> و <code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-row-end|grid-row-end]]</code> و <code>[[CSS/grid-column-end|grid-column-end]]</code>، مُحدَّدةً أبعاد عنصر grid وموضعه.
|-
|-
|<code>[[CSS/grid-auto-columns|grid-auto-columns]]</code>
|<code>[[CSS/grid-auto-columns|grid-auto-columns]]</code>
سطر 19: سطر 19:
|-
|-
|<code>[[CSS/grid-column|grid-column]]</code>
|<code>[[CSS/grid-column|grid-column]]</code>
|الخاصية <code>grid-column</code> في CSS هي خاصية مختصرة تضبط قيمة الخاصيتين<code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-column-end|grid-column-end]]</code> التي تُحدِّد أبعاد عنصر grid ومكانه في العمود.
|الخاصية <code>grid-column</code> في لغة CSS هي خاصية مختصرة تضبط قيمة الخاصيتين<code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-column-end|grid-column-end]]</code> التي تُحدِّد أبعاد عنصر grid ومكانه في العمود.
|-
|-
|<code>[[CSS/grid-column-end|grid-column-end]]</code>
|<code>[[CSS/grid-column-end|grid-column-end]]</code>
سطر 31: سطر 31:
|-
|-
|<code>[[CSS/grid-gap|grid-gap]]</code>
|<code>[[CSS/grid-gap|grid-gap]]</code>
|الخاصية <code>grid-gap</code> في CSS هي خاصيةٌ مختصرةٌ تضبط قيمة الخاصيتين <code>[[CSS/grid-row-gap|grid-row-gap]]</code> و <code>[[CSS/grid-column-gap|grid-column-gap]]</code>، وهي تُحدِّد المسافة التي تفصل بين الأسطر والأعمدة في حاوية gird.
|الخاصية <code>grid-gap</code> في لغة CSS هي خاصيةٌ مختصرةٌ تضبط قيمة الخاصيتين <code>[[CSS/grid-row-gap|grid-row-gap]]</code> و <code>[[CSS/grid-column-gap|grid-column-gap]]</code>، وهي تُحدِّد المسافة التي تفصل بين الأسطر والأعمدة في حاوية gird.
|-
|-
|<code>[[CSS/grid-row|grid-row]]</code>
|<code>[[CSS/grid-row|grid-row]]</code>
|الخاصية <code>grid-row</code> في CSS هي خاصية مختصرة تضبط قيمة الخاصيتين <code>[[CSS/grid-row-start|grid-row-start]]</code> و <code>[[CSS/grid-row-end|grid-row-end]]</code> التي تُحدِّد أبعاد عنصر grid ومكانه في السطر.
|الخاصية <code>grid-row</code> في لغة CSS هي خاصية مختصرة تضبط قيمة الخاصيتين <code>[[CSS/grid-row-start|grid-row-start]]</code> و <code>[[CSS/grid-row-end|grid-row-end]]</code> التي تُحدِّد أبعاد عنصر grid ومكانه في السطر.
|-
|-
|<code>[[CSS/grid-row-end|grid-row-end]]</code>
|<code>[[CSS/grid-row-end|grid-row-end]]</code>
سطر 46: سطر 46:
|-
|-
|<code>[[CSS/grid-template|grid-template]]</code>
|<code>[[CSS/grid-template|grid-template]]</code>
|الخاصية <code>grid-template</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>grid-template</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-template-areas|grid-template-areas]]</code>
|<code>[[CSS/grid-template-areas|grid-template-areas]]</code>
سطر 58: سطر 58:
|-
|-
|<code>[[CSS/repeat|repeat()‎]]</code>
|<code>[[CSS/repeat|repeat()‎]]</code>
|الدالة <code>repeat()‎</code> في CSS تُكرِّر جزءًا من قائمة المسارات (track list)، مما يسمح بتعريف عدد كبير من الأعمدة والأسطر التي لها نمط تكرار معيّن بسهولة.
|الدالة <code>repeat()‎</code> في لغة CSS تُكرِّر جزءًا من قائمة المسارات (track list)، مما يسمح بتعريف عدد كبير من الأعمدة والأسطر التي لها نمط تكرار معيّن بسهولة.
|}
|}

المراجعة الحالية بتاريخ 15:56، 7 أكتوبر 2022

الخاصية الوصف
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-area الخاصية grid-area في لغة CSS هي خاصية مختصرة تضبط قيمة الخاصيات grid-row-start و grid-column-start و grid-row-end و grid-column-end، مُحدَّدةً أبعاد عنصر grid وموضعه.
grid-auto-columns تضبط أبعاد مسارات الأعمدة المُنشأة ضمنيًا.
grid-auto-flow تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية.
grid-auto-rows تضبط أبعاد مسارات الأسطر المُنشأة ضمنيًا.
grid-column الخاصية grid-column في لغة CSS هي خاصية مختصرة تضبط قيمة الخاصيتينgrid-column-start و grid-column-end التي تُحدِّد أبعاد عنصر grid ومكانه في العمود.
grid-column-end تستعمل لضبط مكان نهاية عنصر grid ضمن عمود grid بتحديد رقم العمود أو الامتداد أو جعل موضع العنصر تلقائيًا.
grid-column-gap تُحدِّد المسافة التي تفصل بين الأعمدة في حاوية gird.
grid-column-start تستعمل لضبط مكان بداية عنصر grid ضمن عمود grid بتحديد رقم العمود أو الامتداد أو جعل موضع العنصر تلقائيًا.
grid-gap الخاصية grid-gap في لغة CSS هي خاصيةٌ مختصرةٌ تضبط قيمة الخاصيتين grid-row-gap و grid-column-gap، وهي تُحدِّد المسافة التي تفصل بين الأسطر والأعمدة في حاوية gird.
grid-row الخاصية grid-row في لغة CSS هي خاصية مختصرة تضبط قيمة الخاصيتين grid-row-start و grid-row-end التي تُحدِّد أبعاد عنصر grid ومكانه في السطر.
grid-row-end تستعمل لضبط مكان نهاية عنصر grid ضمن سطر grid بتحديد السطر أو الامتداد أو جعل موضع العنصر تلقائيًا.
grid-row-gap تُحدِّد المسافة التي تفصل بين الأسطر في حاوية gird.
grid-row-start تستعمل لضبط مكان بداية عنصر grid ضمن سطر grid بتحديد السطر أو الامتداد أو جعل موضع العنصر تلقائيًا.
grid-template الخاصية grid-template في لغة CSS هي خاصية مختصرة تستعمل لضبط قيم للخاصيات grid-template-rows و grid-template-columns و grid-template-areas.
grid-template-areas تضبط أسماء مناطق gird (أي grid areas).
grid-template-columns تضبط أسماء وأبعاد مسارات الأعمدة في تخطيط Grid.
grid-template-rows تضبط أسماء وأبعاد المسارات السطرية في تخطيط Grid.
repeat()‎ الدالة repeat()‎ في لغة CSS تُكرِّر جزءًا من قائمة المسارات (track list)، مما يسمح بتعريف عدد كبير من الأعمدة والأسطر التي لها نمط تكرار معيّن بسهولة.
مجلوبة من «https://wiki.hsoub.com/index.php?title=CSS/Topics/Grid&oldid=32435»