الفراغات الفاصلة (Gutters)

كيفية عملها !

• الفراغات الفاصلة (Gutters) هي الفجوات بين محتوى الأعمدة، والتي يتم إنشاؤها بواسطة padding الأفقي. نقوم بتعيين padding-right و padding-left لكل عمود، ونستخدم margin سالب لتعويض ذلك في بداية ونهاية كل صف لمحاذاة المحتوى.

• تبدأ الفراغات الفاصلة (Gutters) بعرض 1.5rem (24px). وهذا يتيح لنا مطابقة الشبكة الخاصة بنا مع مقياس عناصر تباعد الهوامش الداخلية والخارجية.

• يمكن تعديل الفراغات الفاصلة (Gutters) بشكل متوافق مع الشاشات (Responsive). استخدم فئات الفراغات الفاصلة الخاصة بنقاط التوقف (breakpoints) لتعديل الفراغات الأفقية، والفراغات الرأسية، وجميع الفراغات.

الفراغات الأفقية (Horizontal gutters)

يمكن استخدام فئات .gx-* للتحكم في عرض الفراغات الأفقية. قد يحتاج العنصر الأب .container أو .container-fluid إلى التعديل إذا تم استخدام فراغات أكبر لتجنب الفيضان غير المرغوب فيه، وذلك باستخدام أداة padding مطابقة. على سبيل المثال، في المثال التالي قمنا بزيادة الهامش الداخلي باستخدام .px-4:

<div class="container px-4 text-center">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

حل بديل هو إضافة غلاف حول .row باستخدام الفئة .overflow-hidden:

<div class="container overflow-hidden text-center">
  <div class="row gx-5">
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

الفراغات الفاصلة العمودية

يمكن استخدام فئات .gy-* للتحكم في عرض الفراغات الرأسية داخل الصف عندما تلتف الأعمدة إلى أسطر جديدة. ومثل الفراغات الأفقية، يمكن أن تتسبب الفراغات الرأسية في حدوث بعض الفيضان أسفل .row في نهاية الصفحة. إذا حدث ذلك، يمكنك إضافة غلاف حول .row باستخدام الفئة .overflow-hidden:

<div class="container overflow-hidden text-center">
  <div class="row gy-5">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

الفراغات الفاصلة الأفقية والعمودية

يمكن استخدام فئات .g-* للتحكم في الفراغات الفاصلة (Gutters) الأفقية والرأسية للشبكة. في المثال أدناه، نستخدم عرض فراغ فاصل أصغر، لذا لا توجد حاجة لفئة الغلاف .overflow-hidden.

<div class="container text-center">
  <div class="row g-2">
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
    <div class="col-6">
      <div class="p-3">Custom column padding</div>
    </div>
  </div>
</div>

الفراغات الفاصلة لأعمدة الصفوف

يمكن أيضاً إضافة فئات (classes) للفراغات الفاصلة (gutter) إلى أعمدة الصفوف. في المثال التالي، نستخدم أعمدة صفوف متوافقة مع الشاشات (Responsive) وفئات (classes) gutter متوافقة مع الشاشات (Responsive).

<div class="container text-center">
  <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
    <div class="col">
      <div class="p-3">Row column</div>
    </div>
  </div>
</div>

العمل بدون الفراغات الفاصلة

يمكن إزالة الفراغات الفاصلة بين الأعمدة في فئات الشبكة المحددة مسبقاً باستخدام .g-0. وهذا يزيل الهوامش الخارجية margin السالبة من .row والهوامش الداخلية padding الأفقية من جميع الأعمدة الأبناء المباشرة.

هل تحتاج إلى تصميم يمتد من الحافة إلى الحافة؟ قم بإزالة العنصر الأب .container أو .container-fluid وأضف .mx-0 إلى .row لمنع الفيضان.

من الناحية العملية، إليك كيف يبدو ذلك. لاحظ أنه يمكنك الاستمرار في استخدام هذا مع جميع فئات الشبكة المحددة مسبقاً الأخرى (بما في ذلك عرض الأعمدة، والمستويات المتوافقة مع الشاشات، وإعادة الترتيب، والمزيد).

<div class="row g-0 text-center">
  <div class="col-sm-6 col-md-8">.col-sm-6 .col-md-8</div>
  <div class="col-6 col-md-4">.col-6 .col-md-4</div>
</div>

تغيير الفراغات الفاصلة (gutters)

يتم بناء الفئات (classes) من خريطة (map) الـ $gutters في الـ Sass والتي يتم توريثها من خريطة (map) الـ $spacers في الـ Sass.

$grid-gutter-width: 1.5rem;
$gutters: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);