😵 ♏️ 🤞 شبكة CSS واضحة للجميع 🔈 ♉️ 🏩

ما هي الشبكة؟

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

دعم المتصفح

يصل دعم المتصفح إلى 94٪ في عام 2020

حاوية الشبكة

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

<body>
 <div class="row">
  <div class="row__item header">
   <h1>Header</h1>
  </div>
  <div class="row__item nav">
   <h1>Navbar</h1>
  </div>
  <div class="row__item article">
   <h1>Article</h1>
  </div>
  <div class="row__item ads">
   <h1>Ads</h1>
  </div>
 </div>
</body>

.row {
 display: grid;
 margin: auto;
 grid-template-rows: 60px 1fr ;
 grid-template-columns: 20% 1fr 15%;
 grid-gap: 10px;
 width: 1000px;
 height: 1000px;
 justify-items: center;
 justify-content: space-between;
 grid-template-areas:
 "header header header"
 "nav article ads"; 
}

Grid-template-rows هي خاصية CSS تحدد أسماء الخطوط ومسار تغيير حجم وظيفة صفوف الشبكة. تحدد

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

الخاصية CSS grid-gapهي خاصية اختصار ل grid-row-gapو grid-column-gapالتي تعرف الأخاديد بين الصفوف والأعمدة من الشبكة. تحدد

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

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

باستخدام الخاصية ، grid-areaيمكننا تخصيص اسم لكل منطقة من هذه المناطق. لم تُنشئ مناطق التسمية أي تخطيط حتى الآن ، ولكن لدينا الآن مناطق محددة يمكننا استخدامها فيها.

.header{
grid-area: header;
}
.nav{
grid-area: nav;
}
.article{
grid-area: article;
}
.ads{
grid-area: ads;
}

قم بإنشاء قالب موقع باستخدام CSS Grid:

تغيير النموذج

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

لذلك إذا غيرنا إلى هذا:

grid-template-areas:
 "nav header header"
 "nav article ads"; 
}

بعد ذلك ، نتيجة لذلك ، نحصل على النموذج التالي:

شبكات مع استعلامات وسائل الإعلام

تتمثل إحدى نقاط القوة في الشبكات في أنه يمكنك إنشاء قالب مختلف تمامًا في ثوانٍ.

وهذا يجعل CSS Grid مثاليًا للاستفسارات الإعلامية. يمكننا ببساطة إعادة تعيين القيم في رسومات ASCII والتفاف النتيجة في استعلام الوسائط النهائي.

@media all and (max-width: 575px) {
.row {
grid-template-areas:
"header"
"article"
"ads"
"nav";
grid-template-rows: 80px 1fr 70px 1fr ;
grid-template-columns: 1fr;
}
}

نتيجة لذلك ، نحصل على:

وبالتالي ، فإن بيت القصيد هو إعادة تعيين القيم في الخاصية grid-template-areas.

خاتمة

في هذه المقالة ، قمنا بتغطية طرف جبل الجليد CSS Grid Layout. أحيانًا يكون من الصعب تصديق ما يمكن أن تفعله CSS Grid. هذا كسر في كل الأنماط. و أنا أحبه.

أنصحك بالاهتمام بهذه المواصفات وقضاء بعض الوقت في دراستها. صدقني ، في المستقبل سيكون بالتأكيد مفيدًا لك ولا يهم إذا كنت تكتب في React ، Angular ، Vue (أدخل ما يخصك). الشبكة هنا لفترة طويلة.

شبكة CSS واضحة للجميع