عشرة تخطيطات حديثة في سطر واحد من CSS

يسلّط هذا المنشور الضوء على بعض أسطر CSS الفعّالة التي تؤدي بعض المهام الصعبة وتساعدك في إنشاء تنسيقات حديثة فعّالة.

Una Kravets

تاريخ النشر: 7 يوليو 2020، تاريخ آخر تعديل: 15 ديسمبر 2025

تتيح تنسيقات CSS الحديثة للمطوّرين كتابة قواعد تصميم فعّالة ومفيدة ببضع ضغطات على المفاتيح. تتناول المحاضرة أعلاه وهذه المشاركة اللاحقة 10 أسطر فعّالة من CSS تؤدي بعض المهام الصعبة.

ملاحظة: جميع الميزات العشر المذكورة في المقالة متاحة على نطاق واسع.

لمتابعة هذه العروض التوضيحية أو تجربتها بنفسك، يمكنك الاطّلاع على الموقع الإلكتروني المضمّن أعلاه أو الانتقال إلى 1linelayouts.com.

1. Super Centered: place-items: center

بالنسبة إلى التنسيق الأول "سطر واحد"، لنحلّ أكبر لغز في عالم CSS: توسيط العناصر. أريد أن أُعلمك بأنّ الأمر أسهل مما تظنّ مع place-items: center.

يجب أولاً تحديد grid كطريقة display، ثم كتابة place-items: center على العنصر نفسه. ‫place-items هو اختصار لضبط كل من align-items وjustify-items في آنٍ واحد. من خلال ضبطه على center، يتم ضبط كل من align-items وjustify-items على center.

.parent {
  display: grid;
  place-items: center;
}

يتيح ذلك توسيط المحتوى بشكل مثالي داخل العنصر الرئيسي، بغض النظر عن الحجم الأساسي.

‫02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>

بعد ذلك، لدينا البان كيك المفكّك. هذا تخطيط شائع لمواقع التسويق، على سبيل المثال، والتي قد تحتوي على صف من 3 عناصر، عادةً مع صورة وعنوان ثم بعض النصوص، تصف بعض ميزات المنتج. على الأجهزة الجوّالة، نريد أن تظهر هذه العناصر بشكل منظّم وأن تتوسّع مع زيادة حجم الشاشة.

باستخدام نموذج flexbox لهذا التأثير، لن تحتاج إلى الاستعلام عن الوسائط لضبط موضع هذه العناصر عند تغيير حجم الشاشة.

يرمز الاختصار flex إلى: flex: <flex-grow> <flex-shrink> <flex-basis>.

لهذا السبب، إذا أردت أن تملأ المربّعات حجمها <flex-basis>، وأن تتقلّص إلى أحجام أصغر، ولكن بدون أن تتمدّد لملء أي مساحة إضافية، اكتب: flex: 0 1 <flex-basis>. في هذه الحالة، قيمة <flex-basis> هي 150px، لذا يظهر على النحو التالي:

.parent {
  display: flex;
}

.child {
  flex: 0 1 150px;
}

إذا أردت تمديد المربّعات وملء المساحة أثناء التفافها إلى السطر التالي، اضبط السمة <flex-grow> على 1، ليظهر على النحو التالي:

.parent {
  display: flex;
}

.child {
  flex: 1 1 150px;
}

الآن، مع زيادة حجم الشاشة أو تقليله، تتقلص عناصر flex هذه وتنمو.

‫03. Sidebar Says: grid-template-columns: minmax(<min>, <max>) …)

يستفيد هذا العرض التوضيحي من دالة minmax لتخطيطات الشبكة. ما نفعله هنا هو ضبط الحد الأدنى لحجم الشريط الجانبي على 150px، ولكن على الشاشات الأكبر حجمًا، نتيح تمديده إلى 25%. سيشغل الشريط الجانبي دائمًا 25% من المساحة الأفقية للعنصر الرئيسي إلى أن تصبح هذه المساحة 25% أصغر من 150px.

أضِف هذا كقيمة لـ grid-template-columns بالقيمة التالية: minmax(150px, 25%) 1fr. يحصل العنصر في العمود الأول (الشريط الجانبي في هذه الحالة) على minmax من 150px عند 25%، ويشغل العنصر الثاني (قسم main هنا) بقية المساحة كمسار 1fr واحد.

.parent {
  display: grid;
  grid-template-columns: minmax(150px, 25%) 1fr;
}

04. كومة بان كيك: grid-template-rows: auto 1fr auto

على عكس Deconstructed Pancake، لا يلتف هذا المثال حول عناصره الفرعية عندما يتغير حجم الشاشة. يُشار إلى هذا التخطيط عادةً باسم التذييل الثابت، وغالبًا ما يُستخدم لكل من المواقع الإلكترونية والتطبيقات، على مستوى التطبيقات للأجهزة الجوّالة (يكون التذييل عادةً شريط أدوات)، والمواقع الإلكترونية (غالبًا ما تستخدم التطبيقات من صفحة واحدة هذا التخطيط العام).

ستؤدي إضافة display: grid إلى المكوّن إلى إنشاء شبكة من عمود واحد، ولكن لن يتجاوز ارتفاع المنطقة الرئيسية ارتفاع المحتوى مع التذييل أسفله.

لجعل التذييل يلتصق بالأسفل، أضف:

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

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

5. تنسيق Holy Grail الكلاسيكي: grid-template: auto 1fr auto / auto 1fr auto

بالنسبة إلى هذا التخطيط الكلاسيكي، هناك رأس وتذييل وشريط جانبي أيسر وشريط جانبي أيمن ومحتوى رئيسي. يشبه هذا التنسيق التنسيق السابق، ولكنّه يتضمّن الآن أشرطة جانبية.

لكتابة هذه الشبكة بالكامل باستخدام سطر واحد من الرموز البرمجية، استخدِم السمة grid-template. يتيح لك ذلك ضبط كل من الصفوف والأعمدة في الوقت نفسه.

زوج السمة والقيمة هو: grid-template: auto 1fr auto / auto 1fr auto. الشرطة المائلة بين القائمتين الأولى والثانية المفصولتين بمسافة هي الفاصل بين الصفوف والأعمدة.

.parent {
  display: grid;
  grid-template: auto 1fr auto / auto 1fr auto;
}

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

‫06. شبكة من 12 عمودًا: grid-template-columns: repeat(12, 1fr)

بعد ذلك، لدينا كلاسيكي آخر: الشبكة المكونة من 12 امتدادًا. يمكنك كتابة الشبكات بسرعة في CSS باستخدام دالة repeat(). يؤدي استخدام: repeat(12, 1fr); لأعمدة نموذج الشبكة إلى إنشاء 12 عمودًا لكل منها 1fr.

.parent {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
}

.child-span-12 {
  grid-column: 1 / 13;
}

الآن لديك شبكة مسارات من 12 عمودًا، ويمكننا وضع العناصر الفرعية على الشبكة. تتمثل إحدى طرق القيام بذلك في وضعها باستخدام خطوط الشبكة. على سبيل المثال، سيمتد grid-column: 1 / 13 من السطر الأول إلى الأخير (السطر 13) ويمتد على 12 عمودًا. ستمتد grid-column: 1 / 5; على أول أربعة.

هناك طريقة أخرى لكتابة ذلك باستخدام الكلمة الرئيسية span. باستخدام span، يمكنك تحديد خط البداية ثم عدد الأعمدة التي يجب أن تمتد إليها من نقطة البداية تلك. في هذه الحالة، ستكون السمة grid-column: 1 / span 12 مكافئة للسمة grid-column: 1 / 13، وستكون السمة grid-column: 2 / span 6 مكافئة للسمة grid-column: 2 / 8.

.child-span-12 {
  grid-column: 1 / span 12;
}

‫07. ذاكرة الوصول العشوائي (التكرار، التلقائي، الحد الأدنى/الأقصى): grid-template-columns(auto-fit, minmax(<base>, 1fr))

في هذا المثال السابع، يمكنك الجمع بين بعض المفاهيم التي تعرّفت عليها لإنشاء تنسيق متجاوب مع عناصر فرعية مرنة يتم وضعها تلقائيًا. رائع جدًا. المصطلحات الأساسية التي يجب تذكّرها هنا هي repeat وauto-(fit|fill) وminmax()'، والتي يمكنك تذكّرها من خلال الاختصار RAM.

بشكل عام، يبدو الأمر على النحو التالي:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

أنت تستخدم repeat مرة أخرى، ولكن هذه المرة، باستخدام الكلمة الرئيسية auto-fit بدلاً من قيمة رقمية صريحة. يتيح ذلك وضع هذه العناصر الثانوية تلقائيًا. هذه العناصر الفرعية لها أيضًا قيمة دنيا أساسية تبلغ 150px وقيمة قصوى تبلغ 1fr، ما يعني أنّها ستشغل العرض الكامل البالغ 1fr على الشاشات الأصغر حجمًا، وعندما يصل عرض كل منها إلى 150px، ستبدأ في التدفق على السطر نفسه.

باستخدام auto-fit، ستتمدّد المربّعات عندما يتجاوز حجمها الأفقي 150 بكسل لملء المساحة المتبقية بالكامل. ومع ذلك، إذا غيّرت هذه القيمة إلى auto-fill، لن تتمدّد العناصر عندما يتجاوز حجمها الأساسي في دالة minmax:

.parent {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

‫08. الاصطفاف: justify-content: space-between

بالنسبة إلى التنسيق التالي، النقطة الرئيسية التي يجب توضيحها هنا هي justify-content: space-between، والتي تضع العنصرين الفرعيين الأول والأخير على حواف مربّع الإحاطة، مع توزيع المساحة المتبقية بالتساوي بين العناصر. بالنسبة إلى هذه البطاقات، يتم وضعها في وضع عرض Flexbox، مع ضبط الاتجاه على عمود باستخدام flex-direction: column.

يؤدي هذا إلى وضع العنوان والوصف وكتلة الصورة في عمود رأسي داخل البطاقة الرئيسية. بعد ذلك، يؤدي تطبيق justify-content: space-between إلى تثبيت العنصر الأول (العنوان) والأخير (مجموعة الصور) على حواف نموذج flexbox، ويتم وضع النص الوصفي بينهما بمسافات متساوية لكل نقطة نهاية.

.parent {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

‫09. Clamping My Style: clamp(<min>, <actual>, <max>)

هنا سنتناول بعض الأساليب التي لها تأثيرات رائعة على التنسيقات وتصميم واجهة المستخدم المتجاوبة. في هذا العرض التوضيحي، يتم ضبط العرض باستخدام دالة clamp على النحو التالي: width: clamp(<min>, <actual>, <max>).

يؤدي هذا إلى تعيين الحد الأدنى والحد الأقصى المطلق للحجم والحجم الفعلي. مع القيم، يمكن أن يبدو ذلك كما يلي:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

الحد الأدنى للحجم هنا هو 23ch أو 23 وحدة أحرف، والحد الأقصى للحجم هو 46ch أو 46 حرفًا. تستند وحدات عرض الأحرف إلى حجم خط العنصر (على وجه التحديد عرض الرمز 0). الحجم "الفعلي" هو %50، وهو يمثّل %50 من عرض العنصر الرئيسي لهذا العنصر.

ما تفعله دالة clamp() هنا هو تمكين هذا العنصر من الاحتفاظ بعرض %50 إلى أن يصبح %50 أكبر من 46ch (في إطارات العرض الأوسع)، أو أصغر من 23ch (في إطارات العرض الأصغر). يمكنك أن ترى أنه عندما أقوم بتمديد وتقليص حجم العنصر الرئيسي، يزداد عرض هذه البطاقة إلى أقصى نقطة مثبتة وينخفض إلى الحد الأدنى المثبت. بعد ذلك، يبقى في المنتصف في العنصر الرئيسي لأنّنا طبّقنا سمات إضافية لتوسيطه. يتيح ذلك استخدام تنسيقات أكثر وضوحًا، لأنّ النص لن يكون عريضًا جدًا (أكثر من 46ch) أو مضغوطًا وضيقًا جدًا (أقل من 23ch).

هذه أيضًا طريقة رائعة لتطبيق أسلوب الطباعة المتجاوب. على سبيل المثال، يمكنك كتابة: font-size: clamp(1.5rem, 20vw, 3rem). في هذه الحالة، سيظل حجم خط العنوان دائمًا محصورًا بين 1.5rem و3rem، ولكنه سيزداد ويتقلص بناءً على القيمة الفعلية لـ 20vw ليتناسب مع عرض إطار العرض.

هذا أسلوب رائع لضمان الوضوح مع الحد الأدنى والحد الأقصى لقيمة الحجم.

10. احترام الجانب: aspect-ratio: <width> / <height>

وأخيرًا، يحلّ هذا التنسيق الأخير مشكلة شائعة تتمثل في الحفاظ على نسبة العرض إلى الارتفاع للصورة.

باستخدام السمة aspect-ratio، عند تغيير حجم البطاقة، يحافظ المربّع المرئي الأخضر على نسبة العرض إلى الارتفاع هذه التي تبلغ 16 × 9. نحن نحترم نسبة العرض إلى الارتفاع مع aspect-ratio: 16 / 9.

.video {
  aspect-ratio: 16 / 9;
}

للحفاظ على نسبة عرض إلى ارتفاع تبلغ 16 × 9 بدون هذه السمة، عليك استخدام حيلة padding-top ومنحها مساحة متروكة تبلغ 56.25% لضبط نسبة العرض إلى الارتفاع. سنوفّر قريبًا سمة لهذا الغرض لتجنُّب الاختراق والحاجة إلى حساب النسبة المئوية. يمكنك إنشاء مربّع بنسبة 1 / 1، ونسبة 2 إلى 1 باستخدام 2 / 1، وأي نسبة أخرى تحتاج إليها لتغيير حجم هذه الصورة بنسبة حجم محدّدة.

.square {
  aspect-ratio: 1 / 1;
}

هذه الميزة مفيدة جدًا لأنّها تحلّ الكثير من المشاكل التي يواجهها المطوّرون، والتي واجهتها بنفسي عدة مرات، خاصةً في ما يتعلق بالفيديوهات وإطارات iframe.

الخاتمة

نشكرك على متابعة هذه الرحلة من خلال 10 أسطر فعّالة من CSS. لمزيد من المعلومات، يمكنك مشاهدة الفيديو الكامل.