گرید کوچک (Grid Small)

اینجا درباره «گرید کوچک (Small)» حرف می زنیم. «گرید (Grid)» یعنی چیدن محتوا در ستون ها. برای Small از پیشوند .col-sm- استفاده می کنیم. Small یعنی عرض 576 تا 767 پیکسل.

تقسیم بندی 25%/75% در Small

دو ستون می خواهیم. در Small و بالاتر 25/75 می شوند. در XSmall زیرهم می آیند.

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3 bg-primary">
      <p>ناوبری</p>
    </div>
    <div class="col-sm-9 bg-dark text-white">
      <p>محتوا</p>
    </div>
  </div>
</div>

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

تقسیم بندی 33/66 و 50/50

برای 33/66 از .col-sm-4 و .col-sm-8 استفاده کن. برای نصف نصف از .col-sm-6 و .col-sm-6 کمک بگیر.

<!-- 33.3% / 66.6% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 bg-primary">
      <p>ستون 1</p>
    </div>
    <div class="col-sm-8 bg-dark text-white">
      <p>ستون 2</p>
    </div>
  </div>
</div>

<!-- 50% / 50% -->
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 bg-primary">
      <p>ستون A</p>
    </div>
    <div class="col-sm-6 bg-dark text-white">
      <p>ستون B</p>
    </div>
  </div>
</div>

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

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

اگر عدد را حذف کنی و فقط .col-sm بدهی، همه ستون ها برابر می شوند. در XSmall ستون ها زیرهم قرار می گیرند.

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

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

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

گام های عملی

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

نکته: Small یعنی از 576 پیکسل شروع می شود و رو به بالا اثر دارد.

هشدار: ستون های باریک را با متن طولانی شلوغ نکن. خوانایی می افتد.

لینک های مرتبط

برای شروع، سیستم گرید را ببین. سپس گرید بسیار کوچک را مرور کن. همین صفحه با انکر گرید کوچک نیز ارجاع می شود. ادامه ی مسیر در گرید متوسط است.

جمع بندی سریع

• .col-sm-* برای Small و بالاتر است.
• 25/75 با 3 و 9 ساخته می شود.
• 33/66 با 4 و 8 ممکن است.
• .col-sm ستون های برابر می سازد.
• در XSmall ستون ها عمودی می شوند.