الفرق بين المراجعتين لصفحة: «CSS/grid-template-areas»
< CSS
لا ملخص تعديل |
لا ملخص تعديل |
||
| (2 مراجعات متوسطة بواسطة نفس المستخدم غير معروضة) | |||
| سطر 37: | سطر 37: | ||
== أمثلة == | == أمثلة == | ||
استعملنا في المثال الآتي عناصر <code>[[HTML/section|<section>]]</code> و <code>[[HTML/header|<header>]]</code> و <code>[[HTML/nav|<nav>]]</code> و <code>[[HTML/main|<main>]]</code> و <code>[[HTML/footer|<footer>]]</code> لإنشاء تقسيم للصفحة، لاحظ كيف استخدمنا الخاصية <code>grid-template-areas</code> لتعريف أسماء المناطق، وكيف استعملنا الأسماء مع الخاصية <code>[[CSS/grid-area|grid-area]]</code>:<syntaxhighlight lang="html"> | استعملنا في المثال الآتي عناصر <code>[[HTML/section|<section>]]</code> و <code>[[HTML/header|<header>]]</code> و <code>[[HTML/nav|<nav>]]</code> و <code>[[HTML/main|<main>]]</code> و <code>[[HTML/footer|<footer>]]</code> لإنشاء تقسيم للصفحة، لاحظ كيف استخدمنا الخاصية <code>grid-template-areas</code> لتعريف أسماء المناطق، وكيف استعملنا الأسماء مع الخاصية <code>[[CSS/grid-area|grid-area]]</code>:<syntaxhighlight lang="html"> | ||
<section id="page"> | <section id="page"> | ||
<header>الرأس</header> | |||
<nav>قائمة التنقل</nav> | |||
<main>المنطقة الرئيسية</main> | |||
<footer>الذيل</footer> | |||
</section> | </section> | ||
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | </syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css"> | ||
#page { | #page { | ||
| سطر 108: | سطر 108: | ||
grid-template-areas: none | <string>+; | grid-template-areas: none | <string>+; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
== انظر أيضًا == | |||
* صفحة الخاصيات الفرعية التي تضبطها الخاصية <code>[[CSS/grid-template|grid-template]]</code> وهي <code>[[CSS/grid-template-rows|grid-template-rows]]</code> و <code>[[CSS/grid-template-columns|grid-template-columns]]</code>. | |||
* صفحة الخاصية <code>[[CSS/grid-auto-rows|grid-auto-rows]]</code> التي تضبط أبعاد مسارات الأسطر المُنشأة ضمنيًا. | |||
* صفحة الخاصية <code>[[CSS/grid-auto-flow|grid-auto-flow]]</code> التي تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية. | |||
* صفحة الخاصية <code>[[CSS/grid-column|grid-column]]</code> والخاصيات الفرعية منها وهي: <code>[[CSS/grid-column-start|grid-column-start]]</code> و <code>[[CSS/grid-column-end|grid-column-end]]</code> و <code>[[CSS/grid-column-gap|grid-column-gap]]</code>. | |||
* صفحة الخاصية <code>[[CSS/grid-column|grid-]][[CSS/grid-row|row]]</code> والخاصيات الفرعية منها وهي: <code>[[CSS/grid-row-start|grid-row-start]]</code> و <code>[[CSS/grid-row-end|grid-row-end]]</code> و <code>[[CSS/grid-column-gap|grid-]][[CSS/grid-row-gap|row]][[CSS/grid-column-gap|-gap]]</code>. | |||
== مصادر ومواصفات == | == مصادر ومواصفات == | ||
* مواصفة [https://drafts.csswg.org/css-grid/#propdef-grid-template-areas CSS Grid Layout]. | * مواصفة [https://drafts.csswg.org/css-grid/#propdef-grid-template-areas CSS Grid Layout]. | ||
المراجعة الحالية بتاريخ 14:16، 24 أكتوبر 2018
الخاصية grid-template-areas في CSS تضبط أسماء مناطق gird (أي grid areas).
بطاقة الخاصية
| القيمة الابتدائية | none
|
|---|---|
| تُطبَّق على | حاويات grid. |
| قابلة للوراثة | لا |
| قابلة للتحريك | لا |
| القيمة المحسوبة | كما حُدِّدَت. |
/* كلمة محجوزة */
grid-template-areas: none;
/* <string> سلاسل نصية */
grid-template-areas: "a b";
grid-template-areas: "a b b"
"a c d";
/* القيم العامة */
grid-template-areas: inherit;
grid-template-areas: initial;
grid-template-areas: unset;
هذه المناطق ليست مرتبطةً بأيّ عنصر grid، لكن يمكن الإشارة إليها من خاصيات تحديد مواضع الشبكة التي هي grid-row-start و grid-row-end و grid-column-start و grid-column-end، والخاصيات المختصرة grid-row و grid-column و grid-area.
أمثلة
استعملنا في المثال الآتي عناصر <section> و <header> و <nav> و <main> و <footer> لإنشاء تقسيم للصفحة، لاحظ كيف استخدمنا الخاصية grid-template-areas لتعريف أسماء المناطق، وكيف استعملنا الأسماء مع الخاصية grid-area:
<section id="page">
<header>الرأس</header>
<nav>قائمة التنقل</nav>
<main>المنطقة الرئيسية</main>
<footer>الذيل</footer>
</section>
شيفرة CSS:
#page {
display: grid;
width: 100%;
height: 250px;
grid-template-areas: "head head"
"nav main"
"nav foot";
grid-template-rows: 50px 1fr 30px;
grid-template-columns: 150px 1fr;
}
#page > header {
grid-area: head;
background-color: #8ca0ff;
}
#page > nav {
grid-area: nav;
background-color: #ffa08c;
}
#page > main {
grid-area: main;
background-color: #ffff64;
}
#page > footer {
grid-area: foot;
background-color: #8cffa0;
}
دعم المتصفحات
| الميزة | Chrome | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| الدعم الأساسي | 57.0 | 52.0 | 10 (مع السابقة -ms-)
|
44 | 10.1 |
الإصدارات القديمة من متصفح Edge كانت تدعم تخطيط Grid دعمًا جزئيًا (كما في متصفح IE)، لكن الإصدار Edge 16 أصبح يدعم تخطيط Gird دعمًا كاملًا.
البنية العامة
تقبل الخاصية grid-template-areas القيم التالية.
none
لن تُعرَّف أيّة مناطق مسماة داخل حاوية grid.
<string> +
كل سلسلة نصية تُمثِّل سطرًا، وكل قيمة في تلك السلسلة النصية تُمثِّل عمودًا، ويجب أن يكون لجميع السلاسل النصية العدد نفسه من الكلمات، وإلا فلن تكون قيمة هذه الخاصية صالحةً.
إذا امتدت إحدى الخلايا على أكثر من سطر، فيمكن تكرار القيمة نفسها أكثر من مرة. وإذا أردنا ترك منطقة دون تسمية فيمكن استخدام نقطة واحدة أو أكثر مكانها.
البنية الرسمية
grid-template-areas: none | <string>+;
انظر أيضًا
- صفحة الخاصيات الفرعية التي تضبطها الخاصية
grid-templateوهيgrid-template-rowsوgrid-template-columns. - صفحة الخاصية
grid-auto-rowsالتي تضبط أبعاد مسارات الأسطر المُنشأة ضمنيًا. - صفحة الخاصية
grid-auto-flowالتي تضبط كيف ستعمل خوارزمية تحديد مواضع عناصر grid التلقائية. - صفحة الخاصية
grid-columnوالخاصيات الفرعية منها وهي:grid-column-startوgrid-column-endوgrid-column-gap. - صفحة الخاصية
grid-rowوالخاصيات الفرعية منها وهي:grid-row-startوgrid-row-endوgrid-row-gap.
مصادر ومواصفات
- مواصفة CSS Grid Layout.