CSS Grid یکی از نوآورانهترین تکنیکهای چیدمان صفحات وب است که به شما اجازه میدهد ساختارهای پیچیده و متنوعی برای وبسایتها ایجاد کنید. با آموزش CSS Grid، میتوانید از این سیستم دو بعدی بهرهمند شوید که برخلاف روشهای قدیمیتر، همزمان ساختارهای افقی و عمودی را مدیریت میکند. این روش، با سادهسازی فرآیند طراحی، نیاز به استفاده از کدهای پیچیده و تکراری را کاهش میدهد و همچنین امکان تغییر راحتتر طرحبندی را در صفحات واکنشگرا (Responsive) فراهم میکند.
CSS Grid به شما اجازه میدهد با استفاده از ردیفها و ستونها، عناصر را در قالب یک شبکه مرتب کنید و به راحتی آنها را جابجا یا اندازه آنها را تنظیم کنید. این سیستم، ابزارهایی قدرتمند مانند grid-template-areas، grid-template-columns و grid-template-rows در اختیار طراحان قرار میدهد تا طرحهای پیشرفتهتر و حرفهایتری ایجاد کنند.
در این مقاله، به بررسی اصول اولیه CSS Grid، نحوه ایجاد یک شبکه یا گرید، و تنظیمات پیشرفتهتری که به شما امکان سفارشیسازی و کنترل دقیق بر روی عناصر را میدهند، خواهیم پرداخت. همچنین، با مثالهای عملی، مفاهیم را به صورت کاربردی توضیح میدهیم تا حتی کاربران مبتدی نیز بتوانند از این سیستم چیدمان به بهترین شکل ممکن استفاده کنند. در پایان، منابعی برای یادگیری بیشتر و تمرینهای عملی معرفی میکنیم تا این مفاهیم را بهتر و عمیقتر فرا بگیرید.
با ما همراه باشید تا دنیای CSS Grid را کشف کرده و از قدرت و قابلیتهای آن در طراحی وب لذت ببرید.
چرا CSS Grid مهم است؟
با CSS Grid میتوان به سادگی چینشهای پیچیدهای برای صفحات وب ایجاد کرد. این چینشها که پیشتر نیازمند ترفندهای CSS و HTML پیچیده بودند، اکنون با استفاده از یک دستور ساده در CSS Grid قابل دستیابی هستند. از طرفی، CSS Grid طراحی صفحات واکنشگرا را سادهتر میکند و به شما این امکان را میدهد که چینشها را برای نمایشگرهای مختلف مانند موبایل، تبلت و دسکتاپ بهینهسازی کنید.
چگونه CSS Grid را آغاز کنیم؟
برای استفاده از CSS Grid، ابتدا باید یک عنصر HTML را به عنوان Grid Container تعریف کنیم. این کار با استفاده از دستور display: grid; یا display: inline-grid; انجام میشود. هنگامی که یک عنصر به عنوان Grid Container تنظیم شد، تمامی عناصر داخلی آن به عنوان Grid Items شناخته میشوند که میتوانند در قالب شبکهای قرار بگیرند.
ویژگیهای مهم برای تعریف شبکه:
grid-template-columns: برای تعریف ستونها استفاده میشود. شما میتوانید تعداد ستونها و اندازه آنها را مشخص کنید.
grid-template-rows: برای تعریف ردیفها استفاده میشود. مشابه ستونها، شما میتوانید تعداد و ارتفاع ردیفها را نیز تعریف کنید.
مثال عملی: فرض کنید میخواهید یک شبکه با سه ستون و دو ردیف ایجاد کنید. ابتدا کانتینر خود را به عنوان یک گرید تعریف میکنیم و سپس ستونها و ردیفها را به اندازههای مورد نظر تنظیم میکنیم:
.container {
display: grid; /* تعریف کانتینر گرید */
grid-template-columns: repeat(3, 1fr); /* سه ستون مساوی */
grid-template-rows: 100px 100px; /* دو ردیف با ارتفاع 100 پیکسل */
}
در این مثال:
دستور display: grid; کانتینر .container را به عنوان یک گرید تعریف میکند.
ویژگی grid-template-columns: repeat(3, 1fr); تعداد سه ستون را مشخص میکند که هر کدام به صورت مساوی از فضای موجود استفاده میکنند.
ویژگی grid-template-rows: 100px 100px; دو ردیف را با ارتفاع 100 پیکسل تعریف میکند.
CSS Grid انعطافپذیری بیشتری را در طراحی ساختارهای پیچیده فراهم میکند و به شما امکان میدهد با کدهایی ساده و خوانا، طرحهایی منظم و جذاب ایجاد کنید.
کانتینر گرید چیست؟
در CSS Grid، Grid Container محفظهای است که عناصر شبکه (Grid Items) در آن قرار میگیرند. وقتی شما یک عنصر HTML را به عنوان Grid Container تعریف میکنید، تمامی عناصر فرزند آن به صورت خودکار به عنوان Grid Items عمل میکنند. این کانتینر، از طریق تنظیم ویژگیهای مختلف، به شما این امکان را میدهد که جایگاه، اندازه و ترتیب آیتمها را به دقت کنترل کنید.
تعریف یک کانتینر به عنوان گرید ساده است و با اعمال دستور display: grid; یا display: inline-grid; به عنصر HTML مورد نظر انجام میشود. با این کار، عنصر به یک کانتینر گرید تبدیل میشود و شما میتوانید شبکهای از ردیفها و ستونها را برای آن ایجاد کنید.
ویژگیهای اصلی کانتینر گرید
CSS Grid مجموعهای از ویژگیها را برای تنظیم دقیق کانتینر گرید و کنترل کامل بر روی طرحبندی ارائه میدهد:
grid-template-columns
این ویژگی، تعداد و اندازه ستونهای Grid Container را تعیین میکند. شما میتوانید اندازه هر ستون را بر حسب واحدهای مختلفی مانند پیکسل، درصد، یا واحد fr (fractional unit) تعیین کنید. واحد fr به شما اجازه میدهد که فضاهای ستونها را نسبت به هم تقسیم کنید. به عنوان مثال، با تنظیم grid-template-columns: 100px 1fr 2fr; ستون اول اندازه ثابت 100 پیکسل دارد، در حالی که ستون دوم و سوم به ترتیب 1 و 2 واحد از فضای باقیمانده را دریافت میکنند.
grid-template-rows
این ویژگی نیز مشابه grid-template-columns عمل میکند، اما برای تعیین تعداد و اندازه ردیفها استفاده میشود. شما میتوانید ارتفاع هر ردیف را بر حسب واحدهای مختلفی مانند پیکسل یا fr تنظیم کنید. به عنوان مثال، grid-template-rows: 100px 200px; ردیف اول را با ارتفاع ثابت 100 پیکسل و ردیف دوم را با ارتفاع 200 پیکسل تنظیم میکند.
gap
ویژگی gap برای تعیین فاصله بین ستونها و ردیفها به کار میرود و ظاهر شبکه را منظمتر میکند. gap از دو زیر ویژگی column-gap و row-gap نیز تشکیل شده که به ترتیب فاصله ستونها و ردیفها را بهطور جداگانه تعیین میکنند. به عنوان مثال، gap: 15px; فاصلهی 15 پیکسل بین هر ستون و ردیف ایجاد میکند.
grid-auto-flow
این ویژگی نحوه قرارگیری خودکار آیتمها در شبکه را تنظیم میکند. این ویژگی میتواند مقادیری مانند row، column، یا dense بگیرد. اگر مقدار row تنظیم شود، آیتمها ابتدا در ردیفها و سپس در ستونها جایگذاری میشوند و اگر column باشد، ابتدا ستونها و سپس ردیفها پر میشوند. گزینه dense نیز شبکه را به صورت فشرده پر میکند تا فضای خالی کمتری در طرحبندی ایجاد شود.
مثال عملی: ساخت یک کانتینر گرید با سه ستون و دو ردیف
در این مثال، کانتینری داریم که سه ستون و دو ردیف دارد. هر ستون اندازهی متفاوتی دارد و فاصله بین هر ستون و ردیف با gap تنظیم شده است.
.container {
display: grid; /* تعیین کانتینر به عنوان گرید */
grid-template-columns: 100px 1fr 2fr; /* تعریف سه ستون با اندازههای مختلف */
grid-template-rows: 100px 200px; /* تعریف دو ردیف با ارتفاع مختلف */
gap: 15px; /* فاصله بین ستونها و ردیفها */
}
در این مثال:
ستون اول اندازه ثابت 100 پیکسل دارد.
ستون دوم به صورت 1fr تنظیم شده، که به این معناست که به اندازه یک واحد از فضای باقیمانده را میگیرد.
ستون سوم 2fr است و دو برابر ستون دوم از فضای باقیمانده را اشغال میکند.
فاصلهی 15 پیکسل بین تمامی ستونها و ردیفها ایجاد شده است که به منظمتر و خواناتر شدن طراحی کمک میکند.
چند ویژگی دیگر برای کنترل کانتینر گرید:
justify-items و align-items:
این ویژگیها برای تنظیم موقعیت افقی و عمودی تمام آیتمهای داخل گرید استفاده میشوند. به عنوان مثال، با تنظیم justify-items: center; تمامی آیتمها به صورت افقی در مرکز قرار میگیرند.
grid-template-areas:
این ویژگی به شما اجازه میدهد تا با نامگذاری بخشهای مختلف شبکه، چیدمانهای پیچیدهتری ایجاد کنید. با این کار میتوانید نامگذاریهای سادهای انجام دهید و به سادگی کنترل کنید که هر آیتم در کدام بخش شبکه قرار گیرد.
Grid Container یکی از قدرتمندترین و کاربردیترین بخشهای CSS Grid است و امکان مدیریت و تغییر ساختار صفحات وب را به صورت دقیق و منظم فراهم میکند. استفاده از این ویژگیها به شما کمک میکند تا طرحهای حرفهای و واکنشگرا ایجاد کنید و تجربه کاربری بهتری را به بازدیدکنندگان ارائه دهید.
آیتمهای گرید در CSS Grid
در CSS Grid، هر عنصر درون یک Grid Container به عنوان یک Grid Item شناخته میشود. این آیتمها به صورت پیشفرض و با توجه به ساختار گرید تنظیم شده در کانتینر، در شبکه جای میگیرند. اما یکی از قابلیتهای قدرتمند CSS Grid این است که شما میتوانید به صورت کاملاً سفارشی موقعیت و اندازه هر Grid Item را تعیین کنید. این انعطافپذیری به شما این امکان را میدهد که بدون نیاز به استفاده از کدهای پیچیده، چیدمان دقیق و منظمتری برای هر آیتم ایجاد کنید.
ویژگیهای اصلی آیتمهای گرید
CSS Grid برای هر آیتم ویژگیهای مختلفی فراهم کرده است که به شما اجازه میدهد کنترل کاملی روی جایگذاری، اندازه و موقعیت آنها داشته باشید:
grid-column
این ویژگی برای تعیین موقعیت یک Grid Item در ستونهای گرید به کار میرود. با استفاده از grid-column-start و grid-column-end میتوانید آغاز و پایان هر آیتم را در شبکه مشخص کنید. به طور کلی، grid-column به صورت خلاصه برای این کار بهکار میرود و شما میتوانید به سادگی مکان و گستردگی آیتم را در ستونها تعیین کنید.
مثال:
.item1 {
grid-column: 1 / 3; /* آیتم از ستون اول شروع میشود و تا ستون سوم ادامه مییابد */
}
در اینجا، آیتم item1 از ستون اول شروع میشود و در ستون سوم به پایان میرسد، که به معنای پوششدهی دو ستون اول است.
grid-row
ویژگی grid-row مشابه grid-column عمل میکند اما موقعیت آیتم را در ردیفهای گرید تعیین میکند. با استفاده از این ویژگی، میتوانید تعیین کنید که هر Grid Item از کدام ردیف شروع شود و تا کدام ردیف ادامه یابد.
مثال:
.item2 {
grid-row: 2 / 4; /* آیتم از ردیف دوم شروع و تا ردیف چهارم ادامه مییابد */
}
در این مثال، آیتم item2 از ردیف دوم شروع میشود و به ردیف چهارم ختم میشود، که به معنای پوششدهی ردیفهای دوم و سوم است.
justify-self و align-self
این دو ویژگی برای تنظیم موقعیت یک آیتم در محدوده خود به کار میروند و به شما امکان میدهند که موقعیت افقی و عمودی هر Grid Item را به صورت جداگانه تنظیم کنید:
justify-self: موقعیت افقی آیتم در ستون خود را تنظیم میکند و مقادیری مانند start، end، center و stretch میپذیرد.
align-self: موقعیت عمودی آیتم در ردیف خود را تنظیم میکند و از مقادیر مشابه justify-self استفاده میکند.
مثال:
.item3 {
justify-self: center; /* آیتم در مرکز ستون قرار میگیرد */
align-self: end; /* آیتم در پایین ردیف قرار میگیرد */
}
در اینجا، آیتم item3 در مرکز ستون خود و در پایین ردیف خود قرار میگیرد.
سایر ویژگیهای پیشرفته برای کنترل آیتمهای گرید
برای سفارشیسازی بیشتر، CSS Grid ویژگیهای دیگری برای آیتمها ارائه میدهد:
grid-area: این ویژگی به شما اجازه میدهد که نامگذاری سادهای برای موقعیت آیتمها انجام دهید و آنها را با استفاده از grid-template-areas در کانتینر گرید جایگذاری کنید. این قابلیت به خصوص برای طرحهای پیچیده که شامل چندین ناحیه مختلف هستند بسیار مفید است.
مثال:
.item4 {
grid-area: header; /* آیتم را به ناحیهی header اختصاص میدهد */
}
place-self: این ویژگی یک ترکیب از justify-self و align-self است و به شما اجازه میدهد که موقعیت افقی و عمودی آیتم را به طور همزمان تنظیم کنید.
مثال:
.item5 {
place-self: center; /* آیتم را هم در مرکز افقی و هم در مرکز عمودی قرار میدهد */
}
مثال عملی
در زیر یک کانتینر با سه آیتم گرید آورده شده است که هرکدام با استفاده از ویژگیهای grid-column و grid-row در موقعیتهای مختلفی قرار گرفتهاند.
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px;
gap: 10px;
}
.item1 {
grid-column: 1 / 3;
grid-row: 1;
align-self: center;
}
.item2 {
grid-column: 2 / 4;
grid-row: 2;
justify-self: end;
}
.item3 {
grid-column: 1 / 2;
grid-row: 2;
place-self: center;
}
در این مثال:
item1 دو ستون اول را در ردیف اول اشغال میکند و در وسط ردیف قرار میگیرد.
item2 از ستون دوم شروع میشود و تا ستون سوم ادامه دارد، و در ردیف دوم در انتهای ستون خود قرار گرفته است.
item3 در ردیف دوم و ستون اول قرار دارد و به صورت مرکزی در موقعیت خود تنظیم شده است.
این ویژگیها به شما اجازه میدهند تا به راحتی ساختار و چیدمان پیچیدهای در صفحات وب خود ایجاد کنید و هر عنصر را به صورت دقیق در موقعیت دلخواه خود قرار دهید. با استفاده از CSS Grid، طرحبندیهایی حرفهای و منظم میتوان ایجاد کرد که تجربه کاربری بهتری برای بازدیدکنندگان فراهم میآورد.
نتیجه گیری
در پایان، CSS Grid یک ابزار قدرتمند و انعطافپذیر برای طراحی صفحات وب است که با قابلیتهای دو بعدی خود امکان چیدمانهای پیچیده و واکنشگرا را فراهم میکند. با استفاده از ویژگیهای مختلف مانند `grid-template-columns`، `grid-template-rows`، و کنترل دقیق Grid Items، میتوان به سادگی ساختار صفحات را مدیریت کرد و تجربه کاربری بهتری ایجاد نمود. CSS Grid برای طراحانی که به دنبال ایجاد طرحهای مدرن و کاربردی هستند، یک انتخاب ایدهآل است که زمان و تلاش در کدنویسی را به حداقل میرساند و در عین حال، نتیجهای جذاب و حرفهای ارائه میدهد.
