في هذا الدرس 2تصفّح المواضيع
يتم تحويل أي عنصر في صفحة الويب مثل div من وضعة الأفتراضي وهو display:block إلي نظام grid عن طريق تغيير قيمة خاصية display إلي display:grid.
خطوات إنشاء حاوية grid في لغة CSS:
- قم بإنشاء عنصر في صفحة HTML وليكن div.
- قم بإضافة خاصية display:grid.
طريقة عرض جميع عناصر حاوية grid علي هيئة عمود واحد بملئ الشاشة.
CSS grid container
حاوية grid في لغة CSS عن طريق خاصية display والقيمة grid.
.grid-container
{
display: grid;
background-color: #2196F3;
padding: 10px;
min-height:300px;
}يتم تحويل أي عنصر في صفحة الويب مثل div من وضعة الأفتراضي وهو display:block إلي نظام grid من النوع Inline عن طريق تغيير قيمة خاصية display إلي display:inline-grid.
خطوات إنشاء حاوية inline-grid في لغة CSS:
- قم بإنشاء عنصر في صفحة HTML وليكن div.
- قم بإضافة خاصية display:inline-grid.
طريقة عرض جميع عناصر حاوية inline-grid علي هيئة عمود واحد علي قدر المحتوي الداخلي للعناصر.
CSS inline grid container
حاوية grid في لغة CSS عن طريق خاصية display والقيمة inline-grid.
.grid-container
{
display:inline-grid;
background-color: #2196F3;
min-height:300px;
width:100%
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات18
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Container حاوية المحتوي
- للمراجعة
- 02 Grid شبكي
- للمراجعة
- 03 Layout تخطيط
- للمراجعة
- 04 Result نتيجة
- للمراجعة
- 05 Template نموذج
- للمراجعة
- 06 Columns أعمدة
- للمراجعة
- 07 Example مثال
- للمراجعة
- 08 Rows صفوف
- للمراجعة
- 09 Align محاذاة
- للمراجعة
- 10 Content محتوي
- للمراجعة
- 11 Start بداية
- للمراجعة
- 12 End النهاية
- للمراجعة
- 13 Center في المنتصف
- للمراجعة
- 14 Space مسافة / تباعد
- للمراجعة
- 15 Evenly بالتساوي
- للمراجعة
- 16 Arount حول
- للمراجعة
- 17 Between بين
- للمراجعة
- 18 justify تبرير
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات1
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي4 أسئلة تنتظرك ＋
تحدد خاصية "grid-template -columns" .................. في الشبكة
تستخدم الخاصية grid-template-rows في تحديد ارتفاع الاعمدة ؟
تستخدم الخاصية ............ في ترتيب العناصر بداخل ال container
____