تمت الترجمة بواسطةَ Aicha AIT OUMGHAR
معارض الصور التي تنشئها مواقع مثل Unsplash و Pinterest وغيرها, يتم إنشاؤها باستخدام تقنيات مثل موضعة (positioning) أو إزاحة الصورة (translating), والتي يعتبر استخدامها مرهقا جدا. يمكنك إنجاز نفس الشيء بشكل أسرع إذا استخدمت شبكات الـCSS Grid) CSS).
على سبيل المثال: في الأعلى لدينا معرض صور بقياسات عرض وارتفاع متغيرة, ويعتبر إنجاز هذا المعرض من حالات الاستخدام المثالية لـCSS grids.
هيا لنبدأ !
الشبكة الأساسية
والآن, لننشئ شبكة بمقاس 8x8 . نستطيع أيضا إنشاء شبكات بأبعاد أخرى, ولكن هذا يعتمد على نوع معرض الصور الذي ترغب فيه. في حالتنا هذه, تعتبر شبكة بمقاس 8x8 مناسبة.
- يمكن تحديد حاوية للشبكة بإعطاء قيمة grid لخاصية الـdisplay الخاصة بالعنصر الذي نرغب في استخدامه لاحتواء شبكتنا. ومنه فسنقوم باختيار العنصر div مع الـclass grid ليكون حاوية لشبكتنا.
- سنستخدم الخاصية grid-template-columns لتحديد مسارات الأعمدة ,ونستخدم grid-template-rows لتحديد مسارات الصفوف. سنقوم بكتابة هذه الخاصيات بداخل حاوية الشبكة. بالنسبة لمثالنا هذا, سنقوم بإنشاء حاوية شبكة بمقاس 8x8.
- grid-gap: تقوم بتحديد مقدار الفجوة بين الصفوف و الأعمدة داخل تخطيط الشبكة. يمكن تحديد قيمة الفجوة داخل الشبكة باستخدام أي من وحدات الطول الخاصة بالـCSS. في مثالنا هذا, قمت باختيار قيمة 15px لجعل مظهر شبكتنا يبدو أفضل.
HTML:
<div class="gallery"></div>
CSS:
.gallery {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 5vw);
grid-gap: 15px;
}
ملاحظة: ارتفاع الصفوف مرتبط بعرض منفذ العرض (viewport), وذلك حتى تستطيع الخلايا داخل الشبكة الحفاظ على نسبة العرض من الارتفاع بشكل مثالي. لدينا 8 صفوف, ارتفاع كل واحد منها هو 5vw (viewport width عرض منفذ العرض). وذلك لأني قمت بتجربة عدة ارتفاعات وتوصلت لنتيجة مفادها أن 5% من عرض منفذ العرض (viewport width) هو المقاس المثالي للارتفاع. وحتى نٌخضع شبكتنا لهذه النتيجة, قمنا بإعطاء الخاصية grid-template-rows ارتفاعا قيمته 5vw.ملاحظة : جميع الأبناء المباشرين للشبكة يتحولون تلقائيا إلى عناصر من الشبكة.
إضافة عناصر إلى الشبكة
والآن, سوف نقوم بإضافة العناصر الشبكية داخل حاوية الشبكة:
<div class=”gallery”>
<figure class=”gallery__item gallery__item--1">
<img src="img/image-1.jpg" class="gallery__img" alt="Image 1">
</figure>
<figure class="gallery__item gallery__item--2">
<img src="img/image-2.jpg" class="gallery__img" alt="Image 2">
</figure>
<figure class="gallery__item gallery__item--3">
<img src="img/image-3.jpg" class="gallery__img" alt="Image 3">
</figure>
<figure class="gallery__item gallery__item--4">
<img src="img/image-4.jpg" class="gallery__img" alt="Image 4">
</figure>
<figure class="gallery__item gallery__item--5">
<img src="img/image-5.jpg" class="gallery__img" alt="Image 5">
</figure>
<figure class="gallery__item gallery__item--6">
<img src="img/image-6.jpg" class="gallery__img" alt="Image 6">
</figure>
</div>
تحديد تصميم لمظهر الصور
.gallery__img {
width: 100%;
height: 100%;
object-fit: cover;
}
عندما نعطي الخاصية object fit قيمة cover فكأننا نعطي الـbackground size قيمة cover فيما يخص background image التي هي صورة الخلفية. ونقوم بهذا حتى نسمح للصورة بملء ارتفاع وعرض الخلية التي تتواجد بداخلها (والتي تمثل عنصرا من الشبكة), الأمر الذي يسمح للصورة بالحفاظ على نسبة العرض إلى الارتفاع الخاصة بها.
ملاحظة: الخاصية object-fit تشتغل فقط في حالة ما إذا قمنا بتحديد قيم الخاصيتين width و height.
ملاحظة: يتم تحديد مواضع عناصر الشبكة بشكل تلقائي يحترم قواعد الموضعة التلقائية للشبكة (grid auto placement rules).
موضعة عناصر الشبكة
قبل البدء في موضعة عناصر الشبكة, يجب أن ندرس بعض المفاهيم الأولية.
الشبكة div هي نفسها حاوية الشبكة, وجميع أبنائها المباشرين هم عناصر للشبكة. عندما قمنا بتحديد مسارات الشبكة باستخدام الـgrid-template-columns و الـgrid-template-rows, قامت الشبكة بمنحنا سطورا مرقمة تسمى سطور الشبكة (grid lines) والتي يمكننا استخدامها لموضعة العناصر. تستطيع الإحالة على أي سطر من الشبكة باستخدام مؤشر رقمي.
الأعمدة تبدأ من الرقم 1, من اليسار إلى اليمين تلقائيا, والصفوف كذلك تبدأ من الرقم 1 من الأعلى إلى الأسفل. لإنشاء عمود أو صف واحد, يتم استخدام سطرين شبكيين, سطر واحد من كل جهة, وبالتالي فشبكتنا المكونة من ثمانية أعمدة وثمانية أسطر تتكون من تسعة أسطر شبكية خاصة بالأعمدة و تسعة أسطر شبكية خاصة بالصفوف.
السطران العموديان 1 و2 يحددان نقط البداية والنهاية بالنسبة للعمود الأول. والسطران 2 و3 يحددان العمود الثاني وهكذا. بالمثل, السطران الأفقيان 1 و2 يحددان موضع الصف الأول, والسطريان 2 و3 يحددان الصف الثاني وهكذا. معرفة هذه المفاهيم سيعينك على فهم كيفية تموضع العناصر (الصور) داخل الشبكة.
والآن, سوف نستخدم أرقام السطور الشبكية للتحكم في طريقة تموضع العناصر, وذلك بتطبيق الخاصيات مباشرة على الشبكة. يمكننا تحديد السطر الذي سيبدأ منه عنصر الشبكة والسطر الذي سينتهي فيه وعدد المسارات التي سيتوسع فوقها.
أول عنصر في الشبكة
حسنا, لنقم بإنشاء قاعدة جديدة تستهدف أول عناصر الشبكة. أول ما سنستخدم هو الـخاصية grid-column-start, وذلك حتى نحدد السطر الشبكي العمودي الذي منه سيبدأ إنشاء العنصر الشبكي. أما الـعنصر grid-column-end يحدد أين سيتوقف العنصر الشبكي.
إذن فقيمة الخاصية grid-column-start هي رقم يشير إلى السطر الشبكي الذي يتواجد في الحافة اليسرى لعمود ما. وقيمة الـgrid-column-end تشير إلى السطر الشبكي الذي يحدد الحافة اليمنى للعمود.
في المثال أسفله, إعطاء الـgrid-column-start قيمة 1, و الـgrid-column-end قيمة 3 يعني أن العنصر الشبكي سوف يتمدد من الحافة اليسرى للسطر الشبكي الأول إلى غاية السطر الشبكي الثالث, ما يسمح للعنصر بملء عمودين. سوف نستخدم كذلك الـgrid-row-start و الـgrid-row-end حتى نحدد بداية العنصر الشبكي و نهايته ضمن السطور الشبكية الخاصة بالصفوف; بنفس الطريقة التي اتبعناها مع العمود.
.gallery__item--1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}
موضعة أول عنصر
**ملاحظة:**والآن, سوف نقوم بموضعة عناصر أخرى باتباع نفس المبادئ التي رأيناها أعلاه.
ثاني عنصر من الشبكة
.gallery__item--2 {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
}
موضعة ثاني عنصر
ثالث عنصر من الشبكة
.gallery__item--3 {
grid-column-start: 5;
grid-column-end: 9;
grid-row-start: 1;
grid-row-end: 6;
}
موضعة ثالث عنصر
رابع عنصر من الشبكة
.gallery__item--4 {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 6;
}
موضعة رابع عنصر
خامس عنصر من الشبكة
.gallery__item--5 {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 6;
grid-row-end: 9;
}
موضعة خامس عنصر
سادس عنصر من الشبكة
.gallery__item--6 {
grid-column-start: 5;
grid-column-end: 9;
grid-row-start: 6;
grid-row-end: 9;
}
موضعة سادس عنصر
يمكنك إيجاد الكود كاملا أسفله:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans:300,400,400i|Nunito:300,300i" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>CSS Grids Gallery</title>
</head>
<body>
<div class="container">
<div class="gallery">
<figure class="gallery__item gallery__item--1">
<img src="img/image-1.jpg" alt="Gallery image 1" class="gallery__img">
</figure>
<figure class="gallery__item gallery__item--2">
<img src="img/image-2.jpg" alt="Gallery image 2" class="gallery__img">
</figure>
<figure class="gallery__item gallery__item--3">
<img src="img/image-3.jpg" alt="Gallery image 3" class="gallery__img">
</figure>
<figure class="gallery__item gallery__item--4">
<img src="img/image-4.jpg" alt="Gallery image 4" class="gallery__img">
</figure>
<figure class="gallery__item gallery__item--5">
<img src="img/image-5.jpg" alt="Gallery image 5" class="gallery__img">
</figure>
<figure class="gallery__item gallery__item--6">
<img src="img/image-6.jpg" alt="Gallery image 6" class="gallery__img">
</figure>
</div>
</div>
</body>
</html>
أما بالنسبة لــــCSS :
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
box-sizing: border-box;
font-size: 62.5%;
}
body {
font-family: "Nunito", sans-serif;
color: #333;
font-weight: 300;
line-height: 1.6;
}
.container {
width: 60%;
margin: 2rem auto;
}
.gallery {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(8, 5vw);
grid-gap: 1.5rem;
}
.gallery__img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gallery__item--1 {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
/** أو يمكنك الحصول على نفس النتيجة باستخدام هذه الصيغة**/
/* grid-column: 1 / span 2; */
/* grid-row: 1 / span 2; */
}
.gallery__item--2 {
grid-column-start: 3;
grid-column-end: 5;
grid-row-start: 1;
grid-row-end: 3;
/**يمكنك الحصول على نفس النتيجة باستخدام هذه الصيغة**/
/* grid-column: 3 / span 2; */
/* grid-row: 1 / span 2; */
}
.gallery__item--3 {
grid-column-start: 5;
grid-column-end: 9;
grid-row-start: 1;
grid-row-end: 6;
/** يمكنك الحصول على نفس النتيجة باستخدام هذه الصيغة **/
/* grid-column: 5 / span 4;
grid-row: 1 / span 5; */
}
.gallery__item--4 {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 3;
grid-row-end: 6;
/**يمكنك الحصول على نفس النتيجة باستخدام هذه الصيغة **/
/* grid-column: 1 / span 4; */
/* grid-row: 3 / span 3; */
}
.gallery__item--5 {
grid-column-start: 1;
grid-column-end: 5;
grid-row-start: 6;
grid-row-end: 9;
/** يمكنك الحصول على نفس النتيجة باستخدام هذه الصيغة **/
/* grid-column: 1 / span 4; */
/* grid-row: 6 / span 3; */
}
.gallery__item--6 {
grid-column-start: 5;
grid-column-end: 9;
grid-row-start: 6;
grid-row-end: 9;
/** يمكنك الحصول على نفس النتيجة باستخدام هذه الصيغة **/
/* grid-column: 5 / span 4; */
/* grid-row: 6 / span 3; */
}
حاول إضافة محتوى CSS الخاص بك لجعل معرض الصور هذا يبدو بالشكل الذي تريده. تستطيع أيضا إنشاء المزيد من معارض الصور المعقدة بسهولة تامة.
اقرأ المزيد عن شبكات الـCSS عبر الرابط المتاح أسفله:
A Complete Guide to Grid | CSS-Tricks
_CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can…_css-tricks.com
أتمنى أن تكون قد وجدت هذا المقال مفيدا وغنيا بالمعلومات. سأكون سعيدا باستقبال آرائك حوله.
أشكرك على القراءة.