TL; DR
اگر با Flexbox آشنا هستید، Grid باید احساس آشنایی داشته باشد. ریچل اندرو یک وب سایت عالی اختصاص داده شده به CSS Grid دارد تا به شما در شروع کار کمک کند. Grid اکنون در Google Chrome در دسترس است.
فلکس باکس؟ گرید؟
در طی چند سال گذشته، CSS Flexbox به طور گسترده مورد استفاده قرار گرفته است و پشتیبانی مرورگر واقعا خوب به نظر می رسد (مگر اینکه شما یکی از افراد فقیری باشید که مجبور به پشتیبانی از IE9 و پایین تر باشید). Flexbox بسیاری از وظایف طرح‌بندی پیچیده را آسان‌تر کرده است، مانند فاصله‌گذاری مساوی بین عناصر، طرح‌بندی از بالا به پایین یا جام مقدس جادوگری CSS: مرکز عمودی.
اما افسوس که نمایشگرها معمولاً بعد دومی دارند که باید نگران آن باشیم. در کنار مراقبت از اندازه عناصر، متأسفانه، تنها با استفاده از فلکس باکس نمی توانید ریتم عمودی و افقی داشته باشید. اینجاست که CSS Grid به کمک می آید.
CSS Grid بیش از 5 سال است که در پشت پرچم در اکثر مرورگرها در حال توسعه است و برای جلوگیری از راه اندازی باگ مانند Flexbox، زمان بیشتری صرف قابلیت همکاری شده است. بنابراین اگر از Grid برای پیاده‌سازی طرح‌بندی خود در کروم استفاده می‌کنید، به احتمال زیاد همان نتیجه را در فایرفاکس و سافاری خواهید گرفت. در زمان نگارش، پیاده‌سازی Grid توسط Microsoft Edge قدیمی است (همان چیزی که قبلاً در IE11 وجود داشت.) و به‌روزرسانی در حال بررسی است.
با وجود شباهت‌ها در مفهوم و نحو، Flexbox و Grid را به عنوان تکنیک‌های طرح‌بندی رقیب در نظر نگیرید. شبکه در دو بعد مرتب می شود، در حالی که Flexbox در یک بعد قرار می گیرد. هنگام استفاده از این دو با هم هم افزایی وجود دارد.
تعریف یک شبکه
برای آشنایی با خصوصیات فردی Grid، من صمیمانه Rachel Andrew's Grid By Example یا CSS Tricks' Cheat Sheet را توصیه می کنم. اگر با فلکس باکس آشنایی دارید، بسیاری از خواص و معنی آنها باید آشنا باشد.
بیایید نگاهی به یک طرح شبکه استاندارد 12 ستونی بیندازیم. طرح کلاسیک 12 ستونی محبوب است زیرا عدد 12 بر 2، 3، 4 و 6 بخش پذیر است و بنابراین برای بسیاری از طرح ها مفید است. بیایید این طرح را پیاده سازی کنیم:
بیایید با کد نشانه گذاری خود شروع کنیم:
<!DOCTYPE html>
<body>
<header></header>
<nav></nav>
<main></main>
<footer></footer>
</body>
در شیوه نامه ما با گسترش body خود به گونه ای شروع می کنیم که کل نمای را بپوشاند و آن را به یک ظرف شبکه تبدیل می کنیم:
html, body {
width: 100vw;
min-height: 100vh;
margin: 0;
padding: 0;
}
body {
display: grid;
}
اکنون از CSS Grid استفاده می کنیم. هورا!
گام بعدی این است که سطرها و ستون های شبکه خود را پیاده سازی کنیم. ما می‌توانیم همه 12 ستون را در مدل خود پیاده‌سازی کنیم، اما از آنجایی که از هر ستون استفاده نمی‌کنیم، انجام این کار باعث می‌شود CSS ما به‌طور غیرضروری آشفته شود. برای سادگی، طرح را به این صورت پیاده سازی می کنیم:
هدر و پاورقی از نظر عرض و محتوا در هر دو بعد متغیر است. Naver در هر دو بعد نیز متغیر خواهد بود، اما ما حداقل عرض 200 پیکسل را بر آن تحمیل می کنیم. (البته چرا؟ برای نشان دادن ویژگی های CSS Grid.)
در CSS Grid به مجموعه ستون‌ها و ردیف‌ها Track می‌گویند. بیایید با تعریف اولین مجموعه آهنگ‌ها، ردیف‌ها، شروع کنیم:
body {
display: grid;
grid-template-rows: 150px auto 100px;
}
grid-template-rows دنباله ای از اندازه ها را می گیرد که ردیف های جداگانه را مشخص می کند. در این حالت به ردیف اول 150 پیکسل و ردیف آخر 100 پیکسل ارتفاع می دهیم. ردیف وسط روی auto تنظیم شده است، به این معنی که به ارتفاع لازم برای قرار دادن آیتم های شبکه (فرزندان ظرف شبکه ) در آن ردیف تنظیم می شود. از آنجایی که بدن ما در کل نما کشیده شده است، مسیر حاوی محتوا (زرد در تصویر بالا) حداقل تمام فضای موجود را پر می کند، اما در صورت لزوم رشد می کند (و سند را اسکرول می کند).
برای ستون‌ها، می‌خواهیم رویکرد پویاتری داشته باشیم: می‌خواهیم ناو و محتوا هم رشد کنند (و کوچک شوند)، اما می‌خواهیم ناو هرگز کمتر از 200 پیکسل کوچک شود و می‌خواهیم محتوا بزرگ‌تر از nav باشد. در Flexbox ما از flex-grow و flex-shrink استفاده می کنیم، اما در Grid کمی متفاوت است:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
}
ما در حال تعریف 2 ستون هستیم. ستون اول با استفاده از تابع minmax() تعریف می شود که 2 مقدار می گیرد: حداقل و حداکثر اندازه آن آهنگ. (مثل min-width و max-width در یک است.) حداقل عرض، همانطور که قبلاً بحث کردیم، 200 پیکسل است. حداکثر عرض 3fr است. fr یک واحد مخصوص شبکه است که به شما امکان می دهد فضای موجود را بین عناصر شبکه توزیع کنید. fr احتمالاً مخفف "واحد کسری" است، اما ممکن است به زودی به معنای واحد رایگان نیز باشد . مقادیر ما در اینجا به این معنی است که هر دو ستون رشد می کنند تا صفحه را پر کنند، اما ستون محتوا همیشه 3 برابر عرض ستون nav خواهد بود (به شرطی که ستون nav بیشتر از 200 پیکسل باشد).
در حالی که قرارگیری آیتم‌های شبکه ما هنوز درست نیست، اندازه سطرها و ستون‌ها به درستی رفتار می‌کند و رفتاری را نشان می‌دهد که هدف ما بود:
قرار دادن اقلام
یکی از قدرتمندترین ویژگی های Grid این است که می توانید موارد را بدون توجه به ترتیب DOM قرار دهید. (اگرچه، از آنجایی که صفحه‌خوان‌ها در DOM حرکت می‌کنند، ما به شدت توصیه می‌کنیم که برای دسترسی مناسب، باید به نحوه ترتیب‌دهی مجدد عناصر توجه داشته باشید.) اگر قرار دادن دستی انجام نشد، عناصر به ترتیب DOM در Grid قرار می‌گیرند، که در سمت چپ مرتب شده‌اند. سمت راست و بالا به پایین هر عنصر یک سلول را اشغال می کند. ترتیب پر شدن شبکه را می توان با استفاده از grid-auto-flow تغییر داد.
بنابراین، چگونه عناصر را قرار دهیم؟ مسلماً ساده‌ترین راه برای قرار دادن آیتم‌های شبکه، تعیین ستون‌ها و ردیف‌هایی است که آنها را پوشش می‌دهند. Grid دو نحو برای انجام این کار ارائه می دهد: در نحو اول شما نقاط شروع و پایان را تعریف می کنید. در مورد دوم شما یک نقطه شروع و یک دامنه را تعریف می کنید:
header {
grid-column: 1 / 3;
}
nav {
grid-row: 2 / span 2;
}
ما می خواهیم هدر ما از ستون اول شروع شود و قبل از ستون 3 به پایان برسد. Nav ما باید از ردیف دوم شروع شود و در مجموع 2 ردیف را در بر بگیرد.
از نظر فنی، ما اجرای طرح‌بندی خود را به پایان رساندیم، اما می‌خواهم چند ویژگی راحتی که Grid برای شما فراهم می‌کند را به شما نشان دهم تا قرار دادن را آسان‌تر کنید. اولین ویژگی این است که می توانید مرزهای آهنگ خود را نامگذاری کنید و از آن نام ها برای قرار دادن استفاده کنید:
body {
display: grid;
grid-template-rows: 150px [nav-start] auto 100px [nav-end];
grid-template-columns: [header-start] minmax(200px, 3fr) 9fr [header-end];
}
header {
grid-column: header-start / header-end;
}
nav {
grid-row: nav-start / nav-end;
}
کد بالا همان طرح کد قبلی را ارائه می دهد.
حتی قدرتمندتر، ویژگی نامگذاری کل مناطق در شبکه شما است:
body {
display: grid;
grid-template-rows: 150px auto 100px;
grid-template-columns: minmax(200px, 3fr) 9fr;
grid-template-areas: "header header"
"nav content"
"nav footer";
}
header {
grid-area: header;
}
nav {
grid-area: nav;
}
grid-template-areas رشته‌ای از نام‌های جدا شده با فاصله را می‌گیرد و به توسعه‌دهنده اجازه می‌دهد تا به هر سلول یک نام بدهد. اگر دو سلول مجاور هم نام داشته باشند، قرار است در یک منطقه ادغام شوند. به این ترتیب می‌توانید معنای بیشتری را به کد طرح‌بندی خود ارائه دهید و درخواست‌های رسانه را بصری‌تر کنید. باز هم، این کد همان طرح قبلی را ایجاد می کند.
آیا بیشتر وجود دارد؟
بله، بله وجود دارد، بسیار زیاد است که در یک پست وبلاگ نمی توان آن را پوشش داد. ریچل اندرو ، که همچنین یک GDE است، یک متخصص دعوت شده در گروه کاری CSS است و از همان ابتدا با آنها کار کرده است تا اطمینان حاصل شود که Grid طراحی وب را ساده می کند. او حتی یک کتاب در مورد آن نوشت. وب سایت او Grid By Example یک منبع ارزشمند برای آشنایی با Grid است. بسیاری از مردم فکر می کنند Grid یک گام انقلابی برای طراحی وب است و اکنون به طور پیش فرض در کروم فعال شده است، بنابراین می توانید از امروز شروع به استفاده از آن کنید.