خطوط گرید (Grid Lines) در CSS
در این بخش با «خطوط گرید (Grid Lines)» آشنا می شوید. خطوط بین ستون ها، «خطوط ستون» و خطوط بین سطرها، «خطوط سطر» هستند. با ارجاع به شماره خط می توانید محل شروع و پایان هر آیتم را دقیق مشخص کنید.
تعریف و کاربرد خطوط گرید
منبع توضیح می دهد که خطوط ستون و سطر مرزهای چیدمان شبکه اند. سپس می توانیم با ویژگی های grid-column-start
، grid-column-end
، grid-row-start
و grid-row-end
جایگیری آیتم ها را تعیین کنیم. همچنین میان برهای grid-column
و grid-row
نیز وجود دارند.
نکته: هنگام قرار دادن آیتم ها می توانید به «شماره خطوط» ارجاع دهید و کنترل دقیقی بر کشیده شدن یا پایان بندی داشته باشید.
grid-column-start / grid-column-end
شروع و پایان آیتم روی محور ستون ها را تعیین می کنند. مثال منبع: آیتم از خط ستون 1 آغاز شود و روی 3 پایان یابد.
.item1 { grid-column-start: 1; grid-column-end: 3; }
میان بر grid-column
برای سادگی می توان نوشت: «از خط 1 شروع و 2 ستون گسترش». این همان نتیجه بالا را می دهد.
.item1 { grid-column: 1 / span 2; }
grid-row-start / grid-row-end
این دو، شروع و پایان آیتم روی محور سطرها را مشخص می کنند. مثال منبع: از خط سطر 1 شروع و روی 3 تمام شود.
.item1 { grid-row-start: 1; grid-row-end: 3; }
میان بر grid-row
برای کشیده شدن در دو سطر نیز می توانید از میان بر استفاده کنید.
.item1 { grid-row: 1 / span 2; }
هشدار: مقادیر span
نسبت به تعداد ترک ها معنا دارند؛ بنابراین ابتدا ستون ها/سطرهای شبکه را تعریف کنید، سپس از خطوط گرید بهره ببرید.
مسیر ادامه: خطوط گرید و مباحث مرتبط
برای شناخت ستون ها و سطرها به صفحه ستون ها/سطرها مراجعه کنید. همچنین برای شروع سریع، بخش معرفی گرید را بخوانید. این پیوند با کلیدواژه شماست: خطوط گرید.
منابع مرجع: MDN: grid-column-start، MDN: grid-column، MDN: grid-row-start و MDN: grid-row.