ملاحظة: لقد قمت للتو بترجمة النص أدناه ونشره هنا. المراجع موجودة في نهاية هذا المقال.

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

هذه المقالة جزء من مقدمتي لسلسلة CSS Grid. إذا كنت تريد الاطلاع على منشوراتي السابقة، هنا يمكنك العثور على جدول المحتويات الكامل.

تقديم الكلمات الرئيسية الحجم

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

الحد الأدنى للمحتوى والحد الأقصى للمحتوى

إذا كنت تريد أن تجعل حجم مسار الشبكة يعتمد على محتواه، فيجب عليك استخدام إحدى الكلمتين الرئيسيتين: min-content أو max-content. مسار شبكة المحتوى الأدنى سيحاول الحفاظ على الحد الأدنى للحجم دون تجاوز محتواه. مسار الشبكة ذو المحتوى الأقصى، يفترض أن المساحة الحرة للتوسيع لا نهائية ويفترض العرض المثالي للمحتوى الخاص بك.

دعني أعرض عليك بعض الأمثلة التي توضح الفرق بين الكلمات الرئيسية المذكورة. ضع في اعتبارك أن كل صورة تحتوي على حاويتين: الحاوية التي تحتوي على عمود الشبكة ذو المحتوى الأدنى على اليسار والحاوية التي تحتوي على عمود الشبكة الحد الأقصى للمحتوى على اليمين.

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

هذه المرة، عرض الأعمدة مختلف. يفرض العمود min-content محتوى النص الخاص به على "الالتفاف" بينما يتوسع العمود max-content كثيرًا بحيث لا يلزم التفاف النص. لاحظ أن العمود min-content له نفس عرض أطول كلمة وأن العمود max-content أصبح الآن أوسع من الحاوية نفسها.

ماذا سيحدث عندما يحتوي العمود على أكثر من نوع محتوى واحد؟ فيما يلي مثال للأعمدة التي تحتوي على صورة ونص.

في كلتا الحالتين، يحدد العنصر الأوسع حجم العمود. في حالة min-content، هذا العنصر هو الصورة أو أطول كلمة. في حالة العمود max-width، فهذه صورة أو النص بأكمله. لاحظ كيف يتم فصل كلا النوعين من المحتوى عموديًا داخل العمود. أريد مناقشة هذا السلوك في إحدى مقالاتي المستقبلية.

الكلمة الرئيسية تلقائية

الكلمة الأساسية auto مرتبطة بالوحدة fr التي شرحتها في المقالتين السابقتين. ويحدد بالمثل أن مسار الشبكة يجب أن "يملأ" كل المساحة المتوفرة على محور معين.

.container {
    /** ... **/
    grid-template-columns: auto auto;
}

ومع ذلك، هناك اختلافان رئيسيان بين الكلمة الأساسية التلقائية ووحدة fr. أولاً، الكلمة الأساسية auto ليست وحدة، لذلك لا يمكنك استخدامها مع قيمة رقمية (على سبيل المثال، 2auto) كما يمكنك مع fr. ثانيًا، الكلمة الأساسية auto "تفقد" دائمًا مع الوحدة fr، عند استخدامهما معًا. انظر المثال أدناه.

.container {
    /** ... **/
    grid-template-columns: auto 1fr;
}

يمكنك أن تتوقع أن يقوم العمود التلقائي "بملء" مقدار مساوٍ من المساحة للعمود fr في البعد الأفقي. ومع ذلك، فإن وجود العمود fr يؤدي إلى "تقليص" حجم العمود تلقائيًا إلى حجم المحتوى الموجود.

لاحظ أنه في حالة محتوى النص، فإن مسار الشبكة التلقائي يتصرف بشكل مختلف عن مسار شبكة الحد الأدنى للمحتوى/الحد الأقصى للمحتوى. عندما يتم مزج تلقائي مع fr، فإن التتبع التلقائي لا يفرض أبدًا محتوى النص على "الالتفاف" ما لم "يملأ" التتبع التلقائي كل المساحة المتوفرة.

.container {
    /** ... **/
    width: 200px;
    grid-template-columns: auto 1fr;
}

شكرًا لك على قراءة هذا المقال القصير. إذا كنت ترغب في قراءة المزيد من المحتوى مثل هذا، اتبع حسابي على dev.to أو تويتر. أيضًا، لا تتردد في إعطائي أي نوع من التعليقات. أحب أن أقرأ تعليقاتك. نراكم قريبا في مقالتي القادمة!

ملاحظة. إذا كنت ترغب في دعم عملي، سأكون ممتنًا لفنجان من القهوة. شكرًا. ❤️

مصدر

مقال بقلم ماتيوس كيرموتش.