شبكة CSS
تعرف على كيفية تمكين واستخدام وتخصيص نظام التخطيط البديل الخاص بنا المبني على شبكة CSS مع أمثلة ومقتطفات التعليمات البرمجية.
يمثل نظام الشبكة الافتراضي في Bootstrap تتويجًا لما يزيد عن عقد من تقنيات تخطيط CSS ، التي جربها واختبرها ملايين الأشخاص. ولكن ، تم إنشاؤه أيضًا بدون العديد من ميزات وتقنيات CSS الحديثة التي نراها في المتصفحات مثل شبكة CSS الجديدة.
كيف تعمل
باستخدام Bootstrap 5 ، أضفنا خيارًا لتمكين نظام شبكة منفصل مبني على CSS Grid ، ولكن مع تطور Bootstrap. لا يزال بإمكانك الحصول على فصول يمكنك تطبيقها بناءً على نزوة لبناء تخطيطات سريعة الاستجابة ، ولكن بنهج مختلف تحت الغطاء.
-
تم قبول شبكة CSS. قم بتعطيل نظام الشبكة الافتراضي عن طريق ضبط
$enable-grid-classes: false
وتمكين شبكة CSS عن طريق الإعداد$enable-cssgrid: true
. ثم أعد تجميع ملف Sass الخاص بك. -
استبدل مثيلات
.row
بـ.grid
. يقوم.grid
الفصل بتعيينdisplay: grid
وإنشاء عنصرgrid-template
تقوم بالبناء عليه باستخدام HTML الخاص بك. -
استبدل
.col-*
الفصول.g-col-*
بالفصول الدراسية. هذا لأن أعمدة شبكة CSS لدينا تستخدمgrid-column
الخاصية بدلاً منwidth
. -
يتم تعيين أحجام الأعمدة والتوثيق عبر متغيرات CSS. قم بتعيينها على الأصل
.grid
وقم بتخصيصها بالطريقة التي تريدها ، مضمنة أو في ورقة أنماط ، باستخدام--bs-columns
و--bs-gap
.
في المستقبل ، من المحتمل أن يتحول Bootstrap إلى حل هجين حيث أن gap
الخاصية قد حققت دعمًا كاملاً تقريبًا للمتصفح لـ flexbox.
الاختلافات الرئيسية
مقارنة بنظام الشبكة الافتراضي:
-
لا تؤثر أدوات Flex المساعدة على أعمدة شبكة CSS بنفس الطريقة.
-
الفجوات تستبدل المزاريب. تحل الخاصية محل
gap
الأفقيpadding
من نظام الشبكة الافتراضي الخاص بنا ويعمل بشكل أشبهmargin
. -
على هذا النحو ، على عكس
.row
s ،.grid
ليس لها هوامش سلبية ولا يمكن استخدام أدوات الهامش لتغيير مزاريب الشبكة. يتم تطبيق فجوات الشبكة أفقيًا وعموديًا بشكل افتراضي. راجع قسم التخصيص لمزيد من التفاصيل. -
يجب عرض الأنماط المضمّنة والمخصصة على أنها بدائل لفئات المُعدِّل (على سبيل المثال ،
style="--bs-columns: 3;"
مقابلclass="row-cols-3"
). -
يعمل التداخل بشكل مشابه ، ولكنه قد يتطلب منك إعادة تعيين أعداد الأعمدة الخاصة بك على كل مثيل متداخل
.grid
. راجع قسم التعشيش للحصول على التفاصيل.
أمثلة
ثلاثة أعمدة
يمكن إنشاء ثلاثة أعمدة متساوية العرض عبر جميع منافذ العرض والأجهزة باستخدام .g-col-4
الفئات. أضف فئات متجاوبة لتغيير التنسيق حسب حجم منفذ العرض.
<div class="grid">
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
<div class="g-col-4">.g-col-4</div>
</div>
متجاوب
استخدم الفئات المتجاوبة لضبط التنسيق عبر إطارات العرض. نبدأ هنا بعمودين في أضيق إطارات عرض ، ثم ننمو إلى ثلاثة أعمدة في إطارات عرض متوسطة وما فوق.
<div class="grid">
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
<div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>
قارن ذلك بتخطيط العمودين في جميع إطارات العرض.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
يلف
تلتف عناصر الشبكة تلقائيًا إلى السطر التالي عندما لا يكون هناك مساحة أفقية. لاحظ أن هذا gap
ينطبق على الفجوات الأفقية والرأسية بين عناصر الشبكة.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
يبدأ
تهدف فئات البداية إلى استبدال فئات الإزاحة الافتراضية للشبكة ، لكنها ليست متماثلة تمامًا. تنشئ CSS Grid نموذجًا للشبكة من خلال الأنماط التي تطلب من المستعرضات "البدء من هذا العمود" و "الانتهاء عند هذا العمود". هذه الخصائص هي grid-column-start
و grid-column-end
. فصول البداية هي اختصار للأول. قم بإقرانها مع فئات الأعمدة لتغيير حجم الأعمدة ومواءمتها كيفما تشاء. تبدأ فئات البداية 1
كما 0
هي قيمة غير صالحة لهذه الخصائص.
<div class="grid">
<div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
<div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>
أعمدة السيارات
في حالة عدم وجود فئات في عناصر الشبكة (العناصر الفرعية المباشرة لـ a .grid
) ، سيتم تغيير حجم كل عنصر في الشبكة تلقائيًا إلى عمود واحد.
<div class="grid">
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
يمكن خلط هذا السلوك مع فئات أعمدة الشبكة.
<div class="grid">
<div class="g-col-6">.g-col-6</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
التعشيش
على غرار نظام الشبكة الافتراضي الخاص بنا ، تتيح شبكة CSS الخاصة بنا تداخل سهل لـ .grid
s. ومع ذلك ، بخلاف الشبكة الافتراضية ، ترث هذه الشبكة التغييرات في الصفوف والأعمدة والفجوات. ضع في اعتبارك المثال أدناه:
- نتجاوز العدد الافتراضي للأعمدة بمتغير CSS محلي
--bs-columns: 3
:. - في العمود التلقائي الأول ، يتم اكتساب عدد الأعمدة ويمثل كل عمود ثلث العرض المتاح.
- في العمود التلقائي الثاني ، قمنا بإعادة تعيين عدد الأعمدة في العمود المتداخل
.grid
إلى 12 (الافتراضي لدينا). - لا يحتوي العمود التلقائي الثالث على محتوى متداخل.
في الممارسة العملية ، يسمح هذا بتخطيطات أكثر تعقيدًا ومخصصة عند مقارنتها بنظام الشبكة الافتراضي الخاص بنا.
<div class="grid" style="--bs-columns: 3;">
<div>
First auto-column
<div class="grid">
<div>Auto-column</div>
<div>Auto-column</div>
</div>
</div>
<div>
Second auto-column
<div class="grid" style="--bs-columns: 12;">
<div class="g-col-6">6 of 12</div>
<div class="g-col-4">4 of 12</div>
<div class="g-col-2">2 of 12</div>
</div>
</div>
<div>Third auto-column</div>
</div>
التخصيص
قم بتخصيص عدد الأعمدة وعدد الصفوف وعرض الفجوات باستخدام متغيرات CSS المحلية.
عامل | القيمة الاحتياطية | وصف |
---|---|---|
--bs-rows |
1 |
عدد الصفوف في قالب الشبكة الخاص بك |
--bs-columns |
12 |
عدد الأعمدة في قالب الشبكة الخاص بك |
--bs-gap |
1.5rem |
حجم الفجوة بين الأعمدة (الرأسية والأفقية) |
هذه المتغيرات CSS ليس لها قيمة افتراضية ؛ بدلاً من ذلك ، يقومون بتطبيق القيم الاحتياطية التي يتم استخدامها حتى يتم توفير مثيل محلي. على سبيل المثال ، نستخدم var(--bs-rows, 1)
صفوف شبكة CSS الخاصة بنا ، والتي تتجاهل --bs-rows
لأن ذلك لم يتم تعيينه في أي مكان بعد. بمجرد أن يتم ذلك ، .grid
سيستخدم المثيل هذه القيمة بدلاً من القيمة الاحتياطية لـ 1
.
لا توجد فئات للشبكة
عناصر الأطفال الفورية .grid
هي عناصر الشبكة ، لذلك سيتم تحديد حجمها دون إضافة .g-col
فصل صريح.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
الأعمدة والفجوات
اضبط عدد الأعمدة والفجوة.
<div class="grid" style="--bs-columns: 4; --bs-gap: 5rem;">
<div class="g-col-2">.g-col-2</div>
<div class="g-col-2">.g-col-2</div>
</div>
<div class="grid" style="--bs-columns: 10; --bs-gap: 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-4">.g-col-4</div>
</div>
مضيفا الصفوف
إضافة المزيد من الصفوف وتغيير موضع الأعمدة:
<div class="grid" style="--bs-rows: 3; --bs-columns: 3;">
<div>Auto-column</div>
<div class="g-start-2" style="grid-row: 2">Auto-column</div>
<div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>
ثغرات
قم بتغيير الفجوات الرأسية فقط عن طريق تعديل row-gap
. لاحظ أننا نستخدم s ، ولكن ويمكن تعديلها حسب الحاجة gap
..grid
row-gap
column-gap
<div class="grid" style="row-gap: 0;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
لهذا السبب ، يمكن أن يكون لديك قيم رأسية وأفقية مختلفة gap
، والتي يمكن أن تأخذ قيمة واحدة (جميع الجوانب) أو زوجًا من القيم (رأسيًا وأفقيًا). يمكن تطبيق ذلك بنمط مضمّن لمتغير CSS الخاص gap
بنا أو باستخدامه .--bs-gap
<div class="grid" style="--bs-gap: .25rem 1rem;">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
ساس
يتمثل أحد قيود شبكة CSS في أن الفئات الافتراضية الخاصة بنا لا تزال تُنشأ بواسطة متغيرين Sass ، $grid-columns
و $grid-gutter-width
. هذا يحدد مسبقًا بشكل فعال عدد الفئات التي تم إنشاؤها في CSS المترجم لدينا. لديك خياران فقط:
- قم بتعديل متغيرات Sass الافتراضية وأعد ترجمة CSS.
- استخدم الأنماط المضمنة أو المخصصة لزيادة الفئات المتوفرة.
على سبيل المثال ، يمكنك زيادة عدد الأعمدة وتغيير حجم الفجوة ، ثم تغيير حجم "الأعمدة" بمزيج من الأنماط المضمنة وفئات أعمدة شبكة CSS المحددة مسبقًا (على سبيل المثال ، .g-col-4
).
<div class="grid" style="--bs-columns: 18; --bs-gap: .5rem;">
<div style="grid-column: span 14;">14 columns</div>
<div class="g-col-4">.g-col-4</div>
</div>