شرح css grid

مريم جمال2 · 24 يونيو 2023

بحثت عن شرح css grid فلم أجده وهو شيء مهم

Mustafa Suleiman · 24 يونيو 2023

هل سؤالك خاص بأحد الدورات؟
إذا كان السؤال خاص بدورة تصميم واجهات المستخدم، فيتم استخدام Flexbox لسهولة فهمه واستخدامه في البداية وأيضًا Grid يستخدم في التصميمات المعقدة نسبيًا، وتنفيذ التصميمات في الدورة تتم من خلال Bootstrap وهو يستخدم Flexbox بشكل أساسي.

وقد تم توضيح ذلك هنا بالتفصيل:

أما إذا كان سؤالك عن مصادر لتعلم Grid فإليك المصادر التالية:

وتستطيعي البحث على يوتيوب أيضًا وستجدي الكثير من الشروحات، عليك بالبحث عن "شرح css grid".

مريم جمال2 · 24 يونيو 2023

انا لسة مشتركة اليوم وسبب اشتراكي انني كنت ابحث عن شخص يساعدني كلما وقف امامي شيء وكنت اعمل تخطيط css grid ولكن مشكلة ما قابلتني فاشتركت بالاكاديمية حتى اجد من يساعدني الا انني فوحئت ان الدرس غير موجود على الاكاديمية اصلا ماذا أفعل

بالنسبة للflex انا لا احبه واحب استعمال css grid

Mustafa Suleiman · 24 يونيو 2023

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

أما الأسئلة العامة الغير متعلقة بالدورة يتم طرحها هنا في قسم أسئلة البرمجة كما فعلتي.

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

مريم جمال2 · 24 يونيو 2023

لا يوجد درس للجريد لكي اضع تحته سؤالي هل يمكنني وضع السؤال هنا

Mustafa Suleiman · 24 يونيو 2023

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

مريم جمال2 · 24 يونيو 2023


<html lang="en">

<head>

<meta charset="UTF-8">

<title>Books saling </title>

<link rel="stylesheet" href="Books saling.css">

<link rel="stylesheet" href="css/all.min.css">

</head>

<body>

<div class="parent">

<div class="header">
<p><i class="fa-solid fa-phone"></i> call us</p>
<p><i class="fa-solid fa-house"></i> home</p>

<p><i class="fa-solid fa-magnifying-glass"></i> search</p>
</div>
<div class="main-content">
</div>
<div class="footer">

</div>

</div>

</body>

</html>



width: 100%;

cursor: pointer;

display: grid;

grid-template-columns: repeat(3 ,1fr);

grid-template-rows: repeat(7 ,100px);

gap: 10px;

grid-template-areas:
"head head head"
"content content content"

"content content content"

"content content content"

"content content content"

"content content content"

"content content content"

"content content content"

"foot foot foot";

}

.parent div{

}

.header{

grid-area: head;

background: blue;

}

.main-content{

grid-area: content;

background: red;

}

.footer{

grid-area: footer;

background: green;

}

اريد ان اعرف ما المشكلة بهذا الكود

كلما طبقته على الصفحة لا يظهر

footer بالصفحة فقط يظهر الheader , content

parent{

width: 100%;

cursor: pointer;

display: grid;

grid-template-columns: repeat(3 ,1fr);

grid-template-rows: repeat(7 ,100px);

gap: 10px;

grid-template-areas:
"head head head"
"content content content"

"content content content"

"content content content"

"content content content"

"content content content"

"content content content"

"content content content"

"foot foot foot";

}

.parent div{

}

.header{

grid-area: head;

background: blue;

}

.main-content{

grid-area: content;

background: red;

}

.footer{

grid-area: footer;

background: green;

}

اعدت ارسال كود css مرة اخرى لان اول مرة كان به خطأ

أسامة زيادة · 24 يونيو 2023

بتاريخ 56 دقائق مضت قال مريم جمال2:

اريد ان اعرف ما المشكلة بهذا الكود

كلما طبقته على الصفحة لا يظهر

footer بالصفحة فقط يظهر الheader , content

اعدت ارسال كود css مرة اخرى لان اول مرة كان به خطأ

كما نلاحظ أن الحاوية footer فارغة ولا يوجد بها أي عناصر وذلك سبب عدم ظهور الحاوية .

<div class="footer">
    </div>

لذلك من أجل ظهور الحاوية footer نقوم بإضافة عناصر بداخلها بهذا الشكل مثلاً

<div class="footer">
  <h1>Hello</h1>
</div>

وهكذا سوف تظهر الحاوية والعناصر التي بداخلها .

بلال زيادة · 26 يونيو 2023

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

إليك شرح مبسط لكيفية استخدام CSS Grid:

تعريف الشبكة: يتم تحديد الشبكة باستخدام خاصية display: grid; على العنصر الأب الذي ترغب في تطبيق الشبكة عليه.

تحديد عدد الأعمدة والصفوف: يتم تحديد عدد الأعمدة والصفوف في الشبكة باستخدام الخاصيتين grid-template-columns و grid-template-rows على العنصر الأب. يمكن استخدام أوحد القيم أو قيم متعددة لتحديد عرض الأعمدة وارتفاع الصفوف.

تحديد موقع العناصر: يتم تحديد موقع العناصر داخل الشبكة باستخدام خاصية grid-column و grid-row على العناصر المراد وضعها في الشبكة. يمكن تحديد المواقع باستخدام أرقام الأعمدة والصفوف أو باستخدام القيم المسماة مثل span و auto.

إضافة المساحة بين العناصر: يمكن إضافة مساحة بين العناصر باستخدام الخاصية grid-gap لتحديد المسافة الأفقية والعمودية بين العناصر.

CSS Grid يقدم العديد من الخصائص والقواعد الأخرى للتحكم في تنسيق العناصر وتوزيعها في الشبكة.

إذا كنت تبحث عن مزيد من التفاصيل والأمثلة، يمكنك زيارة مصادر موثوقة عبر الإنترنت التي توفر شروحات ودروس تفصيلية حول CSS Grid، مثل MDN Web Docs وCSS-Tricks وأكاديمية freeCodeCamp.

شرح css grid

السؤال

رابط هذا التعليق

شارك على الشبكات الإجتماعية

8 أجوبة على هذا السؤال

Recommended Posts

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على