انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 110
دورة لغة CSS

Grid View مع الصفحات المتجاوبة في لغة CSSCSS Responsive Grid View

سوف تتعلم في هذا الدرس نظام grid view مع وعلاقتة بصفحات الويب المتجاوبة ولماذا هو يعد من أفضل الأنظمة لعمل صفحات متجاوبة في لغة CSS.

ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
5
الأمثلة
5
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
3,543
محتوى الدرس
في هذا الدرس 5تصفّح المواضيع

CSS Responsive Grid View Grid View مع الصفحات المتجاوبة في لغة CSS

صفحات الويب في نظام grid-view تكون علي هيئة صفوف كل صف يتكون من  أعمدة يمكن أن تكون صفحة الويب بالكامل عبارة عن صف واحد وبه مجموعة صفوف ويمكن أن تكون صفحة الويب مكونه من مجموعة صفوف كل صف مكون من مجموعة أعمدة.


عن طريق نظام grid-view يكون الأمر سهلاً جداً لعمل صفحات ويب متجاوبة ويمكن عن طريق لغة CSS علي حسب viewport نظهر بعض الأعمدة والبعض الأخر يتمدد إلي صفوف أخري عندما لا يكون للعناصر مساحه داخل viewport.


  • في نظام grid-view  يتم تقسيم 100% من إجمالي عرض الصفحة علي 12 عمود لكل صف فيكون عرض العنصر 100 / 12 = 8.33%.
  • يمكن أن يكون الصف مكون من عدد 2 عمود كل عمود فقط وعبارة عن 50% عرض كل عنصر من إجمالي عرض viewport.

CSS responsive grid view system نظام grid والصفحات المتجاوبة في لغة CSS

نبدأ في تجهيز صفحة ويب مبنية بنظام grid تتكون من حاوية كبيرة هذة الحاوية تتكون من صفوف كل صف يتكون من 12 عمود في لغة CSS.

CSS responsive grid view system

إضافة view port للصفحة عن طريق عنصر meta tag في منطقة head داخل صفحة HTML.

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.

HTML 
*
{
    box-sizing: border-box;
}
جرّب بنفسك

CSS responsive grid container حاوية grid مع الصفحات المتجاوبة في لغة CSS

نبدأ في تجهيز صفحة حاوية كبيرة يطبق عليها display:grid بلغة CSS داخل صفحة الويب التي قمنا بتجهيزها.

CSS responsive grid container

إنشاء حاوية grid مع بعض الخصائص في CSS.

HTML 
.grid-container
{
  height: 320px;
  display:grid;
  width:100%;
  background-color: #2196F3;
  padding: 10px;
}
جرّب بنفسك

CSS responsive grid row صف حاوية grid مع الصفحات المتجاوبة في لغة CSS

نبدأ في تجهيز صفحة صف ويكون له border فقط ويكون بوضعة الطبيعي display:block وليس له خصائص أخري  مع إضافة div بكلاس row في HTML.

CSS responsive grid row

إنشاء صف بداخل حاوية grid مع بعض الخصائص في CSS.

HTML 
.row
{
  border:white solid 1px;
}
جرّب بنفسك

CSS responsive grid columns أعمدة grid مع الصفحات المتجاوبة في لغة CSS

نقوم بتجهيز كلاسات مسبقة بأسماء col-x و اكس ترمز من 1-12 ويتم تقسيم 100% علي عدد 12 بحيث col-1 يكون 8.33 و col-12 يكون 100% و col-6 يكون 50% وهكذا.

CSS responsive grid columns

تجهيز مجموعة كلاسات لكي يتم إضافتهم داخل صف بداخل حاوية grid مع بعض الخصائص في CSS.

HTML 
.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

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 9 مفهومةأول بطاقة، أول خطوة
01 Grid شبكي
للمراجعة
02 View عرض / رؤية
للمراجعة
03 Result نتيجة
للمراجعة
04 Responsive متجاوب
للمراجعة
05 Box صندوق
للمراجعة
06 Sizing تحجيم
للمراجعة
07 Border حد
للمراجعة
08 Class فئة
للمراجعة
09 Example مثال
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات1

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 1 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

2أسئلة 1أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي2 أسئلة تنتظرك
01

العديد من صفحات الويب تعتمد علي ال grid-view وهذا يعني ان الصحفة تكون مقسمة الي عدة صفوف وباستخدامه يمكنك انشاء صفحة ويب متجاوبة مع احجام مختلفة ؟

02

تمكنك ال Grid-View من انشاء مواقع ويب responsive متجاوبة مع جميع الشاشات ؟