في هذا الدرس 2تصفّح المواضيع
CSS Grid items
عناصر grid في لغة CSS
CSS Grid items عناصر grid في لغة CSS
يتم تحويل أي عنصر داخل حاوية grid عن طريق إضافة عناصر HTML داخل العنصر الزي يتم إستخدام خاصية display:grid معه وثم نستخدم ايضاً مع الحاوية خاصية grid-template-columns لتطبق نظام الأعمدة علي العناصر الداخلية gtid items عناصر لحاوية grid في لغة CSS.
خطوات إنشاء عناصر grid في لغة CSS:
- قم بإنشاء عنصر في صفحة HTML وليكن div.
- قم بإضافة خاصية display:grid أو خاصية display:inline-grid.
- قم بإضافة بعض العناصر داخل حاوية grid.
- قم بإضافة خاصية grid-template-columns والقيمة هي auto auto auto بعدد الأعمدة.
CSS grid items columns one row
عناصر grid في لغة CSS علي هئية أعمدة داخل صف واحد فقط.
.grid-container
{
display: grid;
grid-template-columns: auto auto auto auto auto auto;
background-color: #2196F3;
padding: 10px;
}
CSS grid items row
عناصر حاوية grid علي هيئة صفوف في لغة CSS
CSS grid items row عناصر حاوية grid علي هيئة صفوف في لغة CSS
إذا كانت القيم بداخل خاصية grid-template-columns أقل من عدد العناصر سوف يتم عرض عناصر حاوية grid علي هيئة صفوف في لغة CSS.
CSS grid items columns two rows
عناصر grid في لغة CSS علي هئية أعمدة داخل صفين.
.grid-container
{
display: grid;
grid-template-columns: auto auto auto;
background-color: #2196F3;
padding: 10px;
}سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات14
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Grid شبكي
- للمراجعة
- 02 Item عنصر
- للمراجعة
- 03 Container حاوية المحتوي
- للمراجعة
- 04 Column عامود
- للمراجعة
- 05 Example مثال
- للمراجعة
- 06 Result نتيجة
- للمراجعة
- 07 Row صف
- للمراجعة
- 08 Property خاصية
- للمراجعة
- 09 Area منطقة
- للمراجعة
- 10 Naming تسمية
- للمراجعة
- 11 Order ترتيب
- للمراجعة
- 12 Layout تخطيط
- للمراجعة
- 13 Small صغير
- للمراجعة
- 14 Devices أجهزة
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات1
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.
لمحة عن التحدي3 أسئلة تنتظرك ＋
تستخدم الخاصية grid-row في تحديد العمود الذي سوف يتم إضافة العنصر خلاله ؟
تستخدم الخاصية ............. في تحديد الصف الذي سوف يتم إضافة العنصر خلاله
____