CSS Responsive Grid View
Grid View مع الصفحات المتجاوبة في لغة CSS
سوف تتعلم في هذا الدرس نظام grid view مع وعلاقتة بصفحات الويب المتجاوبة ولماذا هو يعد من أفضل الأنظمة لعمل صفحات متجاوبة في لغة CSS.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
CSS Responsive Grid View
Grid View مع الصفحات المتجاوبة في لغة CSS
</>
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.
resize
</>
CSS responsive grid view system
نظام grid والصفحات المتجاوبة في لغة CSS
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.
*
{
box-sizing: border-box;
}
</>
CSS responsive grid container
حاوية grid مع الصفحات المتجاوبة في لغة CSS
نبدأ في تجهيز صفحة حاوية كبيرة يطبق عليها display:grid بلغة CSS داخل صفحة الويب التي قمنا بتجهيزها.
CSS responsive grid container
إنشاء حاوية grid مع بعض الخصائص في CSS.
.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.
.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.
.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%.
شبكي
عرض / رؤية
نتيجة
متجاوب
صندوق
تحجيم
حد
فئة
مثال
Cascading Style Sheets
صفحات الأنماط الانسيابية
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
