CSS Grid چیست و چه کاربردی دارد؟
در این مطلب از آموزش grid در css می خواهیم درباره اینکه CSS Grid چیست و چه کاربردی دارد، صحبت کنیم. شما برای صفحه آرایی صفحات وب علاوه بر flexbox که تک بعدی است به CSS Grid که دوبعدی می باشد، نیاز دارید. پس مهم است که دقیقا بدانید CSS Grid چیست.
CSS Grid چیست؟
grid در CSS سیستمی است برای ایجاد طرح بندی های پیچیده با تقسیم یک صفحه وب به یک سری ردیف و ستون. گرید یک سیستم طرح بندی مبتنی بر شبکه دو بعدی را ارائه می دهد که به توسعه دهندگان اجازه می دهد طرح بندی هایی ایجاد کنند که هم انعطاف‌پذیر و هم پاسخ‌گو باشند. CSS Grid به توسعه دهندگان این امکان را می دهد که ردیف ها و ستون ها را با استفاده از واحدهای اندازه گیری مختلف، از جمله پیکسل، درصد و واحد انعطاف پذیر “fr” مشخص کنند.
آیتم های گرید را می توان با استفاده از ویژگی های “grid-column” و “grid-row” در سلول های خاصی از شبکه قرار داد یا می توان آنها را بر اساس اندازه و فضای موجود به طور خودکار قرار داد. همچنین می‌توان شبکه را با استفاده از ویژگی های مختلف، از جمله رنگ های پس زمینه، حاشیه ها و فاصله بین سلول ها، استایل دهی کرد. با تعریف مناطق مختلف شبکه، توسعه دهندگان می توانند طرح بندی هایی ایجاد کنند که با اندازه های مختلف صفحه نمایش و انواع دستگاه ها سازگار باشد.
به طور کلی، CSS Grid یک ابزار قدرتمند برای ایجاد طرح بندی های انعطاف پذیر و پویا در طراحی وب است که آن را به ابزاری ارزشمند برای ساخت وب سایت های مدرن و واکنش گرا تبدیل می کند.
الگوریتم جانمایی خودکار در CSS Grid چیست؟
CSS Grid یک الگوریتم جانمایی خودکار را نیز با خود به همراه دارد. این الگوریتم، امکان پُر کردن فضای در دسترس را بدون نیاز به انجام محاسبات زیاد، پدید می آورد. CSS Grid حتی تا حدودی انعطاف پذیری در محور Z را نیز فراهم می کند. به طوریکه می توان در صورت نیاز اقلام CSS Grid را روی این محور به صورت همپوشان (متداخل) جانمایی کرد.
کاربرد CSS Grid چیست؟
همانطور که عنوان شد، CSS Grid در واقع یک خصوصیت بوده که به ما اجازه شبکه بندی کردن صفحه را می دهد. یعنی شما قادر خواهید بود تا عرض صفحه خود را به تعداد مشخصی تقسیم بندی کنید. مثلا می توانید عرض صفحه سایت را به ۱۲ قسمت مساوی تقسیم کرده و مطمئن شوید که در ابعاد مختلف، طرح شما درست نمایش داده خواهد شد. در حالت گرید شما می توانید تعداد و ابعاد ستون های خودتان را نیز مشخص و معین کنید.
مثلا تعیین کنید که ۳ ستون با ابعاد ۲۰۰ پیکسل برای شما ایجاد شود. در طراحی سایت واکنش گرا (Responsive) چیزی که اهمیت دارد، نمایش درست وبسایت در اندازه های مختلف می باشد. یعنی در ابعاد گوشی، تبلت و حتی لب تاب های بزرگ، سایت باید درست نمایش داده شود. کاربرد گرید نیز وقتی نمایان خواهد شد که شما دست به طراحی واکنشگرا بزنید. در Grid شما می توانید حتی تعداد سطر و ستون های خود را به صورت خودکار در نظر بگیرید که بر اساس عرض و ارتفاع صفحه نمایش دستگاه کاربر، این تعداد تغییر کند.
آیا CSS grid جزء استانداردهای وب حساب می شود؟
هر چند CSS grid به عنوان یکی از استانداردهای وب شناخته نشده است، اما از اکتبر سال ۲۰۱۷ به بعد مرورگرهای گوگل کروم، فایرفاکس، سافاری، اپرا و Microsoft edge همگی از CSS grid پشتیبانی می کنند. W3C مسئولیت تدوین استانداردهای جدید وب را به عهده دارد و این کنسرسیوم استفاده از CSS grid را توصیه کرده است. برنامه نویسان وب که دوست دارند قالب آن ها حتی در مرورگرهای قدیمی مثل IE هم به خوبی نمایش داده شود، می توانند از Modernizr استفاده کنند. Modernizr یک کتابخانه جاوا اسکریپت برای نمایش صحیح HTML5 و CSS3 در مرورگرهای مختلف است.
پیش نیازهای آموزش CSS Grid چیست؟
پیش از شروع آموزش CSS Grid باید آشنایی لازم با فناوری CSS و استایل دهی صفحه وب با استفاده از CSS را داشته باشید. همچنین، با توجه به اینکه از CSS برای استایل دهی و قالب بندی نشانه گذاری های HTML استفاده می شود، باید با کدنویسی HTML نیز آشنایی کافی داشته باشید. به طور کلی HTML و CSS از جمله فناوری های بنیادی در حیطه طراحی و توسعه وب به شمار می روند و از اهمیت ویژه ای برخوردار هستند. به ویژه، برای درک مفاهیم و آموزش های ارائه شده در این مقاله، آشنایی با CSS ضرورت دارد.
Grid Container چیست؟
در گرید “container یا ظرف شبکه” عنصر والد است که شامل تمام موارد شبکه (به عنوان مثال، عناصر فرزند) در یک طرح شبکه است. container با اعمال ویژگی “display: grid” یا “display: inline-grid” به عنصری در نشانه گذاری HTML تبدیل می شود. هنگامی که یک عنصر به عنوان یک container تعیین شد، به نقطه شروع برای تعریف طرح شبکه تبدیل می شود.
مسیرهای شبکه (ردیف‌ها و ستون‌ها) را می توان با استفاده از ویژگی های “grid-template-rows” و “grid-template-columns” در ظرف شبکه تعریف کرد که به توسعه دهندگان اجازه می دهد اندازه و تعداد تراک ها را در شبکه مشخص کنند. سپس آیتم های گرید با استفاده از ویژگی های “grid-row” و “grid-column” در ظرف شبکه قرار می گیرند که خطوط شبکه شروع و پایان را برای هر آیتم تعریف می کند. ویژگی کوتاه نویسی “grid-area” همچنین می تواند برای تعیین خطوط شبکه شروع و پایان در یک ویژگی واحد استفاده شود.
علاوه بر این، container را می توان با استفاده از ویژگی های مختلفی مانند «grid-gap» که فاصله بین مسیرهای شبکه را مشخص می کند و «justify-items» و «align-items» که تراز افقی و عمودی آیتم های شبکه را در سلول های شبکه کنترل می کند، تعریف کرد. به طور کلی، ظرف شبکه عنصر اساسی در CSS Grid است که ساختار و سازماندهی را برای ایجاد طرح بندی های پیچیده و واکنش گرا در صفحات وب فراهم می کند.
ویژگی های CSS Grid چیست؟
خصوصیت Grid در css دارای ویژگی مختصرنویسی است که تمام ویژگی های زیر را هم می تواند در بر گیرد:
- grid-template-rows
- grid-template-columns
- grid-template-areas
- grid-auto-rows
- grid-auto-columns
- grid-auto-flow
- column-gap
- row-gap
اگر مقدار none را به این ویژگی دهید تمام موارد بالا ریست شده به مقدار اولیه بر می گردد.
به دو روش می توان از ویژگی grid استفاده بهینه کرد:
- نوشتن تنها مقادیر grid-template
- مقدار دهی صریح ردیف ها
تفاوت flexbox با CSS Grid چیست؟
CSS Grid و Flexbox هر دو سیستم های چیدمان در CSS هستند که به توسعه دهندگان اجازه می دهند طرح بندی های پیچیده ای را در صفحات وب ایجاد کنند. در حالی که دارای شباهت هایی نیز هستند، اما تفاوت های کلیدی دارند:
۱- طرح بندی دو بعدی در مقابل طرح بندی یک بعدی
CSS Grid یک سیستم طرح بندی دو بعدی با ردیف ها و ستون ها را فراهم می کند که به توسعه دهندگان اجازه می دهد موارد را هم به صورت افقی و هم به صورت عمودی قرار دهند. از سوی دیگر، Flexbox یک سیستم چیدمان یک بعدی است که در امتداد یک محور، به صورت افقی یا عمودی کار می کند.
۲- ساختار چیدمان
CSS Grid برای طرح بندی های پیچیده که نیاز به کنترل دقیق بر روی قرار دادن آیتم ها دارند، مناسب تر است. گرید برای رسیدگی به سطرها و ستون های متعدد، با مواردی که در سلول های شبکه خاص قرار می گیرند، طراحی شده است. از سوی دیگر، Flexbox برای طرح بندی های ساده تر مناسب است، جایی که آیتم ها باید در امتداد یک ردیف یا ستون مرتب شوند.
۳- تراز و مرتب سازی
Flexbox مجموعه ای قدرتمند از ویژگی های همسویی و سفارشی را ارائه می دهد که به راحتی می توانید اقلام را در مرکز قرار دهید، آنها را در بالا یا پایین یک ظرف تراز کنید یا ترتیب آنها را معکوس کنید. CSS Grid همچنین برخی از ویژگی های تراز و مرتب سازی را ارائه می کند، اما معمولاً پیچیده تر هستند و پیاده سازی آن ها می تواند نیاز به تلاش بیشتری داشته باشد.
۴- پشتیبانی از مرورگرها
در حالی که هر دو CSS Grid و Flexbox اکنون به طور گسترده در مرورگرهای مدرن پشتیبانی می شوند، نسخه های قدیمی برخی از مرورگرها ممکن است از آنها پشتیبانی نکنند. با این حال، به طور کلی، Flexbox در مرورگرهای قدیمی در مقایسه با CSS Grid از پشتیبانی بهتری برخوردار است.
به طور کلی، هر دو CSS Grid و Flexbox ابزارهای ارزشمندی برای ساخت وب سایت های مدرن و واکنش گرا هستند. هر کدام نقاط قوت و ضعف خاص خود را دارند و توسعه دهندگان باید بهترین گزینه را انتخاب کنند که با نیازهای خاص آنها سازگار باشد.
واحد fr در CSS Grid چیست؟
در CSS Grid، واحد “fr” یک واحد اندازه گیری منعطف است که به توسعه دهندگان اجازه می دهد تا اندازه تراک های شبکه (ردیف ها و ستون ها) را به روشی انعطاف پذیر مشخص کنند. واحد “fr” مخفف “fraction” است و برای تعیین نسبت فضای موجود که هر مسیر شبکه باید اشغال کند استفاده می شود. به عنوان مثال، اگر می خواهید یک طرح شبکه ۳ ستونی ایجاد کنید که ستون اول 1/3 فضای موجود و دو ستون دیگر 2/3 فضای باقی مانده را اشغال کنند، می توانید از کد زیر استفاده کنید:
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr 2fr;
}
در این مثال، ستون اول روی 1fr تنظیم شده است، به این معنی که 1/5 از کل فضای موجود را اشغال می کند. (زیرا 5 واحد کل وجود دارد – 1fr + 2fr + 2fr = 5fr). دو ستون دیگر روی 2fr تنظیم شده اند، به این معنی که هر کدام 2/5 از کل فضای موجود را اشغال می کنند.
واحد “fr” به ویژه برای ایجاد طرح بندی های شبکه ای انعطاف پذیر و واکنشگرا که با اندازه های صفحه نمایش و انواع دستگاه های مختلف سازگار است، مفید است. با مشخص کردن مسیرهای شبکه با استفاده از واحدهای «fr»، توسعه دهندگان می توانند طرح بندی هایی ایجاد کنند که به طور خودکار با فضای موجود تنظیم می شوند، در حالی که ساختار ثابتی را حفظ می کنند.
توجه به این نکته مهم است که واحد “fr” در همه مرورگرها، به ویژه مرورگرهای قدیمی، پشتیبانی نمی شود. با این حال در مرورگرهای مدرن پشتیبانی می شود و به طور کلی یک واحد اندازه گیری ایمن و قابل اعتماد برای ایجاد طرح بندی های شبکه ای انعطاف پذیر و واکنشگرا در نظر گرفته می شود.
موقعیت یابی با استفاده از grid-template-areas
استفاده از ویژگی area در گرید این قابلیت را به شما می دهد تا اولا تعداد سطر و ستون صفحه را مشخص کرده و دوما برای هرکدام از نواحی مدنظر خود از یک نام استفاده کنید. مثلا ۶ ستون دارید و نام ستون اول و دوم و سوم خود را Test می گذارید. حال کافیست تا به یکی از آیتم های درون Container ویژگی grid-area را اضافه کرده و مقدار آن را برابر با Test قرار دهید.
اینگونه خواهد شد که آیتم مدنظر شما سه ستون را اشغال می کند. چرا؟ چون سه ستون از ۶ ستون موجود را در خصوصیت grid-template-areas برابر با مقدار Test در نظر گرفته اید. پس با این ویژگی دست ما از همیشه باز تر خواهد بود.
سخن پایانی
برای اینکه بتوانید به یک فرد حرفه ای در طراحی سایت تبدیل شوید لازم است که بدانید CSS Grid چیست، چه کاربردهایی دارد و در کجا از این ویژگی باید استفاده کنید. به طور کامل در این مطلب به این موضوعات پرداخته شده است. می توانید با مطالعه این مقاله دانش خود را نسبت به موضوع grid در css افزایش دهید.
برای دریافت پاسخ سوالات خود و بهره مند شدن از تجربه اساتید خبره و دیگر دوستانتان در کمپین آموزشی بی لرن می توانید سوالات خود را در کافه گپ و گفت مطرح نمایید و در سریعترین زمان، پاسخ سوال خود را دریافت نمایید. همچنین می توانید با عضویت در کمپین آموزشی بی لرن، از دوره های آموزشی رایگان و کاربردی در زمینه های مختلف به صورت تخصصی و حرفه ای بهره مند شوید.
اگر از مطالعه این مطلب لذت بردید، می توانید آن را در شبکه های اجتماعی خود به اشتراک بگذارید تا دوستان شما نیز از آن بهره ببرند.
دیدگاهتان را بنویسید