CSS Grid Layout كيفية استخدام minmax ()

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

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

بناء الجملة

بناء جملة الحد الأدنى - الحد الأقصى() وظيفة بسيطة نسبيا ، ويستغرق حجتين: الحد الأدنى والحد الأقصى للقيمة:

 minmax (دقيقة ، كحد أقصى) 

ال دقيقة القيمة يجب أن يكون أصغر من ال ماكس, غير ذلك ماكس يحصل تجاهلها من قبل المتصفح.

يمكننا استخدام الحد الأدنى - الحد الأقصى() وظيفة قيمة شبكة قالب الأعمدة أو شبكة قالب الصفوف الممتلكات (أو كليهما). في مثالنا ، سنستخدم الحالة الأولى ، لأنها حالة استخدام أكثر تكرارًا.

 .حاوية عرض: شبكة؛ أعمدة شبكة القوالب: minmax (100px، 200px) 1fr 1fr؛ صفوف شبكة القوالب: 100px 100px 100px؛ شبكة الفجوة: 10px ؛  

في العرض التوضيحي Codepen أدناه ، يمكنك العثور على HTML و CSS code سوف نستخدم طوال المقالة.

يمكننا ان نستخدم نوع مختلف من القيم داخل ال الحد الأدنى - الحد الأقصى() وظيفة ، كل هذا يتوقف على نوع الشبكة المخصصة التي نريد إنشاءها.

قيم طول ثابت

هناك طريقتان أساسيتان كيف يمكننا استخدام الحد الأدنى - الحد الأقصى() تعمل مع قيم طول ثابت.

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

 أعمدة شبكة القوالب: minmax (100px، 200px) 200px 200px؛ 

في العرض التوضيحي gif أدناه ، يمكنك رؤية أن هذا التنسيق هو لا تستجيب, ومع ذلك يحتوي العمود الأول بعض المرونة. يحتفظ العمودان الثاني والثالث بعرضهما الثابت (200 بكسل) بينما يتراوح العمود الأول من 100 بكسل إلى 200 بكسل, بناء على المساحة المتاحة.

ثانيا ، يمكننا تحديد عرض أكثر من عمود الشبكة استخدام الحد الأدنى - الحد الأقصى(). قيم min و max كلاهما ثابتان ، لذلك بشكل افتراضي ، تكون الشبكة لا تستجيب. ومع ذلك ، فإن الأعمدة نفسها مرن, ولكن فقط بين 100px و 200px. هم ينمو ويتقلص في وقت واحد ونحن نغير حجم منفذ العرض.

 أعمدة شبكة القوالب: minmax (100px، 200px) minmax (100px، 200px) minmax (100px، 200px)؛ 

لاحظ أننا نستطيع أيضًا استخدم ال كرر() وظيفة togehter مع الحد الأدنى - الحد الأقصى(). لذلك ، يمكن أيضًا كتابة مقتطف الشفرة السابق كما يلي:

 شبكة أعمدة القوالب: التكرار (3 ، minmax (100px ، 200px)) ؛ 

قيم الطول الديناميكي

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

ينتج عن التعليمة البرمجية أدناه شبكة فيها عرض العمود الأول يتراوح بين 50 ٪ و 80 ٪ بينما الثاني والثالث مشاركة بالتساوي المساحة المتبقية.

 أعمدة شبكة القوالب: minmax (50٪ ، 80٪) 1fr 1fr؛ 

عندما نستخدم القيم الديناميكية مع الحد الأدنى - الحد الأقصى() وظيفة ، من الأهمية بمكان لإعداد القاعدة التي المنطقي. اسمحوا لي أن أريك مثالا حيث شبكة ينهار:

 أعمدة شبكة القوالب: minmax (1fr، 2fr) 1fr 1fr؛ 

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

هذه هي النتيجة:

الجمع بين القيم الثابتة والديناميكية

من الممكن ايضا الجمع بين القيم الثابتة والديناميكية. على سبيل المثال ، في العرض التوضيحي Codepen أعلاه ، استخدمت minmax (100px ، 200px) 1fr 1fr؛ القاعدة التي تؤدي إلى شبكة حيث العمود الأول يتراوح بين 100px و 200px والمساحة المتبقية هي مشترك بالتساوي بين اثنين آخرين.

 أعمدة شبكة القوالب: minmax (100px، 200px) 1fr 1fr؛ 

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

ال مين المحتوى, ماكس المحتوى, و تلقاءي الكلمات الدالة

هناك النوع الثالث من القيمة يمكننا تعيين ل الحد الأدنى - الحد الأقصى() وظيفة. ال مين المحتوى, ماكس المحتوى, و تلقاءي الكلمات الرئيسية تربط أبعاد مسار الشبكة بـ المحتوى الذي يحتوي عليه.

ماكس المحتوى

ال ماكس المحتوى الكلمة يوجه المتصفح أن العمود الشبكة يجب أن يكون واسعة مثل أكبر عنصر يحتوي عليه.

في العرض التوضيحي أدناه ، وضعت أ 400px صورة واسعة داخل أول مسار للشبكة ، واستخدم قاعدة CSS التالية (يمكنك العثور على عرض Codepen مع الرمز المعدل بالكامل في نهاية المقالة):

 .حاوية شبكة القوالب: max-content 1fr 1fr؛ / ** * نفس الشيء مع تدوين minmax (): * أعمدة شبكة القالب: minmax (أقصى محتوى ، محتوى أقصى) 1fr 1fr؛ * / 

أنا لم تستخدم الحد الأدنى - الحد الأقصى() التدوين بعد ، ولكن في التعليق على الكود أعلاه يمكنك أن ترى كيف سيبدو الكود نفسه معها (على الرغم من أنه لا لزوم له هنا).

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

مين المحتوى

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

دعونا نرى كيف يبدو العرض التوضيحي السابق بالصورة إذا قمنا بتغيير قيمة العمود الأول إلى مين المحتوى:

 .الحاوية شبكة القوالب: min-content 1fr 1fr؛ / ** * نفس الشيء مع تدوين minmax (): * أعمدة شبكة القالب: minmax (min-content، min-content) 1fr 1fr؛ * / 

تركت الخلفية الخضراء أسفل الصورة حتى تتمكن من رؤية الحجم الكامل لخلية الشبكة الأولى.

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

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

عن طريق مين المحتوى و ماكس المحتوى سويا

اذا نحن استعمال مين المحتوى و ماكس المحتوى سويا داخل ال الحد الأدنى - الحد الأقصى() وظيفة نحصل على عمود الشبكة التي:

1. يستجيب
2. لا يوجد لديه أي تجاوز
3. لا تنمو على نطاق أوسع من أوسع عنصر

 .الحاوية شبكة أعمدة القالب: minmax (المحتوى الأدنى ، المحتوى الأقصى) 1fr 1fr؛  

يمكننا أيضا استخدام مين المحتوى و ماكس المحتوى الكلمات الدالة جنبا إلى جنب مع قيم الطول الأخرى داخل ال الحد الأدنى - الحد الأقصى() وظيفة ، حتى القاعدة المنطقي. على سبيل المثال, minmax (25٪ ، أقصى محتوى) أو minmax (دقيقة المحتوى ، 300 بكسل) سيكون كلا القواعد صالحة.

تلقاءي

وأخيرا ، يمكننا أيضا استخدام تلقاءي الكلمة كحجة لل الحد الأدنى - الحد الأقصى() وظيفة.

متى تلقاءي هو تستخدم كحد أقصى, قيمته مماثلة ل ماكس المحتوى.

عندما يكون تستخدم كحد أدنى, يتم تحديد قيمتها من قبل مين العرض / دقيقة الارتفاع القاعدة ، مما يعني ذلك تلقاءي مطابق في بعض الأحيان ل مين المحتوى, لكن ليس دائما.

في مثالنا السابق, مين المحتوى هل تساوي تلقاءي, حيث أن الحد الأدنى لعرض عمود الشبكة الأول يكون دائمًا أصغر من الحد الأدنى لارتفاعه. لذلك ، قاعدة CSS الانتماء:

 .الحاوية شبكة أعمدة القالب: minmax (المحتوى الأدنى ، المحتوى الأقصى) 1fr 1fr؛  

يمكن أن يكتب أيضا مثل هذا:

 .حاوية شبكة قالب الأعمدة: minmax (تلقائي ، تلقائي)  

ال تلقاءي الكلمة يمكن أن يكون أيضا تستخدم جنبا إلى جنب مع وحدات ثابتة وديناميكية أخرى (وحدات البكسل ، وحدة fr ، النسب المئوية ، إلخ) داخل الحد الأدنى - الحد الأقصى() وظيفة ، على سبيل المثال minmax (تلقائي ، 300 بكسل) سيكون قاعدة صالحة.

يمكنك اختبار كيف مين المحتوى, ماكس المحتوى, و تلقاءي الكلمات الرئيسية تعمل مع الحد الأدنى - الحد الأقصى() تعمل في العرض التوضيحي Codepen التالي: