ظرف شبکه (Grid Container)
«ظرف شبکه (Grid Container)» همان والد شبکه است. بنابراین هر فرزند مستقیمِ آن، «آیتم شبکه (Grid Item)» می شود. برای فعال شدن شبکه، کافی است روی والد، display: grid یا display: inline-grid بگذاریم.
ظرف شبکه چیست؟
ظرف شبکه شامل چند آیتم است. این آیتم ها در ردیف ها و ستون ها چیده می شوند. همچنین با یک دستور display، کل چیدمان فعال می شود.
<style>\n .grid-container {\n display: grid;\n }\n</style>\n<div class="grid-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 و Inline-Grid
با display: grid، ظرف بلوک سطح است. اما با display: inline-grid، ظرف درون خط می شود.
نمونه: display: grid
این دستور یک ظرف شبکه بلوکی می سازد.
<style>\n .container {\n display: grid;\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نمونه: display: inline-grid
این دستور ظرف شبکه را هم سطح متن قرار می دهد.
<style>\n .container {\n display: inline-grid;\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، grid-template-columns، grid-template-rows، grid-template-areas، gap، row-gap، column-gap، grid-auto-flow، justify-content، align-content.
نکته: تعریف ستون ها با grid-template-columns شروع خوبی است. برای آشنایی کلی، صفحه شبکه (Grid Intro) را ببین.
گام های عملی
- روی والد بنویس:
display: grid;. - ستون ها را با
grid-template-columnsمشخص کن. - فاصله ها را با
gapتنظیم کن. - در صورت نیاز،
grid-auto-flowرا تغییر بده. - برای ادامه، به ردیف و ستون ها برو.
جمع بندی سریع
- ظرف شبکه والد شبکه است.
- آیتم های مستقیم، آیتم شبکه می شوند.
- display: grid یا inline-grid کافی است.
- با
gapفاصله ها را تنظیم کن.