در این مثال بعدی، قراره روی این بخش که شامل عکس هست تمرکز کنیم، و بعدش روی این div که شامل متنه.
خب، این div یه رنگ پسزمینهی شفاف داره، و میتونید تصور کنید که شاید بخوایم اون رو روی تصویر قرار بدیم یا باهاش همپوشانی ایجاد کنیم.
مثلاً همینجا یا شاید یه جایی در بالای تصویر.
حالا بهطور سنتی، برای انجام این کار از موقعیتدهی مطلق یا همون absolute positioning استفاده میکردید، و هیچ ایرادی هم به اون روش وارد نیست.
من فقط میخوام بهتون نشون بدم که چطور میتونیم با استفاده از CSS Grid هم به همین هدف برسیم و همپوشانی ایجاد کنیم.
و در واقع، قبل از اینکه وارد جزئیات همپوشانی بشیم، کل این مثال یه تمرین عالیه برای یادگیری نحوهی قرار دادن دستی آیتمها در Grid.
پس بیاید با هم بررسیش کنیم.
بریم سراغ HTML و CSS این بخش.
خب، اینجاست.
یه بخش کلی یا div داریم به اسم photo-example.
داخلش فقط یه تصویر هست و یه div دیگه.
اون div دوم در واقع مثل یه کپشن یا متن روی تصویر هست.
پس برای اینکه بهتر بفهمیم Grid چطور کار میکنه و اینکه قرار دادن دستی آیتمها یعنی چی، میخوام یه مقدار کد برای این div بنویسم.
توی CSS، به کلاس photo-example میگم که display رو برابر با grid قرار بده.
و حالا، اگه تنها هدفمون این باشه که اون div کپشن رو روی تصویر قرار بدیم، چه اینجا چه اونجا، واقعاً به تعداد زیادی ستون یا ردیف نیاز نداریم.
فقط یه ستون و یه ردیف کافیه، ولی فقط برای اهداف آموزشی، بیاید چندتا ستون و ردیف تعریف کنیم.
پس grid-template-columns رو مینویسیم. و چهار مرتبه 1fr رو قرار می دم
و فقط برای مثال، میخوام چهار ستون با عرض مساوی داشته باشم. و برای ردیفها، بگیم grid-template-rows.
و میخوام اندازههای سفارشی برای سه ردیف اول تعریف کنم.
مثلاً ردیف اول ۱۰۰ پیکسل ارتفاع داشته باشه.
ردیف دوم ۱۷۰ پیکسل و ردیف سوم ۶۰ پیکسل.
خب.
حالا به محض اینکه اینو ذخیره کنم و صفحه رو رفرش کنم، فقط نگاه کردن به این تنظیمات ممکنه خیلی گیجکننده باشه و شاید خیلی کمککننده نباشه.
اما ابزارهای توسعهدهندهی مرورگر واقعاً میتونن دید واضحی از اتفاقاتی که داره میافته بهمون بدن.
تا امروز، هم Firefox و هم Chrome پشتیبانی خیلی خوبی از نمایش Grid دارن، پس بیاید ببینیم.
اگه فقط کلیک راست کنید و گزینهی Inspect رو انتخاب کنید تا ابزارهای توسعهدهنده باز بشن…
خب، اینجاست.
و بعد اگه روی div والد Grid کلی کلیک کنم…
یعنی همون div به اسم photo-example، به این بیضی کوچیک که نوشته Grid دقت کنید.
اگه روی اون کلیک کنم، حالا دقیقاً بهمون نشون میده که Grid چطور کار میکنه، درسته؟
ما چهار ستون با عرض مساوی داریم و سه ردیف تعریف کردیم، درسته؟
۱۰۰ پیکسل، ۱۷۰ و ۶۰.
حالا همونطور که میبینیم، مرورگر هیچ مشکلی با قرار دادن خودکار محتوا در سلولهای موجود نداره.
فقط اونها رو به ترتیبی که در HTML هستن اضافه میکنه.
و بهطور پیشفرض، هر آیتم فقط یه مربع یکدریک رو اشغال میکنه.
ما قبلاً در مثال اول دیدیم که چطور میتونید به یه آیتم بگید که چند ستون یا ردیف رو اشغال کنه، درسته؟
پس مثلاً اگه بخوایم این جعبهی متن دو ستون رو بگیره…
خب، فقط کافیه div مربوط به متن overlay-text روی تصویر رو پیدا کنیم و بگیم grid-column و مقدارش رو برابر با span 2 قرار بدیم.
اگه صفحه رو رفرش کنیم و نمایش Grid رو دوباره فعال کنیم، میتونید اندازهی آیتم رو کنترل کنید.
اما جایگذاری آیتم چی؟
اگه بخوایم جعبهی متنمون این دو سلول خاص رو پر کنه چی؟
خب، بذارید نشونتون بدم چی کار میتونیم بکنیم.
بهجای grid-column: span 2، میتونیم بنویسیم grid-column: 3 / 5.
نگران نباشید.
میدونم که این خیلی واضح نیست.
الان توضیح میدم که چطور کار میکنه.
ولی اگه اینو تست کنم و صفحه رو رفرش کنم، و نمایش Grid رو دوباره فعال کنم…
عالیه.
بیاید توضیح بدیم چه اتفاقی افتاده.
برای grid-column، مقدار 3 / 5 رو استفاده کردیم.
یعنی چی؟
مقدار اول یعنی ۳ ممکنه براتون واضح باشه.
شاید فکر کنید، خب، یعنی میخوایم از ستون سوم شروع کنیم.
اما این اعداد در این زمینه به ستونها مربوط نیستن.
بلکه به خطوط مربوط هستن.
توی علامتگذاری های نمایش Grid مرورگر، میتونید ببینید که فقط چهار ستون داریم.
اما این خط اینجا به اسم خط شماره ۵ شناخته میشه.
پس روش کار اینه که میگید از کدوم خط شروع کنیم و بعد با یه اسلش بگید تا کدوم خط ادامه بدیم.
به عبارت دیگه، ستون پنجمی وجود نداره.
ما فقط چهار ستون داریم.
پس داریم میگیم برو تا خط پنجم.
شما همچنین میتونید از اعداد منفی برای اشاره به خطوط استفاده کنید.
پس بهجای ۱، ۲، ۳، ۴، ۵، میتونید از انتها به عقب بشمارید.
و آخرین خط بهصورت negative one یا همون -۱ شناخته میشه، بعدی -۲، -۳ و همینطور ادامه پیدا میکنه.
پس برای یه تمرین سریع، بیاید سعی کنیم جعبهی متن رو در ردیف وسط قرار بدیم و کاری کنیم که کل عرض رو بگیره.
اینجا کاری که میکنم برای grid-column اینه:
مقدار اول رو برابر با ۱ قرار میدم.
یعنی از خط اول شروع کن و تا آخرین خط ادامه بده.
پس میتونید بنویسید ۵ یا فقط بنویسید -۱.
و برای اینکه در ردیف دوم قرار بگیره، فقط میتونیم بنویسیم grid-row.
و اگه توی مرورگر نگاه کنیم…
میخوایم از خط شماره ۲ شروع کنیم و فقط یه سلول رو بگیریم، پس میتونید بنویسید:
۲ / ۳
یا میتونید بنویسید 2 span 1یا فقط بنویسید ۲ چون بهطور پیشفرض فقط یه سلول رو میگیره.
اگه اینو ذخیره کنیم و صفحه رو رفرش کنیم…
عالیه.
اگه بخوایم این ناحیهی متنی رو در ردیف پایینی قرار بدیم، خب، در حال حاضر در واقع داریم میگیم ۲/۳، درسته؟
چون بهطور پیشفرض فقط یه سلول رو اشغال میکنه.
اما اون خط پایینی به اسم خط شماره ۴ شناخته میشه.
پس میتونیم بگیم ۲/۴ و حالا این متن دو سلول عمودی رو اشغال میکنه.
یعنی از خط ۲ تا خط ۴.
خب.
در این نقطه، بیاید برگردیم به هدف اصلی این مثال، که همون نحوهی همپوشانی محتواست.
شاید فکر کنید، خب، این متن همین حالا هم یه مقدار روی تصویر افتاده.
اما واقعاً اینطور نیست.
این فقط به این دلیله که تصویر با عرض کاملش کمی ارتفاع بیشتری نسبت به اون ۱۰۰ پیکسلی که تنظیم کردیم اشغال کرده.
وقتی دربارهی همپوشانی صحبت میکنیم، منظورمون اینه که چطور میتونیم دو آیتم رو در Grid طوری قرار بدیم که یه سلول مشترک رو اشغال کنن.
پس اگه بخوایم جعبهی متن خاکستری از همون سلولی استفاده کنه که تصویر داخلشه چی؟
خب، بیاید سعی کنیم جعبهی متن رو بهصورت دستی در ردیف اول قرار بدیم، پس میتونیم بگیم grid-row.
فقط از خط اول شروع کن.
grid-row: 1 / 4
خب.
و این باعث میشه که جعبهی متن به اون نقطه منتقل بشه.
اما تصویر از جای خودش بیرون زده شد.
این به این دلیله که مرورگر خیلی خوب بلده آیتمها رو بهطور خودکار در Grid قرار بده.
اگه بخوایم همپوشانی ایجاد کنیم، باید خیلی دقیق عمل کنیم.
باید به هر دو عنصر بگیم که دقیقاً در کدوم ستون و کدوم ردیف قرار بگیرن.
در غیر این صورت، مرورگر خودش خلاقیت به خرج میده و آیتمها رو طوری قرار میده که همپوشانی ایجاد نشه.
پس مثلاً بیاید به تصویر بگیم که دقیقاً در همین سلول اول قرار بگیره.
برای این سلکتور، یعنی تصویر، اگه بگم grid-column: 1، حتی همین هم کافی نیست.
این فقط به تصویر میگه که از خط اول ستون شروع کن، اما باید ردیف رو هم مشخص کنیم.
پس به محض اینکه بگیم grid-row: 1 هم باید روی خط اول باشه…
الان در واقع محور X و Y رو برای هر دو عنصر مشخص کردیم.
حالا بالاخره همپوشانی اتفاق میافته.
البته این چیدمانی نیست که واقعاً بخوایم.
ما میخوایم تصویر کل فضای موجود رو بگیره و بعد شاید متن فقط یه مقدار در بالا یا پایین تصویر قرار بگیره.
پس حالا که یاد گرفتیم چطور آیتمها رو بهصورت دستی قرار بدیم، دیگه واقعاً نیازی به چهار ستون و سه ردیف نداریم.
پس کاری که من انجام میدم اینه:
روی عنصر والد، برای grid-template-columns، نیازی به چهار ستون نیست.
فقط یه ستون داشته باشیم.
و در واقع، اگه فقط یه ستون داشته باشیم، همون عرض خودکار یا پیش فرض معمولی رو داریم.
پس اصلاً نیازی به این ویژگی نیست.
و همچنین نیازی به ویژگی template-rows هم نداریم.
پس تنها چیزی که نیاز داریم، display: grid روی عنصر والد هست.
حالا تصویر همین حالا هم داره کاری که میخوایم رو انجام میده.
داریم میگیم از خط اول برای ستون و ردیف شروع کن.
بیاید همین کار رو برای متن هم انجام بدیم.
از خط شماره ۱ برای ستون شروع کن.
از خط شماره ۱ برای ردیف شروع کن.
یعنی بهعبارتی، هم تصویر و هم متن دارن از همون مختصات X و Y در Grid استفاده میکنن.
اگه اینو ذخیره کنیم و صفحه رو رفرش کنیم…
عالیه.
پس فقط یه ستون ضمنی و یه ردیف داریم و هر دو دارن همون فضا رو اشغال میکنن.
حالا اگه بخوایم متن روی تصویر در پایین قرار بگیره، میتونیم از یه ویژگی align استفاده کنیم.
پس روی عنصر متن، فقط مینویسم align-self و مقدارش رو برابر با end قرار میدم.
عالیه.
و این دقیقاً همون چیزی هست که میخوایم.
بهجای end، یه مقدار دیگه هم هست به اسم start.
که باعث میشه متن در بالای تصویر قرار بگیره.
و همونطور که احتمالاً حدس زدید، یه مقدار دیگه هم هست به اسم center.
حالا اگه مثل من باشید، گاهی سخته یادتون بیاد که باید از align-self استفاده کنید یا justify-self.
روشی که من یادم میمونه اینه که اگه به یه برنامهی واژهپرداز فکر کنید، اون بهتون اجازه میده انتخاب کنید که متن رو چطور تراز کنید: چپ، راست، وسط یا justify.
و justify همون گزینهایه که متن رو تا لبهی راست کش میده.
پس اینطوری یادم میمونه.
justify مربوط به جایگذاری افقیه، مثل چپ، راست یا وسط.
align مربوط به محور دیگهست، یعنی محور عمودی.
این فقط روشی هست که من یادم میمونه.
بههرحال، بذارید مقدارش رو دوباره روی end بذارم چون این همون ظاهریه که میخوام.
عالیه.
بیاید بریم سراغ مثال بعدی.
خب.
در این مثال، تمرکز ما روی این ناحیهست.
یه div بنفش داریم که نوشته “این هدر هست”، این بخش در واقع محتوای اصلیه.
یه div خاکستری داریم که نوشته “این ناحیهی سایدبار شامل لینکهای مفیده” و بعد یه ناحیهی فوتر در پایین داریم.
حالا فقط برای اینکه من و شما در یک صفحه باشیم، بذارید تب رو عوض کنم و بریم سراغ نسخهی نهایی، و این همون چیزی هست که میخوام این ناحیه شبیهش بشه، درسته؟
هدر کل فضا رو اشغال میکنه و بعد سایدبار این ناحیه رو میگیره.
محتوای اصلی رو داریم و بعد دقت کنید که فوتر کل عرض رو اشغال نمیکنه.
در عوض، فوتر فقط در پایین همین ستون اصلی قرار گرفته.
پس این همون چیدمان کلیه که میخوایم با استفاده از CSS Grid بسازیم.
فقط این بار، میخوام یه روش متفاوت برای قرار دادن آیتمها در Grid رو نشونتون بدم.
قبل از اینکه شروع کنیم، بیاید ساختار HTML رو ببینیم.
یه div کلی دارم با کلاس layout، داخلش یه div برای header، یه div برای main، یه div برای sidebar و یه div برای footer هست.
پس توی CSS، میخوام عنصر والد layout رو هدف قرار بدم.
پس یه سلکتور جدید مینویسم: layout { display: grid }
بیاید بگیم grid-template-columns.
این همون ویژگیایه که تا حالا استفاده کردیم.
بیاید دو ستون داشته باشیم.
پس 1 fr و بعد 2.5fr
درسته؟
اگه به نسخهی نهایی نگاه کنیم، این باعث میشه یه ستون داشته باشیم و بعد یه ستون اصلی خیلی پهنتر.
حالا اینجاست بخش جالب یا ویژگی جدید این مثال.
یه ویژگی داریم به اسم grid-template-areas.
قبل از اینکه حتی سمیکالن بذارم، در واقع میخوام خط جدید باز کنم تا مرتب بمونه، و یه رشتهی متنی مینویسم:
“header header”
نگران نباش، انتظار ندارم همین الان برات واضح باشه، ولی فکر میکنم تا حدود ۲۰ ثانیهی دیگه همهچیز کاملاً روشن میشه.
یه خط دیگه اضافه میکنم و مینویسم:
“sidebar main”
یه خط دیگه:
“sidebar footer”
و در نهایت با یه سمیکالن تمومش میکنم.
خب، ما یه Grid با دو ستون داریم، و grid-template-areas بهمون اجازه میده که فضا رو اسمگذاری کنیم و تقسیمبندی کنیم.
هر خط متنی اینجا نمایندهی یه ردیفه، و چون Grid دو ستونه داریم، داریم میگیم که هدر باید هر دو ستون رو اشغال کنه.
بریم سراغ ردیف بعدی.
اونجا باید سایدبار در سمت چپ باشه و main در سمت راست.
و برای ردیف آخر، باید سایدبار در سمت چپ باشه و فوتر در سمت راست.
پس این یه روش متفاوت برای قرار دادن آیتمها و اندازهدهی بهشونه، درسته؟
ما فقط نمیگیم که هدر باید اول باشه، بلکه داریم میگیم باید دو ستون رو اشغال کنه.
و همچنین داریم میگیم که سایدبار باید دو ردیف رو اشغال کنه، یعنی بهصورت عمودی.
حالا فقط باید عناصر واقعیمون رو به این اسمهایی که ساختیم اختصاص بدیم.
برای سلکتور هدر، فقط مینویسیم:
grid-area: header
حالا برای شفافسازی، میتونی هر اسمی که خواستی اینجا بذاری.
لازم نیست با اسم کلاس یا سلکتورت یکی باشه.
مثلاً میتونم اسمش رو بذارم header-area و بعد توی ویژگی grid-area مقدارش رو بذارم header-area.
درسته؟
یا برای روشنتر شدن، بهجای sidebar، میتونم اسمش رو فقط بذارم حرف S.
حالا بیاید اختصاصش بدیم.
توی سلکتور sidebar فقط مینویسیم:
grid-area: s
بیاید main و footer رو هم تنظیم کنیم.
برای main مینویسیم:
grid-area: main
برای footer مینویسیم:
grid-area: footer
اگه اینو تست کنیم و صفحه رو رفرش کنیم—اوه، برگردیم به تب مربوط به این پروژه—عالیه.
همین تنظیمات ساده بهمون اون چیدمانی رو داد که میخواستیم.
حالا یه نکتهی سریع:
اگه سایدبار محتوای بیشتری داشته باشه و از نظر ارتفاع از بخش main بلندتر باشه چی؟
خیلی سریع HTML رو ویرایش میکنم تا این اتفاق بیفته.
مثلاً حالا که سایدبار فضای عمودی بیشتری نسبت به main اشغال کرده، طبیعتاً نمیخوایم فوتر بهصورت خودکار کش بیاد و فضای باقیمونده رو بگیره.
پس تنها کاری که باید برای فوتر انجام بدیم اینه که بنویسیم:
align-self: end
درسته؟ فقط اون رو به پایین تراز کن یا بهنوعی بچسبونش به پایین.
عالیه.
حالا اگه بریم و نگاهی به اون template area بندازیم که تنظیم کردیم، خیلی پیچیده نیست چون فقط دو ستون داریم.
ولی تشویقت میکنم که با این ویژگی آزمایش کنی و سعی کنی چیدمانهای پیچیدهتری بسازی.
شخصاً، من ترجیح میدم آیتمهای Grid رو همونطور که در مثال قبلی انجام دادیم قرار بدم و اندازهگذاری کنم، یعنی با مشخص کردن شمارهی خطوط برای هر عنصر.
ولی به نظر میرسه خیلیها واقعاً این روش رو ترجیح میدن.
فکر میکنم برای خیلیها این روش حس شهودیتری داره یا فقط راحتتر قابل تصور هست.
پس این چیزی بود که میخواستم باهاش آشنات کنم.
خب.
این مثال بعدی، بدون شک مورد علاقهی منه در کل این ویدیو.
وقتی برای اولین بار فهمیدم Grid میتونه همچین کاری بکنه، واقعاً تحت تأثیر قرار گرفتم.
پس این پایین کلی div سبز داریم.
هیچ margin یا gap بینشون نیست، ولی هر پاراگراف داخل یه div جداگانه قرار گرفته.
و تصور کن روی یه مانیتور دسکتاپ خیلی بزرگ، شاید بتونیم پنجتا از اینها رو در هر ردیف جا بدیم.
و روی یه مانیتور کوچیکتر، شاید فقط چهار تا در هر ردیف.
و روی یه تبلت باریک، فقط سه تا در هر ردیف.
و شاید روی یه گوشی هوشمند فقط یکی در هر ردیف.
بهطور سنتی، برای ساختن یه چیدمان واکنشگرا مثل این، باید breakpointهای media query بنویسیم.
ولی با CSS Grid، دیگه نیازی به این کار نیست.
پس بیاید ببینیم.
این هنوز هم بهنظر من بهترین ویژگی CSS Grid هست.
اینجا سلکتور عنصر والد کلی رو داریم، پس فقط مینویسم:
display: grid
و بعد:
grid-template-columns
و جادوی اصلی اینجاست—یه تابع به اسم repeat.
داخل repeat، دو آرگومان میدیم.
اولی اینه که چند بار میخوایم یه مقدار رو تکرار کنیم.
مثلاً فرض کنیم میخوایم چهار ستون داشته باشیم، پس میخوایم یه مقدار رو چهار بار تکرار کنیم.
و اون مقداری که میخوایم چهار بار تکرار کنیم چیه؟
خب، شاید ۳۰۰ پیکسل یا فقط one fr.
این مقدار عرض هر ستون هست.
این تعداد دفعاتیه که میخوایم اون مقدار رو تکرار کنیم.
پس همین بهتنهایی بهمون چهار ستون میده.
ولی اینجاست که جادویی میشه.
بهجای اینکه این مقدار رو بهصورت ثابت روی عدد ۴ تنظیم کنیم، میتونیم بنویسیم:
auto-fit
و حالا ببین چی میشه.
بهجای اینکه مقدار عرض رو بهصورت ثابت one fr بنویسیم، میتونیم از تابعی به اسم minmax استفاده کنیم.
یادت باشه، این تابع دو مقدار میگیره.
بیاید بگیم که کمترین عرضی که هر آیتم باید داشته باشه، فارغ از اندازهی صفحه، مثلاً ۱۸۰ پیکسل باشه.
بهعبارت دیگه، اگه صفحه شروع کنه به کوچیک شدن و دیگه نتونی یه آیتم دیگه رو راحت در همون ردیف جا بدی، تا جایی که مجبور بشه عرضش کمتر از این مقدار بشه، اونوقت فقط یه ردیف جدید بساز.
درسته؟
حتماً Bahram عزیز! اینم ترجمهی کامل، دقیق و با لحن دوستانه برای اسکریپت ویدیویی آموزشی 🎬👇
دیگه نمیخوایم اینهمه آیتم در هر ردیف داشته باشیم.
حالا آرگومان دوم تابع repeat مقدار حداکثره.
من فقط یه مقدار one fr براش در نظر میگیرم تا در هر اندازهی ممکن برای صفحه، انعطافپذیر باقی بمونه، چون نمیخوام یه اندازهی حداکثر خاص تعیین کنم.
و در نهایت فقط مینویسم:
gap: 20px
اگه اینو تست کنیم، عالیه.
الان پنجتا آیتم در هر ردیف جا میشن.
ولی اگه مرورگرم رو کمکم شروع کنم به تغییر اندازه…
میتونید ببینید، درست زمانی که اندازهی هر آیتم کمتر از اون ۱۸۰ پیکسل بشه، مرورگر خودش متوجه میشه که فقط میتونه چهار تا آیتم در هر ردیف جا بده، و همین روند دوباره تکرار میشه.
پس وقتی متوجه بشه که فقط سهتا آیتم در هر ردیف جا میشن، خودش بهطور خودکار این کار رو انجام میده.
و این، بهنظر من، قدرت واقعی CSS Grid هست.
ما داریم اجازه میدیم مرورگر خودش همهی محاسبات رو انجام بده.
و وقتی مرورگر مسئول انجام محاسبات باشه، میتونه کلی کارهای جادویی خودکار مثل همین رو انجام بده.
عالیه.
پس در نگاه کلی، با فقط یه خط کد، نیاز به breakpointهای media query رو حذف کردیم.
البته این به این معنی نیست که دیگه هیچوقت از media query در CSS Grid استفاده نمیکنید، فقط اینه که همیشه لازم نیست سراغش برید.
خیلی وقتها یه چیزی مثل همین روش، کار رو راه میندازه.
خیلی سریع، فقط برای اینکه یه مثال از زمانی که من از media query استفاده میکنم داشته باشیم…
خب، مثلاً همین چیدمان دو ستونهای که بالاتر تنظیم کردیم، یادتونه؟ همون که شامل header، sidebar و main بود.
واضحه که این چیدمان روی یه صفحهی کوچیک مثل این، ظاهر خوبی نداره، پس کاری که من انجام میدم اینه:
یادتونه سلکتور layout رو؟
خب، فقط یه media query تنظیم میکنم برای صفحههایی که فقط یه اندازهی خاص و بزرگتر دارن، و بعد میتونید کل اون قانون یا حداقل فقط ویژگیهایی که مربوط به CSS Grid هستن رو منتقل کنید داخل اون media query.
و حالا برای صفحههای کوچیک، همهچیز میتونه فقط فضای طبیعی خودش رو اشغال کنه.
ولی بهمحض اینکه اندازهی پنجرهی مرورگر بهاندازهی کافی بزرگ بشه، خب، اونوقت از Grid ما استفاده میکنه.
پس media queryها هنوز هم خیلی مفید و کاربردی هستن.
در بعضی موقعیتها واقعاً بهشون نیاز دارید.
ولی همونطور که در این مثال دیدیم، با استفاده از repeat، auto-fit و minmax، میتونید واقعاً چیدمانهایی بسیار انعطافپذیر و واکنشگرا بسازید.