شبکه (Grid Intro)
«شبکه CSS (CSS Grid)» یعنی چیدمان با «ردیف (Row)» و «ستون (Column)». همچنین «ظرف شبکه (Grid Container)» همان والد است و «آیتم شبکه (Grid Item)» فرزندان مستقیم آن هستند. با شبکه، بدون float و جایگذاریِ دستی، صفحه های پیچیده را ساده می چینیم.
شروع سریع شبکه CSS
یک ظرف سه ستونه می سازیم و چند آیتم داخلش می گذاریم.
<style>\n .container {\n display: grid;\n grid-template-columns: auto auto auto;\n background-color: dodgerblue;\n padding: 10px;\n }\n .container div {\n background-color: #f1f1f1;\n border: 1px solid black;\n padding: 10px;\n font-size: 30px;\n text-align: center;\n }\n</style>\n<div class="container">\n <div>1</div>\n <div>2</div>\n <div>3</div>\n <div>4</div>\n <div>5</div>\n</div>\nاجزای اصلی شبکه
- ظرف شبکه (Grid Container): عنصری با
display: gridیاinline-grid. - آیتم های شبکه (Grid Items): فرزندان مستقیم ظرف شبکه.
نکته: شبکه دو بعدی است؛ هم ردیف دارد هم ستون. فلکس باکس یک بعدی است؛ یا ردیف یا ستون.
چیدمان نام گذاری شده با grid-template-areas
با «ناحیه ها (Areas)» می توانیم چیدمان صفحه را خواناتر تعریف کنیم.
<style>\n .container {\n display: grid;\n grid-template-columns: 1fr 1fr 2fr;\n grid-template-areas: \n \"header header header\"\n \"menu menu content\"\n \"footer footer footer\";\n gap: 10px;\n padding: 10px;\n background-color: #e6f2ff;\n }\n .header {\n grid-area: header;\n }\n .menu {\n grid-area: menu;\n }\n .content {\n grid-area: content;\n }\n .footer {\n grid-area: footer;\n }\n .container > * {\n background-color: #f1f1f1;\n border: 1px solid #999;\n padding: 10px;\n text-align: center;\n }\n</style>\n<div class="container">\n <div class="header">Header</div>\n <div class="menu">Menu</div>\n <div class="content">Content</div>\n <div class="footer">Footer</div>\n</div>\nمقایسه Grid و Flexbox
شبکه برای چیدمان دو بعدی عالی است. فلکس برای ردیف یا ستون. بنابراین، ساختارهای صفحه را با شبکه بچین. سپس ریزچیدمان داخل هر بخش را با فلکس باکس انجام بده.
گام های عملی
- روی والد بنویس:
display: grid;. - ستون ها را با
grid-template-columnsمشخص کن. - فاصله ها را با
gapتنظیم کن. - برای صفحات پیچیده، از
grid-template-areasکمک بگیر. - برای بخش های داخلی، از فلکس باکس استفاده کن.
جمع بندی سریع
- شبکه دو بعدی است؛ ردیف و ستون.
- ظرف شبکه والد آیتم هاست.
- سه ستونه سریع:
grid-template-columns: auto auto auto;. - چیدمان خوانا با ناحیه ها راحت تر است.
برای واکنش گرایی شبکه، صفحه فلکس واکنش گرا را ببین. همچنین تنظیمات ظرف فلکس را در ظرف فلکس مرور کن تا تفاوت ها روشن شود. اگر دنبال «شبکه CSS» هستی، از همین شبکه CSS شروع کن.