css grid

شرح خاصية grid

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

تحديد عنصر HTML كـ Grid Container	diplay:grid
تحديد عرض الأعمدة في النظام الشبكي	grid-template-columns
تحديد ارتفاع الصفوف في النظام الشبكي	grid-template-rows
تحديد مواقع العناصر في النظام الشبكي باستخدام أسماء المناطق	grid-template-areas
تحديد ترتيب ومواقع العناصر في الأعمدة	grid-column-start / grid-column-end
تحديد ترتيب ومواقع العناصر في الصفوف	grid-row-start / grid-row-end
تحديد ترتيب ومواقع العناصر في الأعمدة باستخدام القيمة المتزامنة grid-column-start و grid-column-end	grid-column
تحديد ترتيب ومواقع العناصر في الصفوف باستخدام القيمة المتزامنة grid-row-start و grid-row-end	grid-row
تحديد ترتيب ومواقع العناصر في النظام الشبكي باستخدام القيمة المتزامنة grid-row-start و grid-row-end و grid-column-start و grid-column-end	grid-area
تحديد موضع العناصر في الأعمدة (التحكم في المحور الأفقي)	justify-items
تحديد موضع العناصر في الصفوف (التحكم في المحور الرأسي)	align-items
تحديد توزيع العناصر على طول المحور الأفقي	justify-content
تحديد توزيع العناصر على طول المحور الرأسي	align-content
تحديد المسافات بين العناصر في النظام الشبكي	gap
تحديد عرض الأعمدة التي لم يتم تعريفها في النظام الشبكي	grid-auto-columns
تحديد ارتفاع الصفوف التي لم يتم تعريفها في النظام الشبكي	grid-auto-rows
تحديد ترتيب العناصر التي لم يتم تحديدها في النظام الشبكي	grid-auto-flow

اختبار css grid

display grid

خاصية الـ display: grid في CSS هي الخاصية التي تتيح إنشاء نظام تخطيط Grid. وتستخدم لتحديد عناصر HTML التي ستتم تخطيطها باستخدام Grid.

عند استخدام خاصية display: grid ، يتم تحويل العناصر المحددة إلى “عناصر الشبكة” وتصبح جزءًا من النظام الشبكي. يمكنك ثم تحديد عدد الأعمدة والصفوف التي تريدها، وتوزيع المساحات بين العناصر بحسب الحاجة.

باستخدام display: grid، يمكنك تحديد عرض وارتفاع الصفوف والأعمدة، وإضافة فواصل بين العناصر، وتحديد ترتيب العناصر، وتحديد مواقع العناصر داخل الشبكة باستخدام خصائص الـ grid-row و grid-column.

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

grid-template-columns

خاصية grid-template-columns في CSS Grid هي الخاصية التي تستخدم لتحديد عرض الأعمدة في النظام الشبكي. يمكن استخدام هذه الخاصية لتحديد عرض العمود بشكل محدد، أو تعيين عرض متساوٍ لجميع الأعمدة، أو تحديد عرض متغير لكل عمود.

يمكن تحديد قيمة grid-template-columns باستخدام وحدات القياس المختلفة مثل px و em و fr و auto وغيرها. يمكن أيضًا تحديد قيمة العرض بشكل تلقائي باستخدام repeat().

على سبيل المثال، إذا كنت تريد إنشاء نظام شبكي يتكون من ثلاثة أعمدة بعرض متساوٍ، يمكنك استخدام الخاصية grid-template-columns بالشكل التالي:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

يمكن أيضًا تحديد عرض الأعمدة باستخدام قيمة auto، وهذا يعني أن عرض العمود يتم تعيينه بشكل تلقائي بناءً على حجم محتوى العنصر الموجود في العمود. على سبيل المثال:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

يمكن الجمع بين وحدات القياس المختلفة والقيم المختلفة لتحديد عرض الأعمدة بشكل أكثر دقة، ويمكن تحديد العرض بشكل متغير باستخدام repeat()، مما يسمح بتحديد عدد محدد من الأعمدة بشكل متساوٍ بناءً على عدد الأعمدة المحدد في الوضعية.

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

grid-template-rows

خاصية grid-template-rows في CSS Grid هي الخاصية التي تستخدم لتحديد ارتفاع الصفوف في النظام الشبكي. يتم استخدام هذه الخاصية لتحديد ارتفاع الصف بشكل محدد، أو تعيين ارتفاع متساوٍ لجميع الصفوف، أو تحديد ارتفاع متغير لكل صف.

يمكن تحديد قيمة grid-template-rows باستخدام وحدات القياس المختلفة مثل px و em و fr و auto وغيرها. يمكن أيضًا تحديد قيمة الارتفاع بشكل تلقائي باستخدام repeat().

على سبيل المثال، إذا كنت تريد إنشاء نظام شبكي يتكون من ثلاثة صفوف بارتفاع متساوٍ، يمكنك استخدام الخاصية grid-template-rows بالشكل التالي:

.grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

يمكن أيضًا تحديد ارتفاع الصفوف باستخدام قيمة auto، وهذا يعني أن ارتفاع الصف يتم تعيينه بشكل تلقائي بناءً على حجم محتوى العنصر الموجود في الصف. على سبيل المثال:

.grid-container {
  display: grid;
  grid-template-rows: auto auto auto;
}

يمكن الجمع بين وحدات القياس المختلفة والقيم المختلفة لتحديد ارتفاع الصفوف بشكل أكثر دقة، ويمكن تحديد الارتفاع بشكل متغير باستخدام repeat()، مما يسمح بتحديد عدد محدد من الصفوف بشكل متساوٍ بناءً على عدد الصفوف المحدد في الوضعية.

باستخدام grid-template-rows، يمكنك تحديد ارتفاع وتنسيق الصفوف في النظام الشبكي وتحكم في التخطيط بشكل دقيق ومرن.

grid-template-areas

خاصية grid-template-areas في CSS Grid هي الخاصية التي تستخدم لتحديد مواقع العناصر في النظام الشبكي باستخدام أسماء المناطق. تسمح هذه الخاصية بتحديد تخطيط نظام الشبكة بشكل أكثر وضوحًا وسهولة.

تحديد grid-template-areas يتم باستخدام قيمة سلسلة النص التي تمثل المناطق المختلفة في النظام الشبكي. يمكن تعريف المناطق باستخدام أسماء مختلفة، ويمكن تحديد كل عنصر في شبكة العناصر لينتمي إلى منطقة معينة باستخدام الاسم الذي تم تعريفه.

على سبيل المثال، يمكن تحديد نظام شبكة مكون من أربعة مناطق باستخدام الخاصية grid-template-areas كالتالي:

.grid-container {
  display: grid;
  grid-template-areas: 
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

في هذا المثال، تم تعريف نظام شبكي مكون من ثلاث صفوف وثلاثة أعمدة، وتم تحديد 4 مناطق باستخدام أسماء المناطق. يمكن تعيين عنصر HTML محدد إلى منطقة معينة باستخدام الخاصية grid-area، مثل:

.grid-item {
  grid-area: header;
}

يتم تحديد اسم المنطقة التي يجب تعيين العنصر إليها باستخدام القيمة المحددة في grid-template-areas.

باستخدام grid-template-areas، يمكنك تحديد مواقع العناصر في النظام الشبكي بشكل سهل ومرن، وتحكم في تخطيط الصفحة بشكل دقيق وبسيط.

grid-column-start / grid-column-end

خاصية grid-column-start و grid-column-end في CSS Grid هي الخاصيتان التي تستخدم لتحديد موقع العنصر في النظام الشبكي بالنسبة للأعمدة. تمثل grid-column-start بداية العمود الذي يتم وضع العنصر فيه، بينما تمثل grid-column-end نهاية العمود الذي يتم وضع العنصر فيه.

يمكن تحديد قيم grid-column-start و grid-column-end باستخدام الأرقام للإشارة إلى موقع العمود، ويمكن أيضًا استخدام الكلمات الأساسية span و auto لتحديد موقع العنصر بشكل أكثر دقة.

على سبيل المثال، يمكن تحديد موقع العنصر في العمود الثالث باستخدام grid-column-start و grid-column-end كالتالي:

.grid-item {
  grid-column-start: 3;
  grid-column-end: 4;
}

هذا يعني أن العنصر سيتم وضعه في العمود الثالث فقط.

يمكن أيضًا تحديد موقع العنصر باستخدام الكلمة الأساسية span، والتي تستخدم لتحديد عدد الأعمدة التي يجب أن يحتلها العنصر. على سبيل المثال، يمكن تحديد أن العنصر يجب أن يحتل 3 أعمدة كالتالي:

.grid-item {
  grid-column-start: 2;
  grid-column-end: span 3;
}

كما يمكن استخدام الكلمة الأساسية auto لتعيين موقع العنصر بشكل تلقائي.

باستخدام grid-column-start و grid-column-end، يمكنك تحديد موقع العنصر بشكل دقيق في النظام الشبكي، وتحكم في تصميم الصفحة بشكل مرن وسهل.

grid-row-start / grid-row-end

خاصية grid-row-start و grid-row-end في CSS Grid هي الخاصيتان التي تستخدم لتحديد موقع العنصر في النظام الشبكي بالنسبة للصفوف. تمثل grid-row-start بداية الصف الذي يتم وضع العنصر فيه، بينما تمثل grid-row-end نهاية الصف الذي يتم وضع العنصر فيه.

يمكن تحديد قيم grid-row-start و grid-row-end باستخدام الأرقام للإشارة إلى موقع الصف، ويمكن أيضًا استخدام الكلمات الأساسية span و auto لتحديد موقع العنصر بشكل أكثر دقة.

على سبيل المثال، يمكن تحديد موقع العنصر في الصف الثالث باستخدام grid-row-start و grid-row-end كالتالي:

.grid-item {
  grid-row-start: 3;
  grid-row-end: 4;
}

هذا يعني أن العنصر سيتم وضعه في الصف الثالث فقط.

يمكن أيضًا تحديد موقع العنصر باستخدام الكلمة الأساسية span، والتي تستخدم لتحديد عدد الصفوف التي يجب أن يحتلها العنصر. على سبيل المثال، يمكن تحديد أن العنصر يجب أن يحتل 3 صفوف كالتالي:

.grid-item {
  grid-row-start: 2;
  grid-row-end: span 3;
}

كما يمكن استخدام الكلمة الأساسية auto لتعيين موقع العنصر بشكل تلقائي.

باستخدام grid-row-start و grid-row-end، يمكنك تحديد موقع العنصر بشكل دقيق في النظام الشبكي، وتحكم في تصميم الصفحة بشكل مرن وسهل.

grid-columns

خاصية grid-columns في CSS Grid هي الخاصية التي تستخدم لتحديد عدد الأعمدة وعرضها في النظام الشبكي. تستخدم هذه الخاصية لتحديد تصميم العمود بشكل محدد، أو تعيين عرض متساوٍ لجميع الأعمدة، أو تحديد عرض متغير لكل عمود.

يمكن تحديد قيم grid-columns باستخدام وحدات القياس المختلفة مثل px و em و fr و auto وغيرها. يمكن أيضًا تحديد عرض الصف بشكل تلقائي باستخدام repeat().

على سبيل المثال، إذا كنت تريد إنشاء نظام شبكي يتكون من ثلاثة أعمدة بعرض متساوٍ، يمكنك استخدام الخاصية grid-columns بالشكل التالي:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

يمكن أيضًا تحديد عرض الأعمدة باستخدام قيمة auto، وهذا يعني أن عرض العمود يتم تعيينه بشكل تلقائي بناءً على حجم محتوى العنصر الموجود في العمود. على سبيل المثال:

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

يمكن الجمع بين وحدات القياس المختلفة والقيم المختلفة لتحديد عرض الأعمدة بشكل أكثر دقة، ويمكن تحديد العرض بشكل متغير باستخدام repeat()، مما يسمح بتحديد عدد محدد من الأعمدة وتكرارها عدة مرات. على سبيل المثال:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr 20px auto);
}

في هذا المثال، يتم تكرار الأعمدة بعرض 1fr و 20px و auto ثلاث مرات، مما يؤدي إلى إنشاء نظام شبكي مكون من تسعة أعمدة.

باستخدام grid-columns، يمكنك تحديد تصميم العمود بشكل دقيق في النظام الشبكي، وتحكم في تصميم الصفحة بشكل مرن وسهل.

grid-row

خاصية grid-row في CSS Grid هي الخاصية التي تستخدم لتحديد عدد الصفوف وارتفاعها في النظام الشبكي. تستخدم هذه الخاصية لتحديد تصميم الصف بشكل محدد، أو تعيين ارتفاع متساوٍ لجميع الصفوف، أو تحديد ارتفاع متغير لكل صف.

يمكن تحديد قيم grid-row باستخدام وحدات القياس المختلفة مثل px و em و fr و auto وغيرها. يمكن أيضًا تحديد ارتفاع الصف بشكل تلقائي باستخدام repeat().

على سبيل المثال، إذا كنت تريد إنشاء نظام شبكي يتكون من ثلاثة صفوف بارتفاع متساوٍ، يمكنك استخدام الخاصية grid-row بالشكل التالي:

.grid-container {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr;
}

يمكن أيضًا تحديد ارتفاع الصفوف باستخدام قيمة auto، وهذا يعني أن ارتفاع الصف يتم تعيينه بشكل تلقائي بناءً على حجم محتوى العنصر الموجود في الصف. على سبيل المثال:

.grid-container {
  display: grid;
  grid-template-rows: auto auto auto;
}

يمكن الجمع بين وحدات القياس المختلفة والقيم المختلفة لتحديد ارتفاع الصفوف بشكل أكثر دقة، ويمكن تحديد الارتفاع بشكل متغير باستخدام repeat()، مما يسمح بتحديد عدد محدد من الصفوف وتكرارها عدة مرات. على سبيل المثال:

.grid-container {
  display: grid;
  grid-template-rows: repeat(3, 1fr 20px auto);
}

في هذا المثال، يتم تكرار الصفوف بارتفاع 1fr و 20px و auto ثلاث مرات، مما يؤدي إلى إنشاء نظام شبكي مكون من تسعة صفوف.

باستخدام grid-row، يمكنك تحديد تصميم الصف بشكل دقيق في النظام الشبكي، وتحكم في تصميم الصفحة بشكل مرن وسهل.

grid-area

خاصية grid-area في CSS Grid هي الخاصية التي تستخدم لتحديد مكان العنصر في النظام الشبكي، بتحديد الصفوف والأعمدة التي يجب أن يشغلها العنصر، وكذلك تحديد ارتفاع وعرض العنصر في النظام الشبكي.

يمكن تحديد قيم grid-area باستخدام الأرقام والكلمات الأساسية span و auto، وذلك بتحديد الصفوف والأعمدة التي يجب أن يشغلها العنصر في النظام الشبكي، وكذلك تحديد ارتفاع وعرض العنصر.

يمكن تحديد القيم باستخدام الفراغات بين القيم المختلفة، مثل:

.grid-item {
  grid-area: 1 / 2 / 3 / 4;
}

في هذا المثال، يتم تحديد مكان العنصر في الصف الأول والثاني، والعمود الثاني والثالث، وبذلك يشغل العنصر مساحة مكونة من صفين وعمودين.

يمكن أيضًا استخدام الكلمة الأساسية span لتحديد عدد الصفوف والأعمدة التي يجب أن يشغلها العنصر، على سبيل المثال:

.grid-item {
  grid-area: 2 / 3 / span 2 / span 3;
}

في هذا المثال، يتم تحديد مكان العنصر في الصف الثاني والثالث، والعمود الثالث والرابع، ويتم تحديد أن العنصر يجب أن يشغل صفين وعمودين.

يمكن استخدام الكلمة الأساسية auto لتعيين الموقع في النظام الشبكي بشكل تلقائي، مما يعني أن النظام الشبكي سيختار المكان المناسب للعنصر. على سبيل المثال:

.grid-item {
  grid-area: auto / 2 / auto / 4;
}

في هذا المثال، يتم تحديد العنصر في الصف الذي يتم تحديده تلقائيًا، والعمود الثاني والثالث والرابع.

باستخدام grid-area، يمكنك تحديد مكان العنصر في النظام الشبكي بشكل دقيق، وتحكم في تصميم الصفحة بشكل مرن وسهل.

justify-items

خاصية justify-items في CSS Grid هي الخاصية التي تستخدم لتحديد موقع العناصر داخل الخلايا في النظام الشبكي بالنسبة للمحور الأفقي (العرض). تستخدم هذه الخاصية لتحديد موضع العنصر داخل الخلية، وتحكم في محاذاته بالنسبة للخلية.

يمكن تحديد مختلف القيم لخاصية justify-items، بما في ذلك:

• start: يتم محاذاة العنصر إلى البداية (اليسار) للخلية.
• end: يتم محاذاة العنصر إلى النهاية (اليمين) للخلية.
• center: يتم توسيط العنصر داخل الخلية.
• stretch: يتم سحب العنصر ليمتد عبر الخلية بالكامل.

على سبيل المثال، يمكن تحديد موقع العنصر داخل الخلية باستخدام justify-items كما يلي:

.grid-item {
  justify-items: center;
}

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

يمكن أيضًا تحديد قيمة stretch لاستخدام حجم الخلية لتمدد العنصر بالكامل على المحور الأفقي، كما يلي:

.grid-item {
  justify-items: stretch;
}

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

يمكن استخدام justify-items مع الخصائص الأخرى للنظام الشبكي، مثل grid-template-columns و grid-template-rows، لتحديد توزيع العناصر والخلايا في النظام الشبكي بشكل دقيق.

باستخدام justify-items، يمكنك تحديد موقع العناصر داخل الخلايا في النظام الشبكي وتحكم في محاذاتها بالنسبة للخلية، مما يسمح بتصميم صفحات الويب بشكل دقيق وسهل.

align-items

خاصية align-items في CSS Grid هي الخاصية التي تستخدم لتحديد موقع العناصر داخل الخلايا في النظام الشبكي بالنسبة للمحور الرأسي (الارتفاع). تستخدم هذه الخاصية لتحديد موضع العنصر داخل الخلية، وتحكم في محاذاته بالنسبة للخلية.

يمكن تحديد مختلف القيم لخاصية align-items، بما في ذلك:

• start: يتم محاذاة العنصر إلى البداية (الأعلى) للخلية.
• end: يتم محاذاة العنصر إلى النهاية (الأسفل) للخلية.
• center: يتم توسيط العنصر داخل الخلية.
• stretch: يتم سحب العنصر ليمتد عبر الخلية بالكامل.

على سبيل المثال، يمكن تحديد موقع العنصر داخل الخلية باستخدام align-items كما يلي:

.grid-item {
  align-items: center;
}

في هذا المثال، يتم توسيط العنصر داخل الخلية بالنسبة للمحور الرأسي، حتى لو كان ارتفاع العنصر أصغر من ارتفاع الخلية.

يمكن أيضًا تحديد قيمة stretch لاستخدام حجم الخلية لتمدد العنصر بالكامل على المحور الرأسي، كما يلي:

.grid-item {
  align-items: stretch;
}

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

يمكن استخدام align-items مع الخصائص الأخرى للنظام الشبكي، مثل grid-template-columns و grid-template-rows، لتحديد توزيع العناصر والخلايا في النظام الشبكي بشكل دقيق.

باستخدام align-items، يمكنك تحديد موقع العناصر داخل الخلايا في النظام الشبكي وتحكم في محاذاتها بالنسبة للخلية، مما يسمح بتصميم صفحات الويب بشكل دقيق وسهل.

justify-content

خاصية justify-content في CSS Grid هي الخاصية التي تستخدم لتحديد توزيع العناصر على المحور الأفقي (العرض) في النظام الشبكي. تستخدم هذه الخاصية لتحديد توزيع العناصر داخل الحاويات الأم (grid container)، وتحكم في مسافات الفراغ بين العناصر.

يمكن تحديد مختلف القيم لخاصية justify-content، بما في ذلك:

• start: يتم تحديد فراغات الفراغات على الجانب الأيسر من الحاوية الأم.
• end: يتم تحديد فراغات الفراغات على الجانب الأيمن من الحاوية الأم.
• center: يتم توسيط العناصر داخل الحاوية الأم.
• stretch: يتم سحب العناصر لتمتد عبر الحاوية الأم بالكامل.
• space-between: يتم توزيع العناصر بالتساوي بين الحواف الأيسر والأيمن للحاوية الأم.
• space-around: يتم توزيع العناصر بالتساوي مع فراغات متساوية حول العناصر.

على سبيل المثال، يمكن تحديد توزيع العناصر داخل الحاوية الأم باستخدام justify-content كما يلي:

.grid-container {
  justify-content: center;
}

في هذا المثال، يتم توسيط العناصر داخل الحاوية الأم بالنسبة للمحور الأفقي.

يمكن أيضًا تحديد قيمة space-between لتوزيع العناصر بالتساوي بين الحواف الأيسر والأيمن للحاوية الأم، كما يلي:

.grid-container {
  justify-content: space-between;
}

في هذا المثال، يتم توزيع العناصر بالتساوي بين الحواف الأيسر والأيمن للحاوية الأم، مع فراغات متساوية بين العناصر.

يمكن استخدام justify-content مع الخصائص الأخرى للنظام الشبكي، مثل grid-template-columns و grid-template-rows، لتحديد توزيع العناصر والخلايا في النظام الشبكي بشكل دقيق.

باستخدام justify-content، يمكنك تحديد توزيع العناصر داخل الحاوية الأم في النظام الشبكي وتحكم في مسافات الفراغ بين العناصر، مما يسمح بتصميم صفحات الويب بشكل دقيق وسهل.

align-content

خاصية align-content في CSS Grid هي الخاصية التي تستخدم لتحديد توزيع العناصر على المحور الرأسي (الارتفاع) في النظام الشبكي. تستخدم هذه الخاصية لتحديد توزيع العناصر داخل الحاويات الأم (grid container)، وتحكم في مسافات الفراغ بين العناصر.

يمكن تحديد مختلف القيم لخاصية align-content، بما في ذلك:

• start: يتم تحديد فراغات الفراغات على الجانب العلوي من الحاوية الأم.
• end: يتم تحديد فراغات الفراغات على الجانب السفلي من الحاوية الأم.
• center: يتم توسيط العناصر داخل الحاوية الأم.
• stretch: يتم سحب العناصر لتمتد عبر الحاوية الأم بالكامل.
• space-between: يتم توزيع العناصر بالتساوي بين الحواف العلوية والسفلية للحاوية الأم.
• space-around: يتم توزيع العناصر بالتساوي مع فراغات متساوية حول العناصر.

على سبيل المثال، يمكن تحديد توزيع العناصر داخل الحاوية الأم باستخدام align-content كما يلي:

.grid-container {
  align-content: center;
}

في هذا المثال، يتم توسيط العناصر داخل الحاوية الأم بالنسبة للمحور الرأسي.

يمكن أيضًا تحديد قيمة space-between لتوزيع العناصر بالتساوي بين الحواف العلوية والسفلية للحاوية الأم، كما يلي:

.grid-container {
  align-content: space-between;
}

في هذا المثال، يتم توزيع العناصر بالتساوي بين الحواف العلوية والسفلية للحاوية الأم، مع فراغات متساوية بين العناصر.

يمكن استخدام align-content مع الخصائص الأخرى للنظام الشبكي، مثل grid-template-columns و grid-template-rows، لتحديد توزيع العناصر والخلايا في النظام الشبكي بشكل دقيق.

باستخدام align-content، يمكنك تحديد توزيع العناصر داخل الحاوية الأم في النظام الشبكي وتحكم في مسافات الفراغ بين العناصر، مما يسمح بتصميم صفحات الويب بشكل دقيق وسهل.

gap

خاصية gap في CSS Grid هي الخاصية التي تستخدم لتحديد المسافات بين الخلايا في النظام الشبكي. تستخدم هذه الخاصية لتحديد المسافات العمودية والأفقية بين الخلايا، وتحكم في تباعد العناصر والخلايا داخل النظام الشبكي.

يمكن تحديد مختلف القيم لخاصية gap، بما في ذلك:

• px، em، rem أو أي وحدة أخرى من القياسات: يتم تحديد المسافة بين الخلايا باستخدام القياسات المحددة.
• normal: يتم تحديد المسافة العادية بين الخلايا، والتي تعتمد على النمط وحجم الخط المستخدم.

على سبيل المثال، يمكن تحديد مسافات بين الخلايا باستخدام gap كما يلي:

.grid-container {
  gap: 10px;
}

في هذا المثال، يتم تحديد مسافة 10 بكسل بين الخلايا في النظام الشبكي.

يمكن أيضًا استخدام gap مع الخصائص الأخرى للنظام الشبكي، مثل grid-template-columns و grid-template-rows، لتحديد تباعد العناصر والخلايا بشكل دقيق.

باستخدام gap، يمكنك تحديد المسافات بين الخلايا في النظام الشبكي وتحكم في تباعد العناصر والخلايا داخل النظام الشبكي، مما يسمح بتصميم صفحات الويب بشكل دقيق وسهل.

grid-auto-columns

خاصية grid-auto-columns في CSS Grid هي الخاصية التي تستخدم لتحديد عرض الخلايا التي تنشأ تلقائيًا في النظام الشبكي. تستخدم هذه الخاصية لتحديد عرض الخلايا التي لم يتم تحديدها مسبقًا في grid-template-columns، وتحكم في تصميم النظام الشبكي بشكل دقيق.

يمكن تحديد مختلف القيم لخاصية grid-auto-columns، بما في ذلك:

• auto: يتم تحديد عرض الخلايا التي لم يتم تحديدها مسبقًا بناءً على محتوياتها.
• minmax(min, max): يتم تحديد عرض الخلايا التي لم يتم تحديدها مسبقًا بين الحد الأدنى والحد الأقصى المحددين.
• القيم المحددة بوحدات القياس مثل px، em، rem وغيرها: يتم تحديد عرض الخلايا التي لم يتم تحديدها مسبقًا باستخدام القياسات المحددة.

على سبيل المثال، يمكن تحديد عرض الخلايا التي لم يتم تحديدها مسبقًا باستخدام grid-auto-columns كما يلي:

.grid-container {
  grid-auto-columns: minmax(100px, 1fr);
}

في هذا المثال، يتم تحديد عرض الخلايا التي لم يتم تحديدها مسبقًا بين 100 بكسل و 1 كسر من الفضاء المتاح في الحاوية الأم.

يمكن استخدام grid-auto-columns مع الخصائص الأخرى للنظام الشبكي، مثل grid-template-columns و grid-template-rows، لتحديد تصميم النظام الشبكي بشكل دقيق.

باستخدام grid-auto-columns، يمكنك تحديد عرض الخلايا التي لم يتم تحديدها مسبقًا في النظام الشبكي وتحكم في تصميم النظام الشبكي بشكل دقيق، مما يسمح بتصميم صفحات الويب بشكل مرن وسهل.

grid-auto-rows

خاصية grid-auto-rows في CSS Grid هي الخاصية التي تستخدم لتحديد ارتفاع الخلايا التي تنشأ تلقائيًا في النظام الشبكي. تستخدم هذه الخاصية لتحديد ارتفاع الخلايا التي لم يتم تحديدها مسبقًا في grid-template-rows، وتحكم في تصميم النظام الشبكي بشكل دقيق.

يمكن تحديد مختلف القيم لخاصية grid-auto-rows، بما في ذلك:

• auto: يتم تحديد ارتفاع الخلايا التي لم يتم تحديدها مسبقًا بناءً على محتوياتها.
• minmax(min, max): يتم تحديد ارتفاع الخلايا التي لم يتم تحديدها مسبقًا بين الحد الأدنى والحد الأقصى المحددين.
• القيم المحددة بوحدات القياس مثل px، em، rem وغيرها: يتم تحديد ارتفاع الخلايا التي لم يتم تحديدها مسبقًا باستخدام القياسات المحددة.

على سبيل المثال، يمكن تحديد ارتفاع الخلايا التي لم يتم تحديدها مسبقًا باستخدام grid-auto-rows كما يلي:

.grid-container {
  grid-auto-rows: minmax(100px, 1fr);
}

في هذا المثال، يتم تحديد ارتفاع الخلايا التي لم يتم تحديدها مسبقًا بين 100 بكسل و 1 كسر من الفضاء المتاح في الحاوية الأم.

يمكن استخدام grid-auto-rows مع الخصائص الأخرى للنظام الشبكي، مثل grid-template-columns و grid-template-rows، لتحديد تصميم النظام الشبكي بشكل دقيق.

باستخدام grid-auto-rows، يمكنك تحديد ارتفاع الخلايا التي لم يتم تحديدها مسبقًا في النظام الشبكي وتحكم في تصميم النظام الشبكي بشكل دقيق، مما يسمح بتصميم صفحات الويب بشكل مرن وسهل.

grid-auto-flow

خاصية grid-auto-flow في CSS Grid هي الخاصية التي تستخدم لتحديد كيفية ترتيب العناصر التي لم يتم تحديدها مسبقًا في النظام الشبكي. تستخدم هذه الخاصية لتحديد كيفية ترتيب العناصر التي تم إضافتها إلى النظام الشبكي بعدما تم تحديد الخلايا المحددة في grid-template-rows و grid-template-columns.

يمكن تحديد مختلف القيم لخاصية grid-auto-flow، بما في ذلك:

• row: ترتيب العناصر في الصفوف الأفقية المتتالية.
• column: ترتيب العناصر في الأعمدة الرأسية المتتالية.
• dense: ترتيب العناصر بشكل متجاور لملء الفراغات الشاغرة في النظام الشبكي.

على سبيل المثال، يمكن تحديد كيفية ترتيب العناصر التي لم يتم تحديدها مسبقًا باستخدام grid-auto-flow كما يلي:

.grid-container {
  grid-auto-flow: row;
}

في هذا المثال، يتم ترتيب العناصر التي لم يتم تحديدها مسبقًا في صفوف أفقية.

يمكن استخدام grid-auto-flow مع الخصائص الأخرى للنظام الشبكي، مثل grid-template-columns و grid-template-rows، لتحديد تصميم النظام الشبكي بشكل دقيق.

باستخدام grid-auto-flow، يمكنك تحديد كيفية ترتيب العناصر التي لم يتم تحديدها مسبقًا في النظام الشبكي، وتحكم في تصميم النظام الشبكي بشكل دقيق، مما يسمح بتصميم صفحات الويب بشكل مرن وسهل.

الفرق بين auto و fr unit في css grid

يتم استخدام وحدة auto و fr في CSS Grid لتحديد حجم الخلايا في النظام الشبكي، ولكن لهما استخدامات مختلفة.

تعني أن عرض الخلية أو ارتفاعها سيتم تحديدها بناءً على حجم محتواها الداخلي. بمعنى آخر، ستكون عرض الخلية أو ارتفاعها مساويًا لأصغر قيمة ممكنة لاحتوائها على محتوى داخلي	auto
تعني “الفضاء المتاح”، وهي وحدة تستخدم لتقسيم المساحة المتاحة في الحاوية الأم على الخلايا. يمكن استخدام fr لتحديد نسبة الفضاء المتاح الذي سيتم تخصيصه لكل خلية. على سبيل المثال، إذا كان لديك خلايا اثنتان وكانت قيمة grid-template-columns هي 1fr 2fr، فإن الخلية الأولى ستحصل على ثلث المساحة المتاحة، في حين أن الخلية الثانية ستحصل على ثلثي المساحة المتاحة	fr

يمكن استخدام الوحدات auto و fr معًا في نفس النظام الشبكي، ويمكن استخدامهما لتحديد العرض (grid-template-columns) والارتفاع (grid-template-rows) للخلايا.

على الرغم من أن auto و fr لهما استخدامات مختلفة، فإنه يمكن استخدامهما بشكل متبادل في بعض الحالات، وذلك يعتمد على تصميم النظام الشبكي ومتطلبات المشروع.

لنأخذ مثالًا على استخدام وحدة auto و fr في CSS Grid:

.grid-container {
  display: grid;
  grid-template-columns: 1fr auto 2fr;
  grid-template-rows: auto 1fr;
  grid-gap: 10px;
}

في هذا المثال، تم استخدام fr لتقسيم المساحة المتاحة في الحاوية الأم على الخلايا. الخلية الأولى ستحصل على ثلث المساحة المتاحة، في حين أن الخلية الثانية ستحصل على المساحة المتاحة بالكامل (باستخدام القيمة auto)، والخلية الثالثة ستحصل على ثلثي المساحة المتاحة. يتم استخدام auto في الخلية الثانية لتحديد عرض الخلية بناءً على حجم محتواها الداخلي.

يمكن استخدام auto و fr في CSS Grid أيضًا لتحديد الارتفاع والعرض للخلايا بشكل مختلف، كما يلي:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: auto 100px auto;
}

في هذا المثال، تم استخدام auto لتحديد الارتفاع للخلايا الأولى والثالثة بناءً على حجم محتواها الداخلي، وتم استخدام fr لتحديد العرض للخلية الأولى والثانية بنسبة 1:2.

هذه هي بعض الأمثلة على كيفية استخدام وحدات auto و fr في CSS Grid لتحديد حجم الخلايا بطريقة مختلفة، ويمكن تعديل هذه الأمثلة وفقًا لمتطلبات التصميم الخاصة بك.

اختبار css grid