Grid Layout في CSS وتصميـم صفحات الويب

Grid Layout في CSS و تصميـم صفحات الويب

ماهو التخطيط الشبكي Grid Layout..؟! ما دوره في تصميم صفحات الويب...؟!!. وكيف يتم بناء تصميم بتقنية الـ Grid Layout للصفحات الويب ..؟!! وماهي خصائص الـ CSS المستخدمة في بناء الـ Grid Layout ..؟!ّ

تصميم صفحات الويب هو مجال يتطور باستمرار، ومع التقدم التكنولوجي يتم تطوير أدوات وتقنيات جديدة لتحسين تجربة المستخدم وتسهيل عملية تصميم وتنسيق الصفحات . نتكلم في هذا المقال عن واحدة من هذه التقنيات الحديثة هي "Grid Layout". حيث تعتبر Grid Layout أحدث تقنيات تصميم الويب وتم اعتمادها بشكل كبير من قبل معظم المتصفحات الحديثة. وبالتالي، يمكن استخدامها على نطاق واسع في تصميم صفحات الويب ، لنبدأ...

في هذا المقال نتحدث عن:

عن Grid Layout.
الـ Grid Layout وتصميم صفحات الويب.
تصمـيم الـ Grid Layout.
الـ CSS وتصميم Grid Layout.

عن Grid Layout

الـ Grid Layout من أحدث الأساليب المستخدمة في تصميم صفحات الويب وتسمح للمصممين بتحديد تخطيط الصفحة باستخدام شبكة من الصفوف والأعمدة. تقوم هذه الشبكة بتحديد موقع العناصر على الصفحة وتحديد حجمها وترتيبها، وهذا يسمح للمصممين بتحقيق تصميمات دقيقة ومتناسقة.

تحتوي Grid Layout على عدة مفاهيم رئيسية، منها "الصفوف Rows" و "الأعمدة Columns" و "العناصر Items". يتم استخدام الصفوف والأعمدة لإنشاء شبكة من الخلايا التي يمكن وضع العناصر فيها. يتم تحديد حجم الصفوف والأعمدة باستخدام "الوحدات"، وهي وحدة قياسية تستخدم لتحديد حجم العناصر والمسافات بين العناصر.

تقدم Grid Layout ميزات عديدة من بينها:

تحديد تخطيط الصفحة بشكل دقيق ومرن عبر إنشاء شبكة مكونة من الصفوف والأعمدة.
إمكانية تحديد العرض والارتفاع لكل عنصر وتحديد موقعه في الشبكة.
إمكانية تحديد العناصر الفرعية وتحديد ترتيبها بسهولة.
توفير التحكم الكامل في تنسيق العناصر وعرضها وارتفاعها.
إمكانية إنشاء تصميمات متناسقة ومرتبة ومنظمة.

يمكن استخدام Grid Layout لإنشاء تصميمات متنوعة ومبتكرة، بدء من تصميم صفحات الويب الأساسية وحتى تصميم صفحات الويب المتطورة. وعلى الرغم من أنها تحتاج إلى بعض الخبرة في التصميم، إلا أن تعلم Grid Layout يستحق الجهد والوقت المبذولين فيه.

الـ Grid Layout وتصميم صفحات الويب

في تصميم صفحة الويب يتم تقسيم صفحة الويب إلى أقسام مثل رأس الصفحة Header، وتذييل الصفحة Footer، والمحتوى الرئيسي Main content ، وأقسام أخرى بحسب مايتطلب تصميم الصفحة كما هو واضح في المثال في الشكل أدناه . وبعد عملية التقسيم يتم ترتيب عناصر الـ HTML الخاصة بهذا القسم. (اقرأ اكثر عن عناصر الـ HTML المستخدمة في تقسيم الصفحة في مقال عناصر تقسيم صفحة الويب)

هنالك طرق عدة للعمل هذا التقسيم وتعتبر Grid layout من الطرق المفضلة والأكثر شهرة في الاستخدام لتصميم صفحات الويب والــ CSS Grid Layout Module هو نظام تخطيط قائم على الشبكة Grid مع صفوف Rows وأعمدة Columns مما يسهل تصميم صفحات الويب وترتيب ظهور العناصر أيضاً يعمل نظام التخطيط الشبكي على أي قسم من أقسام الصفحة .

تصمـيم الـ Grid Layout

الـ Grid يعني شبكة من العناصر هذه العناصر توجد بداخل حاوية Container و الـ Container هو عنصر من عناصر الـ HTML يتم تعينه كحاوية، وعند تعيين العنصر كحاوية وهو ما سنشير له هنا بـ grid-container فهذا يعني أنه يحتوي على عدد من العناصر التي يمثل كلاً منها قسم من grid و سنشير لهذه الاقسام بـ grid-items إذن يمكن القول:

Grid Container عنصر من عناصر الـ HTML ويمثل الـ container وغالباً مايكون <div> .
Grid Items جميع العناصر الفرعية للحاوية تصبح بشكل تلقائي عناصر شبكة grid item ويمثل ايضاً بـ <div>.
Grid Columns عناصر الشبكة grid items المرتبة رأسياً تسمى .Columns
Grid Rows عناصر الشبكة grid items المرتبة أفقياً تسمى .Rows

ويوضح الشكل التالي طريقة تصميم الـ Grid:

الفجوات أو المسافات Grid Gaps

في عملية التصميم يتم مراعاة الفجوات او المسافات بين صفوف واعمدة الـ grid بالـ grid gap والتي تتضح معنا في الشكل التالي :

Grid Gaps الفجوات أو المسافات - Grid Layout grid-gabs

خطوط الشبكة Grid Lines

لتسهيل عملية تصميم الـ Grid نستخدم ما يُعرف بـ Grid Lines وهي بأرقام تشير إلى موقع وحجم العنصر grid item في الحاوية grid container حيث تسمى الخطوط بين الاعمدة column lines و الخطوط التي تفصل بين الصفوف row lines كما يتضح في الشكل التالي :

الـ CSS وتصميم Grid Layout

توفر الـ CSS عدد من الخصائص لإنشاء شبكة الـ Grid وهذه الخصائص مدعومة في جميع المتصفحات الحديثة. مثل Google Chrome, Microsoft Edge, Firefox Safari, Opera, و فيما يلي سنتعرف على هذه الخصائص مع أمثلة تطبيقية على طريقة عملها، وهذه الخصائص هي :

خاصية العرض Display Property.
خاصية الفجوة Gap Property.
خصائص الشبكة Grid Properties.

خاصية العرض Display Property

في تصميم الـ Grid Layout تعمل الخاصية Display Property مع الخاصية grid لضبط عنصر الـ HTML ليكون حاوية Container وهذا يعني أن يكون هذا العنصر حاوية تحتوي ويشمل عدد من العناصر التي تشكل شبكة grid. ويصبح عنصر HTML حاوية (container) عندما يتم تعيين خاصة العرض Display Property له بإحدى القيمتين gird او inline-grid. لاحظ/ي الأمثلة التالية:

مع القيمة grid تكون النتيجة شبكة من العناصر ثابتة الأبعاد

.grid-container {
  display:grid;
  padding: 15px;
  background-color: #052b0a;
}

لتكن النتيجة

مع القيمة inline-grid تكون النتيجة شبكة بأبعاد مدمجة حسب المحتوى

.grid-container {
  display:inline-grid;
  padding: 15px;
  background-color: #052b0a;
}

لتكن النتيجة

الأمثلة السابقة على الرابط Display Property Examples.

خاصية الفجوة Gap Property

في تصميم الـ Grid Layout يمكن ضبط مقدار المسافة بين الصفوف والأعمدة بواسطة الخصائص بواسطة gap property حيث تقوم بتعيين المسافة بين الصفوف والاعمدة من خلال القيم المسندة لها وهي اختصار للخاصيتين column-gap & row-gap properties.

1-column-gap property

تستخدم الخاصية column-gap لتعيين المسافة بين الاعمدة، وتتضح طريقة عملها في المثال التالي:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  column-gap: 70px;
  padding: 5px;
  background-color: #052b0a;
}

لتكن النتيجة

2-row-gap property

تستخدم الخاصية row-gap لتعيين المسافة بين الصفوف. وتتضح طريقة عملها قي المثال التالي:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  row-gap: 70px;
  padding: 5px;
  background-color: #052b0a;
}

لتكن النتيجة

يمكن اسناد قيمة واحدة أو قيمتين لـ gap property ففي حال اسند لها قيمة واحدة كما المثال التالي ستكون هذه القيمة هي المسافات بين الصفوف rows و بين الاعمدة كذلك متساوية، وهو ما يتضح في المثال التالي:

.grid-container1 {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 50px;
  padding:5px;
  background-color: #052b0a;
}

لتكن النتيجة

و في حال تم إسناد قيمتين لـ gap property كما يوضح المثال التالي ستمثل القيمة الأولى المسافات بين الصفوف row-gap والقيمة الثانية المسافات بين الاعمدة column-gap كما يظهر المثال التالي :

.grid-container2 {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 30px 80px;
  padding: 5px;
  background-color: #052b0a;
}

لتكن النتيجة

الأمثلة السابقة على الرابط التالي Gap property Examples

خصائص الشبكة Grid Properties

توفر CSS عدد من الخصائص التي تستخدم مع الشبكة Grid أي مع العنصر الذي يمثل العنصر الحاوي ( grid-container ) لتحدد الشكل التنظيمي للعرض عناصر الشبكة الـ grid items. وتحدد كل واحدة من هذه الخصائص عرض معينة لعناصر الشبكة، ,ومن طُرق عرض الـ grid-items التالي:

عرض افتراضي للـ Grid.
عرض مخصص للـ Grid.
عرض مخصص للعناصر الشبكة Grid Items.

العرض الافتراضي

العرض الإفتراضي هو التموضع التلقائي للعناصر الـ Grid عند اضافتها، يمكن ضبط العرض الافتراضي للعناصر الشبكة الـ grid-items بواسطة عدد من الخصائص وهي:

grid-auto-flow.
grid-auto-rows.
grid-auto-columns.

grid-auto-flow

وتتحكم خاصية grid-auto-folw في طريقة إدراج العناصر تلقائيًا في الشبكة تأخذ قيمتين.

1-column مع القيمة column يتم إدراج عناصر الـ Grid عموداً بعمود كما يوضح المثال التالي:

.grid-container1 {
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-gap: 10px;
  background-color: #052b0a;
  padding: 5px;
}

لتكن النتيجة

2-row مع القيمة row يتم إدراج عناصر الـ Grid صفاً بصف كما يوضح المثال التالي :

.grid-container2 {
  display: grid;
  grid-auto-flow: row;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-gap: 10px;
  background-color: #052b0a;
  padding: 5px;
}

لتكن النتيجة

grid-auto-rows

وتستخد الخاصية grid-auto-row لتعيين الحجم الافتراضي (الارتفاع) للصفوف في الشبكة (Gird). كما يتضح معنا في المثال التالي:

.grid-container {
  display:grid;
  grid-auto-rows: 170px;
  grid-auto-flow: column;
  grid-gap: 5px;
  background-color: #052b0a;
  padding: 15px;
}

لتكن النتيجة

grid-auto-columns

وتستخدم الخاصية grid-auto-columns لتعيين الحجم الافتراضي (العرض) لجميع الأعمدة في الشبكة ( Grid). كما يتضح معنا في المثال التالي:

.grid-container {
  display:grid;
  grid-auto-columns:250px;
  grid-auto-flow: column;
  grid-gap: 5px;
  background-color: #052b0a;
  padding: 15px;
}

لتكن النتيجة

العرض المخصص للعناصر الشبكة Grid Items

ولتعين طريقة عرض خاصة للعناصر الشبكةالـ grid-items تستخدم الخاصية grid-template Property للعرض المخصص وهي وصف مختصر للخصائص:

grid-template-rows.
grid-template-columns.
grid-template-areas.

grid-template-rows

تقوم الخاصية grid-template-rows بتعيين عدد الصفوف في تخطيط الشبكة الـ Grid Layout . في المثال قمنا بتحديد الارتفاع للصفوف مع تعيين صفين لكل عمود في الـ grid.

.grid-container {
  display: grid;
  grid-template-rows:70px 250px;
  grid-auto-flow:column;
  grid-gap: 15px;
  background-color: #052b0a;
  padding: 15px;
}

لتكن النتيجة

grid-template-columns

تقوم الخاصية grid-template-columns بتعيين عدد الأعمدة في تخطيط الشبكة في المثال قمنا بتحديد العرض لكل عمود مع تعيين 4 اعمدة لكل صف.

.grid-container {
  display: grid;
  grid-template-columns: 70px 150px auto 100px;
  grid-gap: 15px;
  background-color: #052b0a;
  padding: 15px;
}

لتكن النتيجة

grid-template-areas

تقوم الخاصية grid-template-area بتحدد كيفية عرض الأعمدة والصفوف باستخدام عناصر الشبكة المسماة.حيث يتم تسمية الـ grid_item ومن ثم تحديد مساحة التي يشغلها من الـ grid. كما يوضح المثال التالي:

.item1 {
  grid-area: Area1;
}

.grid-container {
  display: grid;
  grid-template-areas: 'Area1 Area1 Area1 Area1';
  grid-gap: 5px;
  background-color: #052b0a;
  padding: 15px;
}

لتكن النتيجة

عرض مخصص للعناصر الشبكة Grid-Items

الخصائص السابقة يتم تعينها للعنصر الذي يمثل الـ grid-container أما لضبط موقع وحجم عنصر ما من عناصر الشبكة grid-items فإننا نستخدم الخصائص التالية مع عنصر الشبكة grid-item:

grid_row.
grid-column.

grid_row

خاصية الـ grid-row تستخدم مع الصفوف وتحدد من أي صف يبدأ الـ grid_item وعند أي صف ينتهي، كما يتضح في المثال التالي:

.item1 {
    grid-row: 2 / span 3;
}

لتكن النتيجة

الخاصية grid -row property هي اختصار للخصائص :

grid-row-start property.
grid-row-end property.

grid-row-start property

وتحدد grid-row-start من اي صف يبدأ العنصر grid-item، كما يتضح في المثال التالي:

.item1 {
  grid-row-start: 3;
}

لتكن النتيجة

grid-row-end property

وتحدد عند اي صف ينهتي الـ grid_item، كما يتضح في المثال التالي:

.item1 {
  grid-row-end: span 3;
}

لتكن النتيجة

grid-column

الخاصية grid-column تستخدم مع الأعمدة وتحدد من أي عمود يبدأ الـ grid_item وعند أي عمود ينتهي. كما يتضح في المثال التالي:

.item1 {
    grid-column: 2 / 4;
}

لتكن النتيجة

الـ grid-column property وهي اختصار للخصائص:

grid-column-start Property.
grid-column-end Property.

grid-column-start property

وتحدد من اي عمود يبدأ الـ grid item، كما يتضح في المثال التالي:

.item1 {
  grid-column-start: 3;
}

لتكن النتيجة

grid-column-end property

وتحدد عند اي عمود ينتهي الـ grid-item، كما يتضح في المثال التالي:

.item1 {
  grid-column-end: span 3;
}

لتكن النتيجة

الأمثلة السابقة على الرابط التاليGrid property Examples

إلى هنا ينتهي هذا المقال الذي تعرفنا طريقة تصميم صفحات الويب بطريقة الـ Grid شرحنا مفهوم الـ Grid Layout وطريقة تصميم الـ Grid Layout. كما شرحنا كيفية تصميم صفحات الويب بتقنية الـ Grid Layout والخصائص التي توفرها الـ CSS لبناء وتصميم الـ Grid أعطينا فكرة مع أمثلة عن طريقة عمل هذه الخصائص..

الإبلاغ عن إساءة الاستخدام

Kholood Tech Notes

Grid Layout في CSS وتصميـم صفحات الويب