تخطيط الكأس المقدسة
تنظيم صفحاتك في مجموعات
يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.
بالنسبة لتخطيط الكأس المقدس الكلاسيكي هذا، يوجد رأس وتذييل وشريط جانبي أيسر وشريط جانبي أيمن ومحتوى رئيسي. إنه مشابه للتخطيط السابق، ولكن الآن مع أشرطة جانبية!
لكتابة هذه الشبكة بأكملها باستخدام سطر واحد من الرموز، استخدم السمة grid-template
. هذا يمكّنك من تعيين كل من الصفوف والأعمدة في نفس الوقت.
زوج الخاصية والقيمة هو: grid-template: auto 1fr auto / auto 1fr auto
. الشرطة المائلة بين القائمة الأولى والثانية المفصولة بمسافات هي الفاصل بين الصفوف والأعمدة.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
كما في المثال الأخير، حيث كان رأس الصفحة وتذييلها يحتويان على محتوى تم تغيير حجمه تلقائيًا، يتم هنا تغيير حجم الشريط الجانبي الأيمن والأيسر تلقائيًا بناءً على الحجم الأساسي للأطفال. ومع ذلك، يكون الحجم هذه المرة أفقيًا (العرض) بدلاً من الرأسي (الارتفاع).
HTML
<div class="parent">
<header class="section coral">Header</header>
<div class="left-side section blue">Left Sidebar</div>
<main class="section green"> Main Content</main>
<div class="right-side section yellow">Right Sidebar</div>
<footer class="section coral">Footer</footer>
</div>
CSS
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
header {
padding: 2rem;
grid-column: 1 / 4;
}
.left-side {
grid-column: 1 / 2;
}
main {
grid-column: 2 / 3;
}
.right-side {
grid-column: 3 / 4;
}
footer {
grid-column: 1 / 4;
}
إنّ محتوى هذه الصفحة مرخّص بموجب ترخيص Creative Commons Attribution 4.0 ما لم يُنصّ على خلاف ذلك، ونماذج الرموز مرخّصة بموجب ترخيص Apache 2.0 . للاطّلاع على التفاصيل، يُرجى مراجعة سياسات موقع Google Developers . إنّ Java هي علامة تجارية مسجَّلة لشركة Oracle و/أو شركائها التابعين.
تاريخ التعديل الأخير: 2023-10-25 (حسب التوقيت العالمي المتفَّق عليه)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"لا يحتوي على المعلومات التي أحتاج إليها."
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"الخطوات معقدة للغاية / كثيرة جدًا."
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"المحتوى قديم."
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"ثمة مشكلة في الترجمة."
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"مشكلة في العيّنات / التعليمات البرمجية"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"غير ذلك"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"يسهُل فهم المحتوى."
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"ساعَدني المحتوى في حلّ مشكلتي."
},{
"type": "thumb-up",
"id": "otherUp",
"label":"غير ذلك"
}]
{"lastModified": "\u062a\u0627\u0631\u064a\u062e \u0627\u0644\u062a\u0639\u062f\u064a\u0644 \u0627\u0644\u0623\u062e\u064a\u0631: 2023-10-25 (\u062d\u0633\u0628 \u0627\u0644\u062a\u0648\u0642\u064a\u062a \u0627\u0644\u0639\u0627\u0644\u0645\u064a \u0627\u0644\u0645\u062a\u0641\u0651\u064e\u0642 \u0639\u0644\u064a\u0647)"}
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2023-10-25 (حسب التوقيت العالمي المتفَّق عليه)"],[],[]]