گرید خیلی بزرگ (Grid XLarge)

در «گرید خیلی بزرگ» از کلاس های .col-xl-* استفاده می کنیم. «گرید (Grid)» یعنی چیدن ستون ها در ردیف. نقطه شکست XLarge از عرض 1200 پیکسل شروع می شود. هدف ما تنظیم نسبت ستون ها در این بازه است.

ترکیب sm/md/lg/xl: 25/75 → 50/50 → 33/66 → 20/80

قبلاً 25/75 در small و 50/50 در medium و 33/66 در large داشتیم. حالا برای XLarge می خواهیم 20/80 بسازیم.

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-primary text-white">
      <p>ستون 1</p>
    </div>
    <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-dark text-white">
      <p>ستون 2</p>
    </div>
  </div>
</div>

مشاهده در ادیتور

فقط XLarge: مساوی در xl و بزرگ تر

اگر فقط .col-xl-6 بدهیم، از 1200 پیکسل به بالا 50/50 می شود. در اندازه های پایین تر، ستون ها عمودی می شوند.

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-6">
      <p>نیمه چپ</p>
    </div>
    <div class="col-xl-6">
      <p>نیمه راست</p>
    </div>
  </div>
</div>

مشاهده در ادیتور

ستون های برابر با Auto Layout در xl

اگر عدد را حذف کنیم و .col-xl بنویسیم، همه ستون ها هم عرض می شوند. زیر 1200 پیکسل، ستون ها عمودی می شوند.

<!-- دو ستون برابر در xl+ -->
<div class="row">
  <div class="col-xl">1 of 2</div>
  <div class="col-xl">2 of 2</div>
</div>

<!-- چهار ستون برابر در xl+ -->
<div class="row">
  <div class="col-xl">1 of 4</div>
  <div class="col-xl">2 of 4</div>
  <div class="col-xl">3 of 4</div>
  <div class="col-xl">4 of 4</div>
</div>

مشاهده در ادیتور

گام های عملی

1. یک container یا container-fluid بساز.
2. یک row اضافه کن برای هر ردیف.
3. ستون ها را با .col-sm-*، .col-md-*، .col-lg-*، .col-xl-* بساز.
4. مجموع اعداد هر ردیف حداکثر 12 باشد.
5. نمایش زیر 1200 پیکسل را تست و بازبینی کن.

نکته: کلاس ها پله ای بالا می روند. xl روی بزرگ ترها هم اثر دارد.

هشدار: ستون 2 از 12 بسیار باریک است. متن طولانی نگذار.

لینک های داخلی

برای درک مسیر، از گرید خیلی بزرگ بعد از گرید بزرگ عبور کن و سپس به گرید فوق العاده بزرگ برو.

جمع بندی سریع

• .col-xl-* از 1200px فعال می شود.
• الگو 20/80 در XLarge رایج است.
• .col-xl ستون های برابر می سازد.
• زیر 1200px ستون ها عمودی می شوند.
• همیشه مجموع ستون ها حداکثر 12 باشد.