Learn CSS In Arabic 2021 - #63 - Grid - Min, Max And Auto Fill

Grid - Min, Max And Auto Fill

Code & Notice:

Assignments:

=============================

Support Me on Patreon to Help me Create More Videos

I will be Very Happy if you Support my Channel.

Join Our Facebook Group:

Follow My Facebook Profile:

Like Facebook Page:

Follow Me On Twitter:

[tradinglibrarystation]

بتخيل مدى التعب اللي إنت شفته يا أسامة عشان تلاقي المعلومات دي والله وأقول الحمد لله إن ربنا خلقك في الدنيا دي عشان ترحم الناس

[ahmedm]

النقاط التي ناقشها الفيديو:
قيمة ال auto-fill. و: 2:20
قيمة ال minmax. و: 4:43

[n_ammiii]

grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

auto-fill = عدد الاعمدة
العدد يكون حسب الشاشة، إذا كانت هناك مساحة كافية لثلاثة أعمدة فيحط ثلاثة إذا كانت المساحة كافية لعشرة فهيحط عشرة.
minmax() = العرض يبدأ منين وينتهي فين
minmax(200px, 1fr) = يعني يبدأ من 200 ولو في مساحة فارغة يملاها عادي

[ahmedsuliman]

جميل جدا استخدام الخاصيه دى مريح جدا مع justify-content لما يكون فى عناصر كتير محتاجه تترتب فى الـ container مهما كان شكلها
اظن الكورس ده فى طريقه لـ 100 حلقه لكن فعلا الواحد مستمتع جدا

[Hidaya]

auto-fit:

grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
These keywords tell the browser to handle the column sizing and element wrapping for us so that the elements will wrap into rows when the width is not large enough to fit them in without any overflow. The fraction unit we used also ensures that in case the width allows for a fraction of a column to fit but not a full column, that space will instead be distributed over the column or columns that already fit, making sure we aren’t left with any empty space at the end of the row.

[alsayedali]

الحمد لله الذي علمنا ما لم نكن نعلم ... جزاكم الله خيرا وبارك الله فيكم يا عم أسامة

[somah]

انا من كتر ما بحاول اشوف كل الاعلانات مخصوص علشان القناة بتاعتك قربت احفظ الاعلانات مع الخصائص هههههههههههههههههههه

[superman.k]

فيك الخير علي كل اللي بتعمله والله ربنا يكرمك دنيا واخرة, انت بتدي معلومات وخلاصة وعصارة اللي اتعلمته ووقعت فيها من سنين عالجاهز, الواحد دماغه بتلف شوية ف الاول لانه بياخد المعلومات لوكشة واحدة بس بعدين بيتعود وبيحس انه برنس اوي

[leithahmad-qrcf]

الحمدلله حليت التحدي بكل أريحث وبدون مشاكل وطلعا كل هالشي بفضل حضرتك الله يبارك فيك ويحفظك يارب🤍

[gamerr]

والله العظيم انت افضل واقنع واروع شخص معلم في الحياة

[ClubMedia]

رائع رائع. شكراً نرجو منك شروحات أيضاً في المستقبل إن شاء الله

[Pro-sjkh]

السلام عليكم
سؤال لو سمحت . لما اجي استخدم ال auto-fill مع ال grid-template-area ازاي اعرف احدد ال areas بتاعه كل element ادام عدد ال column هيكون بيتغير علي حسب الwidth

[abdallahazme]

Should we live in our life like auto or fr? In other words should we be shy or greedy?

[mohamedaminedammak]

السلام عليكم هل بعد اتقان الgrid هل لازلنا في حاجة الى flex و float? و الله يجازيك خير على المجهود

[abdullah.halabi]

السلام عليكم كيف ممكن نضع الtext في المنتصف بخاصية ال grid من دون استخدام class لل div

[alaa.orabi]

على حسب مادورت و فهمت اخدت بالى اننا نقدر نقول على ال auto-fill انه shy وعلى الauto-fit انه greedy ..

[ahmedibraheem]

نفسي اعرف ال file اللي مفتوح في atom editor اللي اسمو tedx اللي في الtaskbar من تحت ده بتعمل ف ايه يازيرووو 😂😂

[abdosoliman]

ليه عندى ال width بتاع ال div اقل من ال width بتاع الصفحة بحوالي 17px
بالرغم انى عامل reset لل margin