CSS

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

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

التاريخ

05 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

1264

المواضيع

24
الشروحات chevron_left CSS Responsive Grid View chevron_left CSS
CSS Flex Box keyboard_arrow_down

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
resize the browser window قم بتصغير وتكبير نافذة المتصفح لتشاهد الصفوف والأعمدة لا تطفح خارج حدود viewport الأعمدة تتمددد مع الحجم الكبير وتنكمش مع الحجم الصغير.

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

نبدأ في تجهيز صفحة ويب مبنية بنظام grid تتكون من حاوية كبيرة هذة الحاوية تتكون من صفوف كل صف يتكون من 12 عمود في لغة 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%.

مصطلحات الدرس
Grid
Grid

شبكي

View
View

عرض / رؤية

Result
Result

نتيجة

Responsive
Responsive

متجاوب

Box
Box

صندوق

Sizing
Sizing

تحجيم

Class
Class

فئة

Example
Example

مثال

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات