کانتینر گرید (Grid Container)

تمام ویژگی‌های کانتینر گرید: grid-template، grid-area، gap و placement

کانتینر گرید

عنصری با display: grid تبدیل به کانتینر گرید می‌شود.

grid-template-columns

.grid {
        grid-template-columns: 100px 200px 100px;
        /* سه ستون: ۱۰۰px، ۲۰۰px، ۱۰۰px */
    
        grid-template-columns: 1fr 2fr 1fr;
        /* نسبت ۱:۲:۱ */
    
        grid-template-columns: repeat(4, 1fr);
        /* ۴ ستون مساوی */
    
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        /* ریسپانسیو خودکار ⭐ */
    }

grid-template-rows

.grid {
        grid-template-rows: 100px 200px 100px;
    }

grid-template-areas ⭐

.grid {
        grid-template-areas:
            "header header header"
            "sidebar content aside"
            "footer footer footer";
    }
    
    .header { grid-area: header; }
    .sidebar { grid-area: sidebar; }
    .content { grid-area: content; }
    .aside { grid-area: aside; }
    .footer { grid-area: footer; }

area با . برای خالی

grid-template-areas:
        "header header"
        ". content"
        "footer footer";

grid-auto-flow

.grid {
        grid-auto-flow: row; /* پیش‌فرض */
        grid-auto-flow: column;
        grid-auto-flow: dense;  /* پر کردن خلأ */
    }

grid-auto-rows/columns

.grid {
        grid-auto-rows: 150px;  /* سطرهای خودکار ۱۵۰px */
    }

justify-items و align-items

.grid {
        justify-items: start | end | center | stretch;
        align-items: start | end | center | stretch;
        place-items: center;  /* هر دو */
    }

justify-content و align-content

وقتی گرید از کانتینر کوچک‌تر است:

.grid {
        justify-content: center | space-between | space-around;
    }

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط