من خلال مجموعة من الأنماط، يمكنك استخدام هذا التخطيط الجذاب والمرن للعديد من أنواع محتوى الصفحة.
يوفر لك CSS قدرًا كبيرًا من المرونة لتصميم تخطيطات جذابة وسريعة الاستجابة. يقوم التخطيط على شكل مجلة بتنظيم محتوى مختلط من النصوص والصور بتنسيق جذاب وملفت للنظر، مما يجعله خيارًا شائعًا.
تمنحك CSS Grid الأدوات والتحكم الدقيق الذي تحتاجه لتحقيق هذا التخطيط، لذا فهي تقنية رائعة للتعلم.
ما هي تخطيطات نمط المجلة؟
تستخدم التخطيطات على شكل مجلة بنية تشبه الشبكة لترتيب المحتوى في أعمدة وصفوف.
إنها رائعة لعرض أنواع مختلفة من المحتوى مثل المقالات والصور والإعلانات بطريقة منظمة وجذابة.
فهم شبكة CSS
CSS Grid هي أداة تخطيط قوية تتيح لك وضع العناصر في الفضاء ثنائي الأبعاد، مما يجعل من السهل إنشاء الأعمدة والصفوف.
مع هذا النوع من التخطيط، يلعب مكونان أساسيان دورًا: حاوية الشبكة، المسؤولة عن تحديد بنية الشبكة، وعناصر الشبكة، وهي العناصر الفرعية للحاوية.
فيما يلي مثال بسيط لكيفية استخدام CSS Grid لإنشاء شبكة 3x3:
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.grid-item {
background-color: #f76a6a;
padding: 20px;
}
يحدد هذا الرمز حاوية شبكية بثلاثة أعمدة متساوية العرض وفجوة 20 بكسل بين العناصر. وهذه هي النتيجة:
إعداد هيكل HTML
للحصول على تخطيط على شكل مجلة، ستحتاج إلى مستند HTML جيد التنظيم. يعتبر استخدام العناصر الدلالية لتنظيم المحتوى الخاص بك يحب
<body>
<sectionclass="magazine-layout">
<article>
<imgsrc="https://source.unsplash.com/random/?city, night" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?city, day" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?animal" />
<p>Some Article Titlep>
article><article>
<imgsrc="https://source.unsplash.com/random/?book" />
<p>Some Article Titlep>
article>
<article>
<imgsrc="https://source.unsplash.com/random/?food" />
<p>Some Article Titlep>
article>
section>
body>
تعريف حاوية الشبكة
لإنشاء شبكة للتخطيط على شكل مجلتك، أضف كود CSS التالي:
.magazine-layout {
height: 100%;
max-width: 130rem;
margin: 0 auto;/* Defines the grid container */
display: grid;/* Defines the column specification */
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
/* Defines the row specification */
grid-template-rows: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
padding: 2rem;
}
يحدد CSS هذا عنصر الحاوية، .تخطيط المجلة، عبارة عن حاوية شبكية تستخدم الإعلان العرض: الشبكة.
تستخدم خصائص أعمدة قالب الشبكة وصفوف قالب الشبكة مزيجًا من يكرر, احتواء تلقائي، و الحد الأدنى - الحد الأقصى. يضمن ذلك أن تكون عروض الأعمدة وارتفاعات الصفوف على الأقل 250 بكسل، وأكبر عدد ممكن من العناصر تناسب كل منها.
وضع عناصر الشبكة
الآن قم بتصميم كل مقالة ومحتوياتها لإنشاء عناصر جذابة على شكل صورة مصغرة:
article {
overflow: hidden;
border-radius: 0.5rem;
position: relative;
color: #fff;
}.articleimg {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-height: 400px;
}
.articlep {
position: absolute;
bottom: 0;
left: 0;
padding: 2rem;
background: #333333c1;
font-size: 2rem;
border-radius: 0.5rem;
}
في هذه المرحلة، يجب أن تبدو صفحة الويب الخاصة بك كما يلي:
إنشاء تخطيطات على غرار المجلة
لتحقيق مظهر حقيقي على شكل مجلة، قم بإضافة أنماط CSS لتشمل عناصر المقالة بأي ترتيب تريده:
.article:nth-child(1) {
grid-column: 1 / span 3;
}
.article:nth-child(4) {
grid-column: 2 / span 2;
}
يجب أن تبدو صفحتك الآن بالشكل التالي:
تصميم سريع الاستجابة مع شبكة CSS
إحدى مزايا CSS Grid هي استجابتها المتأصلة. أنت تستطيع استخدم استعلامات الوسائط لضبط التخطيط لأحجام الشاشات المختلفة. على سبيل المثال:
/* Media query for screens up to 1100px */
@media screen and (max-width:1100px) {
.article:nth-child(3) {
grid-column: 2 / span 2;
}.article:nth-child(5) {
grid-row: 3 / span 1;
}
}
/* Media query for screens up to 600px */
@media screen and (max-width:600px) {
.article:nth-child(2),
.article:nth-child(3),
.article:nth-child(4),
.article:nth-child(5) {
grid-column: 1 / span 3;
}
}
تقوم استعلامات الوسائط هذه بالتبديل بين تعريفات التخطيط المتعددة لتناسب حجم شاشة الجهاز بشكل أفضل. سوف يتكيف تصميمك النهائي مع الأحجام المختلفة:
تحويل تخطيطاتك باستخدام CSS Grid
CSS Grid هي أداة مرنة يمكنك استخدامها لإنشاء تخطيطات على شكل مجلة تتكيف مع أحجام الشاشات المختلفة. يتيح لك تحديد هياكل الشبكة ووضع العناصر وضبط التخطيطات.
قم بتجربة تكوينات وأنماط مختلفة للشبكة لتحقيق التصميم المثالي المستوحى من المجلة لموقعك على الويب.
