راهنمای کامل سی‌اس‌اس گرید (CSS Grid)

در این پست سعی می‌کنیم سی‌اس‌اس گرید را معرفی کرده و نگاهی به ویژگی‌های آن داشته باشیم.سی‌اس‌اس گرید چیست؟چیدمان سی‌سی‌اس گرید (به طور اختصار; گرید)، یک سیستم چیدمان دوبعدی است که، در مقایسه با تمامی سیستم‌های چیدمان قبلی در طراحی وبسایت‌ها، به طور کامل نحوه طراحی رابط کاربری را دگرگون کرده است.هر کدام از روش‌هایی که در گذشته (tables, floats, inline-block...) استفاده می‌شد در واقعا نوعی هک بودند کارکرد اصلی آن‌ها برای چیدمان صفحه نبود و به همین دلیل در اکثر مواقع نتیجه دلخواه را در پی نداشت.فلکس‌باکس(Flexbox) نیز یک ابزار عالی ولی یک سیستم چیدمان یک بعدی است. البته Flexbox و Grid دو ابزاری هستند که می‌توانند به خوبی با یکدیگر کار کنند. از ماه مارچ سال 2017، بیشتر مرورگرها گرید را پشتیبانی می‌کنند. گرید یکی از قدرتمندترین ماژول‌های سی‌اس‌اس است که تا به حال معرفی شده.برای شروع کار با گرید، باید یک المنت(Element) کانتینر(Container) را به صورتdisplay: grid، اندازه سطر(Row) و ستون‌ها(Column) را با grid-template-columns و grid-template-rows و المنت‌های زیر مجموعه را با grid-column و grid-row تعریف کنید.مشابه Flexbox، ترتیب اصلی آیتم‌های گرید اهمیتی ندارد. کد سی‌اس‌اس شما می‌تواند آن‌ها با هر ترتیبی جای‌گذاری کند که این قابلیت استفاده از گرید به همراه مدیا کوئری(Media Query) بسیار آسان می‌کند.واژه‌شناسیقبل از پرادختن به مفاهیم اصلی، بهتر است با یک سری از واژه‌ها و اصطلاحات مهم آشنا شویم. از آنجایی که این اصطلاحات به طور مفهومی به یکدیگر شبیه هستند، اگر معانی آنها را در راتباط با گرید ندانید، ممکن است آنها را با یکدیگر اشتباه بگیرید.‌Grid Containerالمنتی که بر روی آن display: gridاعمال می‌شود. این المنت، والد مستقیم آیتم‌های گرید است. در این مثال container ، کانتینر گرید است.<div class=&quotcontainer&quot> <div class=&quotitem item-1&quot> </div> <div class=&quotitem item-2&quot> </div> <div class=&quotitem item-3&quot> </div> </div>‌Grid Itemفرزند یا فرزندان گرید کانتینر. در مثال زیر، المنت‌های item، آیتم‌های گرید هستند ولی المنت sub-itemنه.<div class=&quotcontainer&quot> <div class=&quotitem&quot> </div> <div class=&quotitem&quot> <p class=&quotsub-item&quot> </p> </div> <div class=&quotitem&quot> </div> </div>‌Grid Lineخط‌های جدا کننده‌ای که ساختار گرید را تشکیل می‌دهند. این خط‌ها می‌توانند عمودی(column grid lines) یا افقی(row grid lines) باشند و در هر طرف از سطر یا ستون قرار بگیرند.‌Grid Cellفضای بین دو خط افقی (row grid lines) مجاور و دو خط عمودی (column grid lines) مجاور که یک واحد گرید است.‌Grid Trackفضای بین دو خط گرید مجاور. می‌توان به آن به عنوان یک سطر یا یک ستون گرید نگاه کرد.‌Grid Areaفضایی که توسط چهار خط گرید محاصره شده. می‌تواند از هرتعداد سلول (Grid Cell) تشکیل شده باشد.ویژگی‌هاویژگی‌های مخصوص کانتینر (Grid Container)● displayتعریف یک المنت یه عنوان به عنوان کانتینر گرید.مقادیر:▪ grid -- block-level grid▪ inline-grid -- inline-level grid● grid-template-columns, grid-template-rowsتعریف سطرها و ستون‌های گرید به وسیله لیستی از مقادیر که با فاصله از یکدیگر جدا شده‌اند. مقادیر نشان دهنده اندازه Grid Track هستند و فاصله‌ها نشان دهنده‌ی Grid Line .مقادیر:▪ <track-size> -- می‌تواند طول، درصد، یا کسری(با استفاده از واحد fr ) از فضای خالی موجود در گرید باشند.▪ <line-name> -- نامی دلخواه برای خط گرید(اختیاری) .container { grid-template-columns: ... ...; /* e.g. 1fr 1fr minmax(10px, 1fr) 3fr repeat(5, 1fr) 50px auto 100px 1fr */ grid-template-rows: ... ...; /* e.g. min-content 1fr min-content 100px 1fr max-content */ }خط‌های گرید به صورت خودکار، اعداد مثبت نام‌گذاری می‌شوند. برای خط آخر از 1- نیز می‌توان استفاده کرد.هر خط را به طور اختصاصی نیز می‌توان نام‌گذاری کرد..container { grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end]; grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line]; }هر خط می‌تواند بیشتر از یک نام داشته باشد..container { grid-template-rows: [row1-start] 25% [row1-end row2-start] 25% [row2-end]; }از تابع repeat نیز می‌توان برای تعریف قسمت‌های یکسان استفاده کرد..container { grid-template-columns: repeat(3, 20px [col-start]); } /*معادل*/ .container { grid-template-columns: 20px [col-start] 20px [col-start] 20px [col-start]; }واحد fr این اجازه را به ما می‌دهد تا اندازه track را به عنوان کسری از فضای خالی موجود در گرید مشخص کنیم.در مثال زیر مقدار عرض هر آیتم برابر یک سوم کل اندازه گرید تعریف شده است..container { grid-template-columns: 1fr 1fr 1fr; }فضای خالی بعد از مشخص شدن اندازه هر یک از آیتم هایی که اندازه آنها متغیر نیست، محاسبه می‌شود.‌● grid-template-areasتعریف یک تمپلیت گرید به وسیله ارجاع دادن به اسم سطوح گرید که با ویژگی grid-area تعریف شده است. تکرار اسم سطح گرید باعث می‌شود که محتوای آن سطح در سلول‌های بعدی ادامه پیدا کند. نقطه نیز نشان دهنده‌ی سلول خالی است.مقادیر:▪ <grid-area-name> -- نامی که به وسیله ویژگی grid-area مشخص شده است.‌▪ . -- نقطه نشان دهنده فضای خالی است.▪ <none> -- هیچ سطح گریدی تعریف نشده است..container { grid-template-areas: &quot<grid-area-name> | . | none | ...&quot &quot...&quot }مثال:.item-a { grid-area: header; } .item-b { grid-area: main; } .item-c { grid-area: sidebar; } .item-d { grid-area: footer; } .container { display: grid; grid-template-columns: 50px 50px 50px 50px; grid-template-rows: auto; grid-template-areas: &quotheader header header header&quot &quotmain main . sidebar&quot &quotfooter footer footer footer&quot }مثال بالا یک گرید با 4 ستون و 3 سطر می‌سازد:هر یک از سطرها باید تعداد سلول‌هایش با دیگر سطرها یکی باشد.‌‌● grid-templateیک ویژگی خلاصه شده که شامل grid-template-columns ، grid-template-rows و grid-template-areas می‌شود.مقادیر:▪ none -- هر سه ویژگی را برابر مقدار پیش‌فرض قرار می‌دهد.▪ <grid-template-rows> / <grid-template-columns> -- مقادیر grid-template-columns و grid-template-rows را مشخص می‌کند و مقدار grid-template-areas را برابر none قرار می‌دهد.container { grid-template: none | <grid-template-rows> / <grid-template-columns>; }مشخص کردن هر سه ویژگی:.container { grid-template: [row1-start] &quotheader header header&quot 25px [row1-end] [row2-start] &quotfooter footer footer&quot 25px [row2-end] / auto 50px auto; /*معادل*/ .container { grid-template-rows: [row1-start] 25px [row1-end row2-start] 25px [row2-end]; grid-template-columns: auto 50px auto; grid-template-areas: &quotheader header header&quot &quotfooter footer footer&quot }● column-gap, row-gap, grid-column-gap, grid-row-gapتعریف اندازه خط‌های گرید. می‌توان از آن به عنوان فاصله بین سلول‌ها استفاده کرد.مقادیر:▪ <line-size> -- یک مقدار اندازه‌گیری طولی..container { /* standard */ column-gap: <line-size>; row-gap: <line-size>; /* old */ grid-column-gap: <line-size>; grid-row-gap: <line-size>; }مثال:.container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; column-gap: 10px; row-gap: 15px; }‌● gap, grid-gapخلاصه شده‌ی row-gapو column-gapمقادیر:▪ <grid-row-gap> <grid-column-gap> .container { /* standard */ gap: <grid-row-gap> <grid-column-gap>; /* old */ grid-gap: <grid-row-gap> <grid-column-gap>; }مثال:.container { grid-template-columns: 100px 50px 100px; grid-template-rows: 80px auto 80px; gap: 15px 10px; }‌● justify-itemsآیتم‌های گرید در راستای محور افقی تراز می‌کند. بر روی تمام آیتم‌های داخل گرید اعمال می‌شود.مقادیر:▪ start▪ end▪ center▪ stretchمثال‌ها:.container { justify-items: start; }.container { justify-items: end; }.container { justify-items: center; }.container { justify-items: stretch; }این ویژگی را می‌توان به صورت جداگانه روی هر آیتم گرید با استفاده از justify-self اعمال کرد.‌● align-itemsآیتم‌های گرید در راستای محور عمودی تراز می‌کند. بر روی تمام آیتم‌های داخل گرید اعمال می‌شود.مقادیر:▪ start▪ end▪ center▪ stretch▪ baseline -- تراز کردن آیتم‌ها در راستای baseline متنمثال‌ها:.container { align-items: start; }.container { align-items: end; }.container { align-items: center; }.container { align-items: stretch; }این ویژگی را می‌توان به صورت جداگانه روی هر آیتم گرید با استفاده از align-self اعمال کرد.‌● place-itemsاعمال همزمان align-items و justify-items.مقادیر:▪ <align-items> / <justify-items> -- اولین مقدار برای align-items و دومین مقدار برای justify-items است.اگر دومین مقدار مشخص نشود، مقدار اول برای هر دو ویژگی اعمال می‌شود..center { display: grid; place-items: center; }‌● justify-contentدر بعضی از مواقع اندازه گرید می‌تواند کوچکتر از اندازه کانتینر آن باشد. به طور مثال در مواقعی که اندازه آیتم‌ها با واحدی انعطاف‌ناپذیر(مانند px) مشخص شده باشد. در این مواقع می‌توان کل گرید در هر یک از راستاها، با کانتینر تراز کرد.این ویژگی گرید را در راستای افقی تراز می‌کند.مقادیر:▪ start▪ end▪ center▪ stretch▪ space-around -- مقدار ثابتی فاصله بین هر آیتم و نصف آن مقدار در کناره‌ها▪ space-between -- مقدار ثابتی فاصله بین آیتم‌ها و هیچ فاصله‌ای در کناره‌ها▪ space-evenly -- مقدار ثابتی فاصله بین آیتم‌ها و همان مقدار در کناره‌ها.container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; }مثال‌ها:.container { justify-content: start; }.container { justify-content: end; }.container { justify-content: center; }.container { justify-content: stretch; }.container { justify-content: space-around; }.container { justify-content: space-between; }.container { justify-content: space-evenly; }● align-contentاین ویژگی گرید را در راستای عمودی تراز می‌کند.مقادیر:▪ start▪ end▪ center▪ stretch▪ space-around -- مقدار ثابتی فاصله بین هر آیتم و نصف آن مقدار در کناره‌ها▪ space-between -- مقدار ثابتی فاصله بین آیتم‌ها و هیچ فاصله‌ای در کناره‌ها▪ space-evenly -- مقدار ثابتی فاصله بین آیتم‌ها و همان مقدار در کناره‌ها.container { justify-content: start | end | center | stretch | space-around | space-between | space-evenly; }مثال‌ها:.container { align-content: start; }.container { align-content: end; }.container { align-content: center; }.container { align-content: stretch; }.container { align-content: space-around; }.container { align-content: space-between; }.container { align-content: space-evenly; }● place-contentاعمال همزمان justify-content و align-content.مقادیر:▪ <align-content> / <justify-content> -- اولین مقدار برای align-content و دومین مقدار برای justify-content است.اگر دومین مقدار مشخص نشود، مقدار اول برای هر دو ویژگی اعمال می‌شود.● grid-auto-columns, grid-auto-rowsاندازه هر grid track که به صورت اتوماتیک (implicit grid tracks) درست شده است. زمانی ایجاد می‌شود که تعداد آیتم‌های بیشتری نسبت به سلول‌ها، در گرید وجود دارد یا اینکه محل قرارگیری یک آیتم خارج از گرید مشخص شده است.مقادیر:▪ <track-size>.container { grid-auto-columns: <track-size> ...; grid-auto-rows: <track-size> ...; }مثال:.container { grid-template-columns: 60px 60px; grid-template-rows: 90px 90px; }حالا تصور کنید که با استفاده از ویژگی‌های grid-column و grid-row، محل قرارگیری آیتم‌ها را اینگونه تعریف می‌کنید:.item-a { grid-column: 1 / 2; grid-row: 2 / 3; } .item-b { grid-column: 5 / 6; grid-row: 2 / 3; }ما محل قرارگیری T را بین خط ستون 5 و 6 در نظر گرفتیم ولی خود این خطوط را تعریف نکرده‌ایم. به همین خاطر سطوحی با اندازه صفر تولید شده‌اند تا این فاصله ایجاد شده را جبران کنند. از grid-auto-rows و grid-auto-columns برای تعیین اندازه این سطوح می‌توان استفاده کرد..container { grid-auto-columns: 60px; }● grid-auto-flowاگر آیتم‌هایی داریم که به صورت صریح محل قرارگیری آنها مشخص نشده، الگوریتم جای‌گذاری خودکار محل قرارگیری این آیتم‌ها را مشخص می‌کند.مقادیر:▪ row -- به الگوریتم می‌گوید که به ترتیب هر سطر را پر کند و اگر در صورت نیاز سطر جدید اضافه کند (پیش‌فرض)▪ row -- به الگوریتم می‌گوید که به ترتیب هر ستون را پر کند و اگر در صورت نیاز ستون جدید اضافه کند ▪ dense -- به الگوریتم می‌گوید که در صورت اضافه‌شدن آیتم، سعی کند فضاهای ابتدایی را پر کند. .container { grid-auto-flow: row | column | row dense | column dense; }مثال:این کد HTML را در نظر بگیرید:<section class=&quotcontainer&quot> <div class=&quotitem-a&quot>item-a</div> <div class=&quotitem-b&quot>item-b</div> <div class=&quotitem-c&quot>item-c</div> <div class=&quotitem-d&quot>item-d</div> <div class=&quotitem-e&quot>item-e</div> </section>تعریف یک گرید با پنج ستون و دو سطر و تعیین مقدار row برای grid-auto-flow:.container { display: grid; grid-template-columns: 60px 60px 60px 60px 60px; grid-template-rows: 30px 30px; grid-auto-flow: row; }زمان مشخص کردن محل قرارگیری آیتم‌ها، فقط محل دو آیتم را مشخص می‌کنیم:.item-a { grid-column: 1; grid-row: 1 / 3; } .item-e { grid-column: 5; grid-row: 1 / 3; }به دلیل اینکه مفدار grid-auto-flow را row قرار دادیم، چینش آیتم‌ها به این صورت می‌شود:اگر به جای مقدار row مقدار columnرا قرار می‌دادیم، چینش آتیم‌ها بدین صورت می‌شد:● gridویژگی خلاصه‌ای برا تنظیم همزمان grid-auto-columns، grid-auto-rows، grid-template-areas، grid-template-columns، grid-template-rows و grid-auto-flowمثال:.container { grid: 100px 300px / 3fr 1fr; } /*↓معادل↑*/ .container { grid-template-rows: 100px 300px; grid-template-columns: 3fr 1fr; }.container { grid: auto-flow / 200px 1fr; } /*↓معادل↑*/ .container { grid-auto-flow: row; grid-template-columns: 200px 1fr; }.container { grid: auto-flow dense 100px / 1fr 2fr; } /*↓معادل↑*/ .container { grid-auto-flow: row dense; grid-auto-rows: 100px; grid-template-columns: 1fr 2fr; }.container { grid: 100px 300px / auto-flow 200px; } /*↓معادل↑*/ .container { grid-template-rows: 100px 300px; grid-auto-flow: column; grid-auto-columns: 200px; }ویژگی‌های مخصوص آیتم‌ها (Grid Items)● grid-column-start, grid-column-end, grid-row-start, grid-row-endمشخص کردن محل قرارگیری آیتم در داخل گرید با استفاده از خطوط گرید.مقادیر:▪ <line> -- می‌تواند عدد یا اسم باشد.▪ span <number> -- آیتم تا شماره خط اعلام شده گسترش پیدا می‌کند. ▪ span <name> -- آیتم تا اسم خط اعلام شده گسترش پیدا می‌کند. ▪ auto.item { grid-column-start: <number> | <name> | span <number> | span <name> | auto; grid-column-end: <number> | <name> | span <number> | span <name> | auto; grid-row-start: <number> | <name> | span <number> | span <name> | auto; grid-row-end: <number> | <name> | span <number> | span <name> | auto; }مثال‌ها:.item-a { grid-column-start: 2; grid-column-end: five; grid-row-start: row1-start; grid-row-end: 3; }.item-b { grid-column-start: 1; grid-column-end: span col4-start; grid-row-start: 2; grid-row-end: span 2; }● grid-column, grid-rowخلاصه شده‌ای برای grid-column-end + grid-column-start و grid-row-end + grid-row-start.مقادیر:▪ <start-line> / <end-line>.item { grid-column: <start-line> / <end-line> | <start-line> / span <value>; grid-row: <start-line> / <end-line> | <start-line> / span <value>; }مثال:.item-c { grid-column: 3 / span 2; grid-row: third-line / 4; }● grid-areaمشخص کردن نام برای یک آیتم تا از آن در ویژگی grid-template-areas استفاده شود.مقادیر:▪ <name>▪ <row-start> / <column-start> / <row-end> / <column-end>.item { grid-area: <name> | <row-start> / <column-start> / <row-end> / <column-end>; }مثال:.item-d { grid-area: 1 / col4-start / last-line / 6; }● justify-selfتراز کردن آیتم در راستای محور افقی.مقادیر:▪ start▪ end▪ center▪ stretch.item { justify-self: start | end | center | stretch; }مثال‌ها:.item-a { justify-self: start; }.item-a { justify-self: end; }.item-a { justify-self: center; }.item-a { justify-self: stretch; }● align-selfتراز کردن آیتم در راستای محور عمودی.مقادیر:▪ start▪ end▪ center▪ stretch.item { align-self: start | end | center | stretch; }مثال‌ها:.item-a { align-self: start; }.item-a { align-self: end; }.item-a { align-self: center; }.item-a { align-self: stretch; }● place-selfتعیین همزمان مقادیر align-self و justify-self.مقادیر:▪ auto▪ <align-self> / <justify-self>مثال‌ها:.item-a { place-self: center; }.item-a { place-self: center stretch; }ترجمه‌ای از مقاله A Complete Guide to Grid