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

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

أونا كرافيتس

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

لمتابعة هذه العروض التوضيحية أو اللجوء إليها، يمكنك مراجعة تضمين Glitch أعلاه أو الانتقال إلى 1linelayouts.glitch.me.

1. توسيط فائق: 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;
}

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

2. الفطيرة المحلّية: 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;
}

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

3. يعرض الشريط الجانبي: grid-template-columns: minmax(<min>, <max>) …)

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

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

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

4. حزم الفطيرة: grid-template-rows: auto 1fr auto

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

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

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

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

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

مايو تصميم الكأس المقدسة الكلاسيكية: 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;
}

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

6. شبكة من 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" بالكامل من السطر الأول إلى السطر الأخير (السطر الثالث عشر) ويضم 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;
}

7. ذاكرة الوصول العشوائي (تكرار، تلقائي، الحد الأدنى الحدي): 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));
}

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

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

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

8. القائمة: justify-content: space-between

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

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

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

9. تثبيت نمطي: clamp(<min>, <actual>, <max>)

في ما يلي نتناول بعض الأساليب التي لا تتوافق مع المتصفحات، ولكن مع بعض التأثيرات الرائعة على التنسيقات وتصميم واجهة المستخدم سريع الاستجابة. في هذا العرض التوضيحي، يمكنك ضبط العرض باستخدام مشبك كما يلي: 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>

وأخيرًا، أداة التخطيط الأخيرة هذه هي الأكثر تجريبية بين المجموعة. وقد تم طرحه مؤخرًا إلى Chrome Canary في Chromium 84، وهناك جهد نشط من قِبل Firefox في تنفيذ هذا الإجراء، إلا أنّه غير متاح حاليًا في أي إصدارات ثابتة من المتصفِّحات.

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

باستخدام السمة 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 أسطر فعّالة لخدمة مقارنة الأسعار. لمعرفة المزيد من المعلومات، شاهِد الفيديو الكامل وجرِّب العروض التوضيحية بنفسك.