Create-Masonry-Layout-With-Grid-Layout-System-HTML-CSS Arabic(باللغة العربية)
Published: 2020-03-31 01:20:46

إنشاء الملفات اولا 
###nameFolder
    * index.html or index.htm
    * style.css
in css file (style.css) :
ضع هذه الخصائص اولا
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/a9t4bfiffax9tqpvdo6j.png)
1- (*):
علامة تكتب لتطبق ما بداخلها من خصائص علي جميع العناصر
2- (Margin):
وهي ايضافة هامش للعنصر بمعنا اضافة مساحة بين العناصر
3- (Padding)
وهذه معاكسة للتي هي فوق بمعنا ان اضافة بداخل العنصر

وما الاستفادة من استخدامهما هنا حتي نقوم بانعدام جميع المساحات الزائدة في صفحتنا

وهذه رسم توضيحي لما قولته
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k8en5ffd4yinnhqly7nj.png)
4- (box-sizing of value = border-box):
هناك نوعين من المساحات وهي المساحات الاساسية والمساحات الايضافية

Width and Height = مساحات اساسية 
Margin and Padding = مساحات اضافية

نحن نريد الان ان نقسم المساحة العرضية بنصف بين عنصرين بدون ان يحسب قيم المساحات الإضافية وهنا ياتي استخدام هذه الخاصية

نقوم بفتح 
index.html
ونضع عناصر الصفحة الاساسية كما موضح في الصورة التالية
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zrj0nzem8c912e90i3wj.png)


نضيف العتاصر بما تحتوي
[1]
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5jeqpra95h93j7h47qye.png)
=============================================
[2]
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/86kknw9mtzqubb85oazh.png)
=============================================
[3]
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ehdnadudxn0ibadt0kiy.png)
=============================================
[4]
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ixagcmcqgivmf3bs359e.png)

وتكون النتيجة هكذا
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/gle8uxa51713dr207mdd.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/m97w608si0awlemwfnot.png)

هل تلاحظ فرق بين الصورتين لقد قمت انا باضافه لون لخلفية الصفجة حتي تلاحظ المساحات الاضافية التي تضعها اللغة فعندما نضع الخصائص التي قمت بشرجها في الاعلي فتمحي جميع المساحات الاصافية من جميعع العناصر

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e9ya1tagm2nw7sh9xzqh.png)

In style.css
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ub3odi9x4v96vyr3ip5z.png)

1- (display):
تحديد كيفية عرض العنصر 
وهنا تظهر لنا بانها تاخذ قيمة 
-flex:
هي قيمة تقوم بالتاثير داخل العنصرالذي ياخذ هذه القيمة
ما معني هذا 
هذا نظام شبكي يقوم بتقسيم الصفحة ولكن يكون احادي الابعاد وليس مثل النظام الشبكي الذي يقوم عليه مثال اليوم الذي يكون ثنائي الابعاد لمعرفة المزيد عن النظام احادي الابعاد اقر هذه المقالة
{% post https://dev.to/karimcoda65/flexbox-in-css-the-first-post-in-2020-5gn3 %}

بامكنك ايضا الاطلاع علي بعض المصادر الهامة

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.html.it/guide/flexbox-guida-pratica/
https://www.w3schools.com/css/css3_flexbox.asp
ونرجع مرة اخرة لنرا النتيجة 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hnwc8zxibx4vvu30oi2y.png)
ثاني خطوة نقوم بجلب العنصر الثاني عن طريق 
class (container-masonry)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2s51q2nhjbuqp1ee96p9.png)

نرا اول خاصية 
position: relative;
position:
تقوم هذه الخاصية بضع قيمة من قيمها لتصرح للعنصر عن الحركة وكيفية واي تصرف سوف يسلكه 
ماهي القيم 
static | relative | absolute | fixed 
1-static: 
هي القيمة الافتراضية
2-relative 
هي القيمة النسبية التي تعطي اعتبار الي ما حولها من عناصر
2-absolute: 
اما بقا هذه القيمة هي قيمة مطلقة لا تعطي اي اعتبارا للعناصر حولها
3-fixed: 
لا يعمل اعتارا للعنصر نفسه من حوله

Max-width:
نعطي القيمة العظمي في المساحة اللي العنصر اذا وصل لها لم يتخطاها
وزي ما راينا اننا قمنا بإعطاء ١٠٠٪ لها أي المساحة بالكامل 
اما بعد المساحة 
Display 
هو تصرف العنصر وسلوكة فمنها 
Block:
اي يعمل العنصر ككتلة 

ونرا اننا قمنت باعطي قيمة 
Grid 
وهذا هو النظام ثناثي الأبعاد 
Grid-template-columns 
Grid-template-rows
هذه الخصائص تتحكم في عوض كلا من الصفوف والاعمدة 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yjnyg918tnts3pgu7qky.png)
أيضا قمنا إضافة هامش للعنصر بقيمة 
40px 
ونا النتيجة اصبحة هكذا⬇️⬇️
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zjfp9uy3kjm87x04dq8n.png)

نقوم بتكرار العنصر الذي يحتوي على 
Class: box-light;
٥ مرات اي يصبح العددهم ٦
لتصبح النتيجة هكذا⬇️⬇️
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ftr8iuzrl0kpcdkshgxf.png)

نأتي بهم بإستخدام 
Class: box-light

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r4qbe6eg6u8372vq0atg.png)
Padding:
هو حشو نضعه بين حدود العنصر والمحتوى ولقد شرحت هذا في أول المقال في الاعليفي رسمة موضحه له 
ثم نقوم بوضع العنصر في الوضع ثنائي الأبعاد 
Display: grid;
ثم نقوم بتعديل حجم ومكان النص عن طريق
Font-size, text-align: center 
اما 
Place-content ماذا تعني 
هذه الخاصية تضم خاصتين من خصائص  
CSS
===========
###place-content
	*justify-content 
	*align-content 

وهذه الخصائص تتحكم في مكان المحتوى 

نتحكم بقا في سرعة الحركة باستخدامنا لخاصية 
Transition
وطبعا نضع لون للنص ولون للخلفية عن طريق 
Color 
Background-color 
وتكون النتيجة كدا ⬇️⬇️⬇️⬇️
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/md73doiv18zdj9rhro1u.png)
Class: container-masonry img
تعديل الصورة 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wm9du5stnzigtw96mqb9.png)
اولا 
Position: relative 
الوضع النسبي اي ان العنصر سوف يعطي اعتبار
العناصر حوله 
ثم نعطي مساحة عظمى بقيمة
100px 
ثم مساحة اضافية للأسف عن طريق الهامش 
Margin-bottom: 15px;
والنتيجة⬇️⬇️⬇️
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qlb5nklhw0iwbe0ouppj.png)
Hover 
وهي تأثير تقوم بتغيير الخصائص للعنصر عندما يقف مؤشر الماوس على العنصر ففي مثالنا يحدث تغيير للون النص والخلفية معا عند وقوع الحدث 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f1ekxrzs6o3dnmgjuy4w.png)
فتكون النتيجة كدا ⬇️⬇️⬇️
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/l9o12d2rdy1fhqceb0rw.png)
نقف هنا لحظة 
IN HTML 
في حاجتين مهمين وهم 
Parent items 
Children items 
ف هنا عندنا عنصر هنا يعامل معاملة الاب وعنصر اخر داخه يعامل معامله الابن ففي بعض الأمثلة يكون عدد الأبناء داخل عنصر الاب كثير فنريد ان نأتي باحدهم فهنا نستخدم هذه الخاصية 
nth-child 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/iro1qxp1hcrd4yezuo97.png) 
هنا عندما نستخدم النظام الثنائي الأبعاد يقوم بتقسيم بيئة العمل الي صفوف واعمدة كما موضح هنا في الرسمة الموضحة 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q1uavgxxa7dbgm45l3rp.png)
Grid-column
Grid-row 
نستخدمهم لنخبر العنصر كم يستحوز من مربعات في الصفوف والاعمدة حيث أن 
Grid-column:
للاعمدة
Grid-row:
للصفوف
فتكون النتيجة بعد القيم اللي ظاهرة في الكود في الأعلى ⬇️⬇️⬇️
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/3putaaep8gomh8qd81qd.png)
وهذا كود لتعديل التصميم في الهواتف الذكية 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5k0s1efisgdimvguaeto.png)
وهذا قبل وضع الكود 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/n55n4y31emv34g6evgkm.png)
وهذا بعد وضع الكود
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/17z7jkaf0nvalom9lz78.png)

لمشاهدة الفيديو على يوتيوب 
{% youtube NFhXVnoT1a0 %}

وللحصول على الكود 
https://github.com/karimcoda/Robot-Channel-YouTube-/tree/master/Create-Masonry-Layout-With-Grid-Layout-System-HTML-CSS--master

Source: 
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

https://css-tricks.com/snippets/css/complete-guide-grid/

https://learncssgrid.com/

https://www.w3schools.com/css/css_grid.asp

https://www.w3schools.com/css/

https://www.w3schools.com/html/

social media:
Facebook: 
https://www.facebook.com/karim.coda99
Instagram: 
https://www.instagram.com/karimcoda
GitHub: 
https://github.com/karimcoda
Codepen:
https://codepen.io/karim-coda
Dev: 
https://dev.to/karimcoda65