ستون ها و سطرهای گرید (Grid Columns/Rows)
در این راهنما با «ستون ها و سطرهای گرید» در CSS آشنا می شوید. ستون ها خطوط عمودی و سطرها خطوط افقی چیدمان هستند؛ سپس با ویژگی «فاصله ها (Gaps)» اندازه فاصله بین ستون ها و سطرها را کنترل می کنید.
تعریف ستون ها و سطرهای گرید
طبق منبع، خطوط عمودی آیتم ها را ستون و خطوط افقی را سطر می نامیم. با شناخت این دو، ساختار شبکه روشن می شود و می توانید گپ ها را دقیق تنظیم کنید. برای مرور کلی گرید، صفحه مقدمه گرید را ببینید.
فاصله ها (Gaps) بین ستون ها و سطرها
فضاهای بین هر ستون/سطر «گپ (gap)» نام دارند. برای تنظیم آن از سه ویژگی استفاده می شود: column-gap، row-gap و میان بُر gap.
column-gap: فاصله ستون ها
مثال منبع: تعیین فاصله 50px بین ستون ها.
.container { display: grid; column-gap: 50px; }row-gap: فاصله سطرها
برای سطرها نیز مشابه عمل می کنیم.
.container { display: grid; row-gap: 50px; }gap: میان بُر سطر/ستون
با gap می توانید هر دو فاصله را یکجا تنظیم کنید؛ یک مقدار برای هر دو، یا دو مقدار به ترتیب سطر/ستون.
.container { display: grid; gap: 50px 100px; /* row column */ }نکته: اگر فقط یک مقدار به gap بدهید، همان مقدار برای row-gap و column-gap اعمال می شود.
ستون ها و سطرهای گرید: مسیر تکمیلی
برای تمرین بیشتر روی «ستون ها و سطرهای گرید»، به فصل خطوط گرید مراجعه کنید. همچنین برای چیدمان های واکنش گرا می توانید از فلکس واکنش گرا یا کوئری های رسانه ای استفاده کنید. جهت فهم کلی، این پیوند با کلیدواژه شماست: ستون ها و سطرهای گرید.
منابع مرجع: MDN: column-gap، MDN: row-gap و MDN: gap.