شروع‌ها
.g-col-3 .g-start-2
.g-col-4 .g-start-6
ریسپانسیو
.g-col-md-4
.g-col-md-4
.g-col-md-4
این را با طرح دو ستونه در تمام نماها مقایسه کنید.
.g-col-6
.g-col-6
ستون‌های خودکار
زمانی که هیچ کلاسی برای آیتم‌های شبکه (فرزندان مستقیم یک .grid) وجود نداشته باشد، هر آیتم شبکه به طور خودکار به یک ستون اندازه‌گذاری می‌شود.
.g-col-6
.g-col-6
.g-col-6
.g-col-6
این رفتار می‌تواند با کلاس‌های ستون شبکه ترکیب شود.
.g-col-6
1
1
1
1
1
1
ستون‌ها و فاصله‌ها
.g-col-2
.g-col-2
.g-col-6
.g-col-4
فاصله‌ها
برای تغییر تنها فاصله‌های عمودی، فقط row-gap را تغییر دهید. توجه داشته باشید که ما از gap روی .grid استفاده می‌کنیم، اما row-gap و column-gap می‌توانند به دلخواه تغییر یابند.
.g-col-6
.g-col-6
.g-col-6
.g-col-6
به همین دلیل، شما می‌توانید فاصله‌های عمودی و افقی مختلفی داشته باشید که می‌توانند یک مقدار (برای تمام طرف‌ها) یا یک جفت مقدار (برای عمودی و افقی) را بگیرند. این مورد می‌تواند با یک استایل درون خطی برای gap یا با استفاده از متغیر CSS --bs-gap اعمال شود.
.g-col-6
.g-col-6
.g-col-6
.g-col-6
سه ستون
.g-col-4
.g-col-4
.g-col-4
جمع‌آوری
.g-col-6
.g-col-6
.g-col-6
.g-col-6
لانه‌سازی
اولین ستون خودکار
ستون خودکار
ستون خودکار
ستون خودکار دوم
6 of 12
4 of 12
2 of 12
ستون خودکار سوم
بدون کلاس‌های گرید
ستون خودکار
ستون خودکار
ستون خودکار
افزودن ردیف‌ها
ستون خودکار
ستون خودکار
ستون خودکار
سفارشی سازی
| متغیر | مقدار پیش‌فرض | توضیحات |
|---|---|---|
--bs-rows |
1 |
تعداد ردیف‌ها در قالب شبکه شما |
--bs-columns |
12 |
تعداد ستون‌ها در قالب شبکه شما |
--bs-gap |
1.5rem |
اندازه فاصله بین ستون‌ها (عمودی و افقی) |