تخطيط الكأس المقدسة

بالنسبة لتخطيط الكأس المقدس الكلاسيكي هذا، يوجد رأس وتذييل وشريط جانبي أيسر وشريط جانبي أيمن ومحتوى رئيسي. إنه مشابه للتخطيط السابق، ولكن الآن مع أشرطة جانبية!

لكتابة هذه الشبكة بأكملها باستخدام سطر واحد من الرموز، استخدم السمة grid-template. هذا يمكّنك من تعيين كل من الصفوف والأعمدة في نفس الوقت.

زوج الخاصية والقيمة هو: grid-template: auto 1fr auto / auto 1fr auto. الشرطة المائلة بين القائمة الأولى والثانية المفصولة بمسافات هي الفاصل بين الصفوف والأعمدة.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

كما في المثال الأخير، حيث كان رأس الصفحة وتذييلها يحتويان على محتوى تم تغيير حجمه تلقائيًا، يتم هنا تغيير حجم الشريط الجانبي الأيمن والأيسر تلقائيًا بناءً على الحجم الأساسي للأطفال. ومع ذلك، يكون الحجم هذه المرة أفقيًا (العرض) بدلاً من الرأسي (الارتفاع).

<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>

        .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;
}