CSS Grid

CSS Grid কী?

CSS Grid হলো দ্বি-মাত্রিক লেআউট সিস্টেম — একইসাথে সারি ও কলাম নিয়ন্ত্রণ করা যায়। Flexbox এক মাত্রায়, Grid দুই মাত্রায়।

মৌলিক Grid

.container {
    display: grid;
    grid-template-columns: 200px 200px 200px;  /* ৩ কলাম */
    grid-template-rows: 100px 100px;
    gap: 20px;
}

fr unit (fractional)

.container {
    display: grid;
    /* ৩ সমান কলাম */
    grid-template-columns: 1fr 1fr 1fr;
    /* বা */
    grid-template-columns: repeat(3, 1fr);

    /* Sidebar + Main */
    grid-template-columns: 250px 1fr;

    /* 2:1 অনুপাত */
    grid-template-columns: 2fr 1fr;
}

Responsive Grid (auto-fit)

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}
/* প্রতিটি কার্ড কমপক্ষে 280px, বেশি জায়গা হলে ভাগ করে নেবে */

Grid Item Placement

.item-1 {
    grid-column: 1 / 3;      /* ১ থেকে ৩ পর্যন্ত (২ কলাম দখল) */
    grid-row: 1 / 2;
    /* সংক্ষিপ্ত */
    grid-column: span 2;      /* ২টি কলাম দখল */
}

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

Named Areas (সবচেয়ে পরিষ্কার পদ্ধতি)

.layout {
    display: grid;
    grid-template-columns: 200px 1fr 200px;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header  header  header"
        "sidebar main    aside"
        "footer  footer  footer";
    min-height: 100vh;
    gap: 10px;
}

header  { grid-area: header; }
.side   { grid-area: sidebar; }
main    { grid-area: main; }
aside   { grid-area: aside; }
footer  { grid-area: footer; }

Alignment in Grid

.container {
    display: grid;
    /* Item গুলো cell এর ভিতরে */
    justify-items: center;  /* start, end, stretch */
    align-items: center;

    /* পুরো grid container এর ভিতরে */
    justify-content: center;
    align-content: center;

    /* সংক্ষিপ্ত */
    place-items: center;
}