آیتم‌های گرید (Grid Items)

کنترل تک‌تک آیتم‌های گرید: grid-column، grid-row و جای‌گذاری دقیق

آیتم‌های گرید

هر فرزند کانتینر گرید یک آیتم گرید است. هر آیتم می‌تواند موقعیت خود را داشته باشد.

grid-column و grid-row

.item {
        grid-column: 1 / 3;  /* از خط ۱ تا ۳ */
        grid-row: 1 / 2;     /* از سطر ۱ تا ۲ */
    }
    
    /* با span */
    .item {
        grid-column: span 2;  /* ۲ ستون اشغال کن */
        grid-row: span 3;     /* ۳ سطر اشغال کن */
    }

grid-area

.item {
        grid-area: 1 / 1 / 3 / 3;
        /* row-start / column-start / row-end / column-end */
    }

ترکیب با areas

.grid {
        grid-template-areas:
            "header header"
            "sidebar main";
    }
    .header { grid-area: header; }
    .sidebar { grid-area: sidebar; }
    .main { grid-area: main; }

justify-self و align-self

.item {
        justify-self: start;   /* افقی */
        align-self: center;    /* عمودی */
        place-self: center;    /* هر دو */
    }

item placement مثال

/* آیتم بزرگ */
    .featured {
        grid-column: 1 / -1;  /* کل سطر */
    }
    
    /* آیتم ۲ ستونه */
    .wide {
        grid-column: span 2;
    }

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

نکات مهم

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

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