استایل دهی و ستون بندی holy grail layout چیست؟

holy grail layout یک الگوی چیدمان است که در وب بسیار متداول است. این شامل یک هدر ، یک ناحیه اصلی محتوای با پیمایش پهنای ثابت در سمت چپ ، محتوا در وسط و یک نوار کناری با عرض ثابت در سمت راست و سپس یک پاورقی است. مثل تصویر زیر:

این در صورتی است که تصویر زیر holy grail نیست.

از holy grail layout بیشتر بدانید!

holy grail layout با استفاده از روشهای گوناگونی بوجود امده است ، که احتمالاً مهمترین آنها اخیراً با Flexbox بوده است. CSS Grid Layout یک روش دیگر است ، و هنگامی که مرورگر ساپورت کند، مناسب ترین و ساده ترین روش است. این برنامه به خصوص برای دستیابی به راحتی طرح بندی کامل صفحه طراحی شده است.

بسیاری از صفحات وب به یک طرح با چند ستون (اغلب سه) ستون ، با محتوای صفحه اصلی در یک ستون (اغلب مرکز) ، و محتوای تکمیلی مانند منوها و تبلیغات در ستون های دیگر (ستون های فرعی) نیاز دارند. این ستون ها معمولاً به پیش زمینه های جداگانه و دارای مرزهایی بین آنها احتیاج دارند ، و مهم نیست که کدام ستون دارای بلندترین محتوا باشد. یک شرط معمول این است که ستون های جانبی دارای یک عرض ثابت باشند و ستون وسط آن در اندازه تنظیم شود تا پنجره پر شود. یکی دیگر از نیازهای رایج این است که ، هنگامی که در یک صفحه، محتوای کافی برای پر کردن صفحه نیست ، به جای اینکه فضای خالی زیر آن قرار بگیرد، پاورقی به پایین پنجره مرورگر فرو رود.

قطعه کد پایه

قطعه کد پایه برای شروع کدنویسی طرح holy grail این قطعه کد است.

<div class="container">
  <header>
    <!-- Header content -->
  </header>

  <nav>
    <!-- Navigation -->
  </nav>

  <main>
    <!-- Main content -->
  </main>

  <aside>
    <!-- Sidebar / Ads -->
  </aside>

  <footer>
    <!-- Footer content -->
  </footer>
</div>

میتوانید برای استایل دهی ان از flexbox یا css grid استفاده کنید. آسان بگیرید!

محتوای این مقاله از این سایت ترجمه شده است.