لطفا صبر کنید ...

ایجاد مسیرهای ساختگی برای Grid در CSS

الهام غایب

توسط الهام غایب

نویسنده
دیدگاه ها: 0
بازدید ها : 365
رایگان
هدف ما این است که شما، در بالاترین سطح طراحی و توسعه وب باشید.

ثبت نام کنید

آیا می‌توان به ردیف‌ها و ستون‌های یک CSS Grid استایل داد؟ این سوالی است که با استفاده از آرایش‌های جدولی می‌توان به آن پاسخ داد.


تعریف Grid

از آنجایی که در مورد آرایش‌های جدولی در CSS صحبت می‌کنیم پس نیاز به یک عنصر در بردارنده داریم که نه عنصر دیگر را در خود جای دهد. می‌توانیم از یک لیست منظم شده یا یک پاراگراف با تعدادی <span> یا یک <section> با چند <div> استفاده کنیم. بیایید روش آخر را امتحان کنیم:

<section id="ttt">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
</section>

ما این نه <div> را برداشته و آن را درون یک گرید سه در سه قرار می‌دهیم که هر ردیف دارای طول پنج ems و هر ستون دارای عرض پنج ems باشد. تنظیم ساختار گرید هم به بسیار ساده است:

#ttt {
	display: grid;
	grid-template-columns: repeat(3,5em);
	grid-template-rows: repeat(3,5em);
}

به همین راحتی! با استفاده از الگوریتم auto-flow در آرایش گرید، کافی است که نه عنصر <div> را در نه سلول گرید قرار دهید. از این جا به بعد، ایجاد ظاهر گرید بستگی به تنظیم مرزها بر روی عناصر <div> دارد. روش‌های زیادی برای انجام این کار وجود دارد اما در اینجا به یکی از ساده‌ترین روش‌ها می‌پردازیم:

#ttt > * {
	border: 1px solid black;
	border-width: 0 1px 1px 0;
	display: flex; /* flex styling to center content in divs */
	align-items: center;
	justify-content: center;
}
#ttt > *:nth-of-type(3n)  {
	border-right-width: 0;
}
#ttt > *:nth-of-type(n+7) {
	border-bottom-width: 0;
}

نتیجه آن هم شکل زیر است که دارای آرایشی ساده می‌باشد:

مسیرهای ساختگی برای Grid


مزیت این روش در آن است که تکیه بر نام کلاس وجود ندارد. اگر آرایش گرید به حالت ستونی تغییر کند، گرید از هم می‌پاشد که در ادامه خواهیم دید:

#ttt {
	display: grid;
	grid-template-columns: repeat(3,5em);
	grid-template-rows: repeat(3,5em);
	grid-auto-flow: column;  /* a change in layout! */
}

 

مسیرهای ساختگی برای Grid


اگر جریان به صورت ستونی باشد، در این صورت قوانین اعمال شده بر مرزهای هر سلول باید تغییر کند. مانند این:

#ttt > *:nth-of-type(3n) {
	border-bottom-width: 0;
}
#ttt > *:nth-of-type(n+7) {
	border-right-width: 0;
}

با این کد به همان حالت اولیه گرید بر‌می‌گردیم اما با محتوایی که به صورت ستونی مرتب شده است نه به صورت ردیفی. هیچ row reverse  یا column reverse در گرید وجود ندارد و از این نظر نباید آن را مشابه flexbox دانست. بنابراین، ما تنها باید نگران الگوهای جریان طبیعی ردیف و ستون باشیم.

اما اگر در آینده تغییری در طرح ایجاد شود، آیتم‌ها به روش دیگری قرار می‌گیرند؟ برای مثال، ممکن است بنا به دلایلی یک یا دو آیتم برداشته شده و به عنوان آخرین آیتم گرید نمایش داده شوند. مانند این:

#ttt > *:nth-of-type(4), #ttt > *:nth-of-type(6) {
	order: 66;
}

درست مانند فلکس باکس، این عمل باعث تغییر مکان و نمایش آیتم‌های گرید ورای نظم اولیه خواهد بود و آن‌ها را پس از آیتم‌های گرید که فاقد مقادیر مشخص order هستند قرار خواهد داد. اگر این نوع تغییر آرایش امکان‌پذیر باشد، هیچ راه آسانی برای تغییر مرزها برای ایجاد تصویر فرضی از خطوط درونی گرید وجود ندارد. پس چه روشی استفاده کنیم؟

مطالعه بیشتر در لیداوب:

استفاده از  پرکننده <b>

اگر بخواهید استایل‌های مستقلی ایجاد کنید که از مسیرهای گرید پیروی کنند، در این صورت باید عناصر دیگر را هم جایگذاری و استایل دهی کنید. احتمالا آن‌ها محتوایی ندارند و همین ویژگی آن‌ها را به پرکننده ساختار شکاف‌های ایجاد شده در گرید تبدیل می‌کند. بنابراین، می‌توانیم به عنصر <section> دو عنصر <b> اضافه کنیم:

<section id="ttt">
	<b id="h"></b>
	<b id="v"></b>
	<div>1</div>
	<div>2</div>
	<div>3</div>
…

این پرکننده‌ها می‌توانند در هر جایی درون <section> قرار بگیرند اما اگر در ابتدا قرار بگیرند عملکرد بهتری خواهند داشت. سپس، باید استایل‌ها را به گرید اولیه خود اضافه کنیم:

b[id] {
	border: 1px solid gray;
}
b#h {
	grid-column: 1 / -1;
	grid-row: 2;
	border-width: 1px 0;
}
b#v {
	grid-column: 2;
	grid-row: 1 / -1;
	border-width: 0 1px;
}

عبارت 1 / -1 یعنی از اولین خط گرید به آخرین خط گرید برو و تعداد خطوط گرید اصلا مهم نیست. این یک روش ساده و کارامد در چنین موقعیت‌هایی محسوب می شود که می‌توانید یک آیتم گرید را از یک لبه گرید به لبه دیگر گرید بسط دهید.

دوره‌های آموزشی بیشتر در لیداوب:

آموزش پایه لاراول ۵,۵

آموزش CSS

آموزش HTML مقدماتی

لیداوب مقالات و دوره‌های آموزشی CSS و طراحی سایت را در اختیار شما قرار می‌دهد که می‌توانید با استفاده از آن‌ها گام بلندتری در طراحی سایت حرفه‌ای بردارید.

منبع :

5 از 1 رای

 مطالب مرتبط  

در قسمت زیر مطالبی وجود دارند که با مقاله فعلی مرتبط هستند

متاسفانه فقط اعضای سایت قادر به ثبت دیدگاه هستند

برترین های