في هذا الدرس 5تصفّح المواضيع
صفحات الويب في نظام grid-view تكون علي هيئة صفوف كل صف يتكون من أعمدة يمكن أن تكون صفحة الويب بالكامل عبارة عن صف واحد وبه مجموعة صفوف ويمكن أن تكون صفحة الويب مكونه من مجموعة صفوف كل صف مكون من مجموعة أعمدة.
عن طريق نظام grid-view يكون الأمر سهلاً جداً لعمل صفحات ويب متجاوبة ويمكن عن طريق لغة CSS علي حسب viewport نظهر بعض الأعمدة والبعض الأخر يتمدد إلي صفوف أخري عندما لا يكون للعناصر مساحه داخل viewport.
- في نظام grid-view يتم تقسيم 100% من إجمالي عرض الصفحة علي 12 عمود لكل صف فيكون عرض العنصر 100 / 12 = 8.33%.
- يمكن أن يكون الصف مكون من عدد 2 عمود كل عمود فقط وعبارة عن 50% عرض كل عنصر من إجمالي عرض viewport.
CSS responsive grid view system
إضافة view port للصفحة عن طريق عنصر meta tag في منطقة head داخل صفحة HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloseTag</title>
</head>
<body>
</body>
</html>CSS Add box-sizing
إضافة خاصية box-sizing مع القيمة border-box لجميع العناصر في الصفحة لكي تشمل جميع أحجام العناصر padding + border.
نبدأ في تجهيز صفحة حاوية كبيرة يطبق عليها display:grid بلغة CSS داخل صفحة الويب التي قمنا بتجهيزها.
CSS responsive grid container
إنشاء حاوية grid مع بعض الخصائص في CSS.
.grid-container
{
height: 320px;
display:grid;
width:100%;
background-color: #2196F3;
padding: 10px;
}نبدأ في تجهيز صفحة صف ويكون له border فقط ويكون بوضعة الطبيعي display:block وليس له خصائص أخري مع إضافة div بكلاس row في HTML.
CSS responsive grid row
إنشاء صف بداخل حاوية grid مع بعض الخصائص في CSS.
نقوم بتجهيز كلاسات مسبقة بأسماء col-x و اكس ترمز من 1-12 ويتم تقسيم 100% علي عدد 12 بحيث col-1 يكون 8.33 و col-12 يكون 100% و col-6 يكون 50% وهكذا.
CSS responsive grid columns
تجهيز مجموعة كلاسات لكي يتم إضافتهم داخل صف بداخل حاوية grid مع بعض الخصائص في CSS.
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}CSS responsive grid two columns
تقسم الصفحة col-3 مع col-9 ويكون اجمالي العمودين 25% + 75% = 100%.
CSS responsive grid two columns half
تقسم الصفحة col-6 مع col-6 ويكون اجمالي العمودين 50% + 50% = 100%.
CSS responsive grid three columns
تقسم الصفحة col-4 مع col-4 مع col-4 ويكون اجمالي الثلاث أعمدة 33% + 33% + 33% = 100%.
CSS responsive grid four columns
تقسم الصفحة col-3 مع col-3 مع col-3 مع col-3 ويكون اجمالي الأربع أعمدة 25% + 25% + 25% + 25%= 100%.
سجّل الدخول لحفظ تقدمك
تابع إنجاز المواضيع والمصطلحات والمهام، وكمّل من آخر خطوة على أي جهاز.
المصطلحات9
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 Grid شبكي
- للمراجعة
- 02 View عرض / رؤية
- للمراجعة
- 03 Result نتيجة
- للمراجعة
- 04 Responsive متجاوب
- للمراجعة
- 05 Box صندوق
- للمراجعة
- 06 Sizing تحجيم
- للمراجعة
- 07 Border حد
- للمراجعة
- 08 Class فئة
- للمراجعة
- 09 Example مثال
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
الاختصارات1
راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.
- 01 CSS CSS
- Cascading Style Sheets
- صفحات الأنماط الانسيابية
- للمراجعة
لا توجد بطاقات تطابق البحث والتصفية.
اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.
اختبر فهمك.
ووصلها للإتقان.
كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.
أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.
الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.