۵ ساختار مدرن با CSS Grid که جایگزین بوت‌استرپ می‌شوند

🚀 خلاصه مقاله در یک نگاه: نقشه راه شما با CSS Grid

.gallery-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* ستون‌ها حداقل 250px و حداکثر 1fr */
  gap: 20px; /* فاصله بین آیتم‌ها */
  padding: 20px;
  background-color: #ecf0f1;
  border-radius: 8px;
}

.gallery-item {
  border: 1px solid #bdc3c7;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.gallery-item img {
  width: 100%;
  height: 200px; /* ارتفاع ثابت برای تصاویر */
  object-fit: cover; /* پر کردن کادر بدون تغییر نسبت */
  display: block;
}

.gallery-item-title {
  padding: 10px;
  background-color: #fff;
  font-weight: 600;
  color: #34495e;
  text-align: center;
}

<div class="gallery-container">
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x200/F4D03F/fff?text=Image+1" alt="Image 1">
        <div class="gallery-item-title">تصویر زیبا ۱</div>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x200/5DADE2/fff?text=Image+2" alt="Image 2">
        <div class="gallery-item-title">تصویر زیبا ۲</div>
    </div<
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x200/AF7AC5/fff?text=Image+3" alt="Image 3">
        <div class="gallery-item-title">تصویر زیبا ۳</div>
    </div>
    <div class="gallery-item">
        <img src="https://via.placeholder.com/300x200/52BE80/fff?text=Image+4" alt="Image 4">
        <div class="gallery-item-title">تصویر زیبا ۴</div>
    </div>
</div>

.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* حداقل 280px، حداکثر 1fr */
  gap: 30px;
  padding: 20px;
  background-color: #f4f7f6;
  border-radius: 10px;
}

.product-card {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
}

.product-card img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
}

.product-info {
  padding: 15px;
  text-align: center;
}

.product-info h3 {
  font-size: 1.3em;
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 10px;
}

.product-info p {
  color: #7f8c8d;
  font-size: 0.9em;
  margin-bottom: 15px;
}

.product-info .price {
  font-size: 1.4em;
  font-weight: 700;
  color: #e67e22;
  margin-bottom: 15px;
}

.product-info button {
  background-color: #28a745;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease;
}

.product-info button:hover {
  background-color: #218838;
}

<div class="product-grid">
    <div class="product-card">
        <img src="https://via.placeholder.com/300x220/8E44AD/fff?text=Product+A" alt="Product A">
        <div class="product-info">
            <h3>موس بی‌سیم</h3>
            <p>موسی راحت و دقیق برای کاربری روزمره.</p>
            <div class="price">۹۹,۰۰۰ تومان</div>
            <button>افزودن به سبد</button>
        </div>
    </div>
    <div class="product-card">
        <img src="https://via.placeholder.com/300x220/3498DB/fff?text=Product+B" alt="Product B">
        <div class="product-info">
            <h3>کیبورد مکانیکی</h3>
            <p>تجربه‌ای لذت‌بخش از تایپ و بازی.</p>
            <div class="price">۷۵۰,۰۰۰ تومان</div>
            <button>افزودن به سبد</button>
        </div>
    </div>
    <div class="product-card">
        <img src="https://via.placeholder.com/300x220/27AE60/fff?text=Product+C" alt="Product C">
        <div class="product-info">
            <h3>هدفون حرفه‌ای</h3>
            <p>کیفیت صدای بی‌نظیر برای موسیقیدان‌ها.</p>
            <div class="price">۱,۲۰۰,۰۰۰ تومان</div>
            <button>افزودن به سبد</button>
        </div>
    </div>
    <div class="product-card">
        <img src="https://via.placeholder.com/300x220/E67E22/fff?text=Product+D" alt="Product D">
        <div class="product-info">
            <h3>وب‌کم HD</h3>
            <p>تصویری شفاف برای کنفرانس‌های آنلاین.</p>
            <div class="price">۴۸۰,۰۰۰ تومان</div>
            <button>افزودن به سبد</button>
        </div>
    </div>
</div>

body {
  margin: 0;
  font-family: 'Vazirmatn', sans-serif;
  min-height: 100vh; /* حداقل ارتفاع صفحه */
  display: grid;
  grid-template-rows: auto 1fr auto; /* هدر و فوتر با محتوا خودشون، محتوا اصلی فضای باقی‌مانده */
  grid-template-areas:
    "header"
    "main"
    "footer";
}

.header {
  grid-area: header;
  background-color: #34495e;
  color: #fff;
  padding: 15px 20px;
  text-align: center;
  position: sticky; /* چسبنده کردن هدر */
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.main-content {
  grid-area: main;
  display: grid;
  grid-template-columns: 1fr 280px; /* محتوا اصلی و سایدبار 280px */
  grid-template-areas: "article sidebar";
  gap: 30px;
  padding: 30px;
}

.article {
  grid-area: article;
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.sidebar {
  grid-area: sidebar;
  background-color: #f8f9fa;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  position: sticky; /* چسبنده کردن سایدبار */
  top: 80px; /* از بالای صفحه 80px فاصله داشته باشد */
  align-self: start;
}

.footer {
  grid-area: footer;
  background-color: #34495e;
  color: #fff;
  padding: 20px;
  text-align: center;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .main-content {
    grid-template-columns: 1fr; /* در موبایل یک ستون */
    grid-template-areas:
      "article"
      "sidebar";
    padding: 20px;
  }
  .sidebar {
    position: static; /* در موبایل سایدبار چسبنده نباشد */
    top: auto;
  }
}

<div class="header">
    <h1>وبلاگ من</h1>
</div>
<div class="main-content">
    <div class="article">
        <h2>عنوان مقاله جذاب من</h2>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </p>
        <p>کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد و زمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.</p>
        <h3>زیرعنوان مهم</h3>
        <ul>
            <li>مورد اول خیلی مهم</li>
            <li>مورد دوم حتی مهم‌تر</li>
        </ul>
        <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است.</p>
    </div>
    <div class="sidebar">
        <h3>مطالب پربازدید</h3>
        <ul>
            <li><a href="#" style="color: #007bff; text-decoration: none;">۱۰ نکته CSS Grid</a></li>
            <li><a href="#" style="color: #007bff; text-decoration: none;">بهترین ابزارهای توسعه</a></li>
            <li><a href="#" style="color: #007bff; text-decoration: none;">طراحی ریسپانسیو</a></li>
        </ul>
        <h3 style="margin-top: 20px;">تبلیغات</h3>
        <div style="background-color: #e0e0e0; padding: 20px; border-radius: 5px; text-align: center; color: #555;">
            <p>اینجا جای تبلیغات شماست!</p>
            <a href="https://fa-tools.ir/contact/" style="color: #e67e22; text-decoration: none; font-weight: 600;">با ما تماس بگیرید</a>
        </div>
    </div>
</div>
<div class="footer">
    <p>&copy; 2023 وبلاگ من. تمامی حقوق محفوظ است.</p>
</div>

.masonry-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 10px; /* یک واحد کوچک برای ردیف‌های خودکار */
  gap: 20px;
  padding: 20px;
  background-color: #ecf0f1;
  border-radius: 10px;
}

.grid-item {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  padding: 15px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.grid-item h3 {
  font-size: 1.2em;
  color: #34495e;
  margin-top: 0;
  margin-bottom: 10px;
}

.grid-item p {
  font-size: 0.9em;
  color: #7f8c8d;
  flex-grow: 1; /* محتوا رشد کند تا فضا را پر کند */
}

/* کلاس‌های کمکی برای تنظیم ارتفاع آیتم‌ها (نیاز به محاسبه با JS در حالت واقعی) */
.item-height-1 {
  grid-row-end: span 20; /* 20 * 10px = 200px */
}
.item-height-2 {
  grid-row-end: span 28; /* 28 * 10px = 280px */
}
.item-height-3 {
  grid-row-end: span 35; /* 35 * 10px = 350px */
}
.item-height-4 {
  grid-row-end: span 25; /* 25 * 10px = 250px */
}

<div class="masonry-grid-container">
    <div class="grid-item item-height-1">
        <h3>پست وبلاگی کوتاه</h3>
        <p>متن کوتاه برای یک پست سریع و مختصر که اطلاعات اصلی را منتقل می‌کند. این فقط یک نمونه است.</p>
    </div>
    <div class="grid-item item-height-3">
        <h3>مقاله‌ی جامع و طولانی</h3>
        <p>این یک مقاله طولانی‌تر است که نیاز به فضای بیشتری برای نمایش محتوا دارد. لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. </p>
        <p>کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد.</p>
    </div>
    <div class="grid-item item-height-2">
        <h3>نکته‌ی روز</h3>
        <p>یک نکته جالب و مفید برای توسعه‌دهندگان وب. همیشه از ابزارهای مناسب استفاده کنید تا بهره‌وریتان افزایش یابد.</p>
        <p>میتونید به بخش فروشگاه سر بزنید.</p>
    </div>
    <div class="grid-item item-height-4">
        <h3>خبر جدید</h3>
        <p>آخرین اخبار دنیای تکنولوژی و توسعه وب. همیشه به روز باشید و از جدیدترین ابزارها استفاده کنید تا در رقابت عقب نمانید.</p>
    </div>
    <div class="grid-item item-height-2">
        <h3>پروژه Open Source</h3>
        <p>معرفی یک پروژه متن باز هیجان‌انگیز که می‌توانید در آن مشارکت کنید. جامعه توسعه‌دهندگان همیشه در حال رشد است.</p>
    </div>
</div>

.dashboard-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 30px;
  background-color: #f7f9fb;
  border-radius: 12px;
}

@media (min-width: 768px) {
  .dashboard-layout {
    grid-template-columns: repeat(2, 1fr); /* 2 ستون در تبلت و دسکتاپ */
  }
}

@media (min-width: 1024px) {
  .dashboard-layout {
    grid-template-columns: repeat(3, 1fr); /* 3 ستون در دسکتاپ‌های بزرگتر */
  }
}

.dashboard-card {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.07);
  padding: 25px;
  transition: transform 0.3s ease;
}

.dashboard-card:hover {
  transform: translateY(-5px);
}

.dashboard-card h3 {
  font-size: 1.4em;
  color: #2c3e50;
  margin-top: 0;
  margin-bottom: 15px;
  text-align: center;
}

/* Nested Grid for stat cards */
.stat-card-content {
  display: grid;
  grid-template-columns: auto 1fr; /* آیکون و سپس متن */
  gap: 15px;
  align-items: center;
  justify-items: center;
  text-align: center;
}

.stat-icon {
  font-size: 2.5em;
  color: #3498db;
}

.stat-details {
  text-align: right;
}

.stat-details .value {
  font-size: 2em;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 5px;
}

.stat-details .label {
  font-size: 0.9em;
  color: #7f8c8d;
}

<div class="dashboard-layout">
    <div class="dashboard-card">
        <h3>کاربران جدید</h3>
        <div class="stat-card-content">
            <span class="stat-icon">👤</span> <!-- Replace with actual icon font like FontAwesome -->
            <div class="stat-details">
                <div class="value">1,245</div>
                <div class="label">در ماه گذشته</div>
            </div>
        </div>
    </div>
    <div class="dashboard-card">
        <h3>درآمد کل</h3>
        <div class="stat-card-content">
            <span class="stat-icon">💰</span>
            <div class="stat-details">
                <div class="value">$12,500</div>
                <div class="label">این ماه</div>
            </div>
        </div>
    </div>
    <div class="dashboard-card">
        <h3>بازدید صفحه</h3>
        <div class="stat-card-content">
            <span class="stat-icon">👁️</span>
            <div class="stat-details">
                <div class="value">58,900</div>
                <div class="label">در ۲۴ ساعت گذشته</div>
            </div>
        </div>
    </div>
    <!-- More dashboard cards can go here -->
</div>

آیا CSS Grid به طور کامل جایگزین بوت‌استرپ می‌شود؟

نه کاملاً. بوت‌استرپ علاوه بر سیستم گرید، کامپوننت‌های آماده UI (مثل Navbar، Modal، Carousel) و جاوااسکریپت هم داره. Grid فقط برای چیدمان (Layout) عالیه. برای کامپوننت‌ها می‌تونی از فریم‌ورک‌های CSS سبک‌تر مثل Tailwind CSS یا از کامپوننت‌های خودت با استفاده از Flexbox و Vanilla JS استفاده کنی.

آیا یادگیری CSS Grid سخت است؟

در ابتدا ممکنه کمی پیچیده به نظر برسه چون مفهوم جدیدی داره، اما با کمی تمرین و ساختن چند پروژه ساده، به سرعت بهش مسلط میشی. منابع آموزشی آنلاین خیلی خوبی برای یادگیری Grid وجود داره.

آیا می‌توانم Grid و Flexbox را با هم استفاده کنم؟

قطعاً! این دو ابزار کاملاً مکمل یکدیگرند. Grid برای چیدمان کلی صفحه (Layout) و Flexbox برای چیدمان آیتم‌ها در یک ردیف یا ستون (Alignment) عالی عمل می‌کنند. مثلاً می‌تونی یک Grid بسازی و داخل یکی از خانه‌های Grid، از Flexbox برای تراز کردن آیتم‌ها استفاده کنی.

آیا CSS Grid برای سئو بهتر است؟

CSS Grid به خودی خود مستقیماً باعث بهبود سئو نمیشه. اما با Grid، می‌تونی HTML تمیزتر و Semanticتری داشته باشی، چون نیازی به `div`های اضافه برای چیدمان نیست. این موضوع به خوانایی کد و تجربه کاربری بهتر کمک می‌کنه که به صورت غیرمستقیم می‌تونه روی سئو تأثیر مثبت بذاره. همچنین، سرعت بارگذاری صفحه با حذف فایل‌های CSS حجیم بوت‌استرپ افزایش پیدا می‌کنه که یک فاکتور مهم در سئو است.

آماده‌ای دنیای وب رو متحول کنی؟

CSS Grid ابزاریه که هر توسعه‌دهنده مدرنی باید تو جعبه ابزارش داشته باشه. دیگه وقتشه از شر محدودیت‌های قدیمی خلاص بشی و با قدرت Grid، طرح‌بندی‌هایی بسازی که هم زیبا باشن، هم پرفورمنس عالی داشته باشن و هم مدیریت‌شون آسون باشه. اگه سوالی داری یا نیاز به کمک تخصصی داری، همیشه می‌تونی با تیم ما تماس بگیری یا سری به فروشگاه ابزارهای کاربردی ما بزنی.

📞 همین حالا تماس بگیرید!