آموزش CSS Grid در CSS

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

Grid

برای استفاده از گرید بندی باید حالت نمایشی المان پدر رو روی حالت grid قرار دهیم.

.container {
    display: grid;
}

Grid-template-columns

توسط این پراپرتی می توانیم تعداد ستون های یک کانتینر رو مشخص می کنیم. این پراپرتی به هر تعداد مقداری که بگیره به همون نعداد ستون ایجاد می کنه، و می توانیم مقادیر مختلف اندازه گیری از جمله پیکسل، درصد، رم و… رو بهش بدیم. به نمونه کد زیر توجه کنید:

.container {
    display: grid;

    /* چهار تا ستون با عرض یکسان ایجاد می کنه */
    grid-template-columns: auto auto auto auto;

    /* چهار تا ستون بر حسب اندازه های داده شده ایجاد می کنه
    ستون آخری فضای خالی مونده رو کامل پر میکنه */
    grid-template-columns: 30% 50rem 150px auto;

    /* دو تا ستون یکی سی درصد عرض رو میگیره و اون یکی کامل باقی مانده عرض رو میگیره */
    grid-template-columns: 30% auto;
}

grid-template-rows

توسط این پراپرتی می توانیم ارتفاع یک ردیف رو مشخص کنیم، و بر عکس دستور بالاست.

.container {
    display: grid;

    /*
    چهار تا ستون با عرض یکسان ایجاد می کنه
    */
    grid-template-columns: auto auto auto auto;

    /*
    بر عکس کد بالاست و ارتفاع هر ردیف رو مشخص می کنه
    بدین صورت که ردیف دوم 300 پیکسل هست و بقیه ها اتو
    */
    grid-template-rows: auto 300px auto auto;
}

Grid-template

توسط این دستور ساده می توانیم مقادیر row و column را در یک خط بنویسیم. میتونید نمونه کد زیر رو مشاهده کنید:

.container {
    display: grid;
    grid-template-columns: 100px auto 1fr;
    grid-template-rows: 150px 1fr auto;

    /* grid-template: ROW / Column */
    /* کد زیر دقیقا کاری رو میکنه که دو خط بالایی میکنه */
    grid-template: 150px 1fr auto / 100px auto 1fr;
}

Repeat

توسط دستور repeat می توانیم به جای تکرار مکرر تعداد ستون ها و یا سطر ها یکبار از این دستور استفاده کنیم و تعداد مد نظرمون رو بهش بدیم، به تکه کد زیر توجه کنید.

.container {
    display: grid;
    grid-template-columns: auto auto auto auto auto auto auto auto;
    /*
    دستور زیر مشخص میکنه که 8 تا ستون به اندازه یکسان درست کن
    دقیقا کد بالا و پائین یکی هست
    */
    grid-template-columns: repeat(8, auto);
}

grid_gap & row_gap & column_gap

توسط این پراپرتی ها می توانیم فاصله و گپ بین ستون ها و ردیف ها رو مشخص می کنیم.

• column_gap : فاصله بین هر ستون رو مشخص می کنید.
• row_gap : فاصه هر ردیف رو مشخص می کنه
• gap : یک عدد و اندازه میگیره فاصله سطر و ستون ها رو بصورت یکسان اعمال می کنه.

.container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto;

    /*
    برای فاصله ستون ها در محور عرض کاربرد دارد
    هر دو دستور زیک یکسان هستند، یکیش رو بنویسیم کفایت می کنه
    */
    column-gap: 10px;
    grid-column-gap: 10px;

    /*
    فاصله ردیف ها رو در محور ارتفاع از هم مشخص می کنه
    هر دو دستور یکی هستند، یکیش استفاده بشه کفایت می کنه
     */
    row-gap: 10px;
    grid-row-gap: 10px;

    /*
    دستور زیر فاصله سطر و ستون ها بصورت یکسان تنظیم می کنه
    هر دو دستور زیر یکسان هستند، یکیش رو استفاده بکنیم کفایت می کنه
     */
    gap: 10px;
    grid-gap: 10px;
}

برای پراپرتی gap می توانیم دو مقدار رو مشخص بکنیم، تا سطر و ستون ها گپ و فاصله متفاوتی داشته باشند. به کد زیر توجه کنید:

.container {
    display: grid;
    grid-template-columns: auto auto auto auto;
    grid-template-rows: auto auto auto auto;
    
    gap: 10px 100px;
    /* gap: row-gap column-gap; */
}

Justify-content و align-content

این دو پراپرتی که در فلکس باکس هم کاربر داشتند برای چیدمان و ترا بندی افقی و عمودی کاربرد دارد.

• justify-content : از نظر محور x (عرض) المان ها رو چیدمان و تراز بندی میکنه
• align-content : جهت تراز بندی در محور y (ارتفاع) استفاده میشود.

واحد اندازه گیری Fraction

توسط Fraction می تونیم بگیم مثلا ستون دوم از یک ردیف دو برابر سایر ستون ها باشه. مقدار fr کل عرض باقی مونده را پر میکنه.

.container {
    display: grid;
    width: 500px;
    grid-template-columns: 200px 1fr; /* 1fr =>  500px - 200px = 300px  */
    grid-template-columns: 1fr 3fr 1fr; /* ستون وسطی سه برابر اون یکی ستون ها خواهد بود */
}

اندازه دهی به ستون ها با max-content & min-content

توسط مکس کانتنت و مین کانتنت می توان به المان ها حداقل و حداکثر اندازه بر اساس محتوا و کانتنت داخلی اونها داد.

• min-content : کوچکترین حالت ممکن بر اساس محتوای داخلی
• max-content : اندازه ستون رو تا جایی که محتوای داخلی داره کش میده.

.container {
    display: grid;
    grid-template-columns: min-content max-content 1fr 1fr;
}

minmax

توسط این دستور می توانیم حداقل و حداکثر عرض و ارتفاع رو مشخص کنیم، به دستور زیر توجه کنید:

.container {
    display: grid;
    grid-template-columns: minmax(200px, 800px), auto, auto, 1fr;
    /*
    minmax (min , max)
    */
    grid-template-rows: minmax(250px, 450px), auto , auto;
}

grid-column start & end & grid-row start & end

توسط این پراپرتی می توانیم اندازه بخش های ستون ها و سطر ها رو به اندازه ای متفاوت از سایر آیتم های کانتینر تبدیل کنیم، اما توجه داشته باشید که هر سطر و ستونی که داریم، بینشان خط هایی دارند که به خط های Column line و Row Line معروف هستند.، تصویر زیر رو مشاهده کنید:

توسط دستور زیر می توانیم عرض و ارتفاع یک آیتم را بر اسال اون خط هایی عرضی و طولی مشخص کنیم:

.item1 {
    /* دستور زیر آیتم مشخص شده را عرضش رو تا خط سوم ستون ها کشیده میکند */
    grid-column-start: 1;
    grid-column-end: 3;
    /* دستور زیر خلاصه شده دستور بالاست، می توانیم اینطوری هم بنویسیم */
    grid-column: 2 / 3;
    /* grid-column: Line-Start / Line-End */


    grid-row-start: 1;
    grid-row-end: 3;
    /* دستور زیر خلاصه شده دستور بالاست، می توانیم اینطوری هم بنویسیم */
    grid-row: 1 / 3;
    /* grid-row: LineStart / LineEnd */

    /* Span */
    /* توسط این دستور می توانیم بگیم، اندازه آیتم به اندازه چند تا آیتم باشه */
    grid-column: 1 / span 2;
    grid-row:  1 / span 2;
}

دستور span مشخص میکنه، آیتم مذکور به اندازه چند آیتم دیگه باشه.

grid-template-areas & grid_area

این پراپرتی ها شبیه به پراپرتی Start و End قبلی هست، ولی خیلی کار رو آسون تر کرده. بدین صورت که اول باید به تک تک آیتم ها یک کلاس بدیم و سمت CSS هر آیتمی یک نام مشخصی با پراپرتی grid-area بهش بدیم:

.container {
    display: grid;
    grid-template-columns: auto, auto, auto, auto;
    grid-template-rows: auto, auto, auto, auto;

    grid-template-areas: "" "" "" ""; /* به تعداد آیتم ها بخش در نظر می گیریم */
    grid-template-areas: "item1 item1 item1 item1" "item2 item3 item3 item3" "item4 item4 item4 item4" "item5 item5 item6 item6";
}

.item1 {
    grid-area: item1;
}
.item2 {
    grid-area: item2;
}
.item3 {
    grid-area: item3;
}
.item4 {
    grid-area: item4;
}
.item5 {
    grid-area: item5;
}
.item6 {
    grid-area: item6;
}
.item7 {
    grid-area: item7;
}

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

اگر بخواهیم یک بخش خالی ایجاد کنیم، کافیه یک علامت نقطه (.) قرار میدیم.

حتی می توانیم در یک خط دستورات مربوط به grid-template-rows – grid-tempalte-column و grid-template-areas رو در بیاریم.

.container {
    display: grid;
    
    grid-template-columns: 3fr 0.5fr 1.5fr;
    grid-template-rows: 200px 400px 500px;
    grid-template-areas: "header header header""main . aside""footer footer footer";
    /*
    تکه کد زیر، دقیقا میتونه کار سه خط بالا رو انجام بده
    در یک خط در آوردیم
    */
    grid-template: "header header header" 200px "main . aside" 400px "footer footer footer" 500px / 3fr 0.5fr 1.5fr;
}

auto-fill و auto-fit

توسط این دستور می توانیم آیتم های تمام ریسپانسیو را ایجاد کنیم، بدین صورت که فضای باقی مونده از کانتینر را بین آیتم های فرزند تقسیم می کند.

.container {
    display: grid;
    grid-template-columns: repeat(auto-fit , minmax (200px, auto));
}

مثال از گرید بندی به روش grid-area

این نمونه کدی هست که میونه در گرید بندی به روش area بسیار مناسب باشه. نمونه تصویر و کد رو مشاهده کنید.

.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}
    
.div1 { grid-area: 1 / 1 / 2 / 3; }
.div2 { grid-area: 1 / 3 / 4 / 4; }
.div3 { grid-area: 1 / 4 / 5 / 6; }
.div4 { grid-area: 4 / 1 / 5 / 4; }
.div5 { grid-area: 2 / 2 / 4 / 3; }
.div6 { grid-area: 2 / 1 / 4 / 2; }
.div7 { grid-area: 5 / 1 / 6 / 6; }

.div1 {
    /* grid-area: Row Start / Column Start / Row End / Column Start  */
    grid-area: 1 / 1 / 2 / 3;
}

justify-items & justify-self & align-items & align-self

توسط این پراپرتی ها می توانیم وسی چین، راست چین و چپ چین بودن و… را تنظیم کنیم.

• justify-items : به کانتینر باید داده شود و چینش تک تک آیتم ها را در محور X مشخص می کنم.
• align-items : به کانتینر باید داده شود و چینش تک تک آیتم ها را در محور y مشخص می کنم.
• justify-self : به آیتم ها داده میشود و محتوای داخل آیتم را تنظیم می کند.
• align-self: به آیتم ها داده میشود و محتوای داخل آیتم را تنظیم می کند.

Order

توسط این دستور می توانیم ترتیب قرار گیری یک آیتم را تغییر دهیم، این پراپرتی به آیتم خاصی داده میشه و عدد 1 یا بزرگتر رو میگیره، توجه داشته باشید که کلیه آیتم ها بصورت پیش فرض اوردر 0 رو دارند. و وقتی به یک آیتم اوردر 1 رو میدیم میره به انتهای کانتینر

inline-grid

ما دستور Display : grid رو میدیم تا به گرید بندی دسترسی داشته باشیم، اما اگر به جای grid از inline-grid استفاده کنیم، آیتم ها به اندازه محتوایی که داخلشون هست اندازه میگیره و در نتیجه کانتینر هم بر اساس عرض آیتم های داخلی خود عرض میگیره.

.parent {
    /*
    display: grid
    */
    display: inline-grid;
}

grid-auto-rows

توسط این پراپرتی می توانیم یک ارتفاع پیش فرضی برای آیتم ها در نظر بگیریم، به شرطی که grid-template-rows ارتفاعی بهش داده نشه: به دستور زیر توجه کنید:

.parent {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* به ردیفهای اول تا سوم به ترتیب صد، پنجاه و 250 پیکسل ارتفاع میده */
    grid-template-rows: 100px 50px 250px;
    /* ردیف چهارم به بعد همشون میشن 400 پیکسل */
    grid-auto-rows: 400px;
}

grid-auto-column & grid-auto-flow

این پراپرتی بر روی کانتینر اعمال میشه.

• grid-auto-column : بصورت پیش فرض یک اندازه یکسان برای عرض آیتم ها مشخص میکنه، البته دیگه نباید از grid-template-columns استفاده کنیم.
• grid-auto-flow : مشخص میکنه چینش آیتم ها ردیفی باشه یا ستونی

.parent {
    display: grid;
    grid-auto-columns: 200px;
    grid-auto-flow: column;
    overflow-x: auto;
}