ما حجم هذا الصندوق؟ فهم الحجم في تخطيط CSS

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

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

وحدات الطول

يمكننا أن نبدأ بالحجم الذي من المرجح أن يكون مألوفًا أكثر. وحدات الطول الموضحة في مواصفات الوحدة النمطية للقيم والوحدات في CSS. إذا رأيت <length> كقيمة مسموح بها لخاصية CSS ، فهذا يعني إحدى القيم المدرجة هنا. هذه القيم كلها مسافات ، وعادة ما تتكون من عدد صحيح ، بالإضافة إلى معرف الوحدة - على سبيل المثال 12px أو 1em . إذا كانت القيمة 0 يمكن حذف معرف الوحدة. أيضًا ، يتم تقسيم وحدات الطول إلى أطوال نسبية ومطلقة.

أطوال النسبية

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

المجموعة الكاملة للوحدات النسبية هي كما يلي. الوحدات الأربع الأولى نسبية للخط ، في حين أن الوحدات الأربع الأخيرة نسبية لإطار العرض.

• em
• ex
• ch
• rem
• vw
• vh
• vmin
• vmax

نظرًا لأن هذه القيم مرتبطة بشيء ما ، فمن المهم تحديد ما هي نسبية بالضبط. بالنسبة للوحدة النسبية rem ، يكون هذا دائمًا مرتبطًا بحجم العنصر الجذر وهو مستند HTML وهو عنصر html .

في المثال الأول أدناه ، قمت بتعيين عنصر html ليكون بحجم خط يبلغ 20 بكسل. لذلك فإن 1rem هو 20 بكسل. إذا أعطيت عنصرًا بعد ذلك عرضًا 10rem ، فسيصبح عرضه 200 بكسل (حيث أن 20 بكسل مضروبًا في 10 يساوي 200).

عند استخدام الوحدات النسبية للخط الأخرى ( em و ex و ch ) لطول العنصر ، فإنها تكون مرتبطة بحجم الخط كما هو مطبق على هذا العنصر. في المثال الثاني (عرض المربع هو 10em ) ، تنظر وحدة em إلى الخط المطبق على العنصر الذي يتم تحجيمه وتحسب بناءً على ذلك. لذلك ، يصبح عرض هذا المربع 300 بكسل حيث يبلغ حجم خط المربع 30 30px .

عند حساب الوحدات النسبية للخط من حجم الخط ، يتم حساب الوحدات النسبية لإطار العرض بالنسبة إلى مستطيل يُعرف باسم الكتلة الأولية التي تحتوي على الخط. على الشاشة ، هذا له أبعاد منفذ العرض. وحدة vw هي ^1/100 من عرض منفذ العرض و vh _من ^{الارتفاع} _. يجب أن يكون المربع الذي يبلغ عرضه 50vw وارتفاعه 50vh نصف عرض ونصف ارتفاع منفذ العرض.

تعد وحدات vmin و vmax مفيدة لأنها تسمح لك بتغيير حجم شيء ما بالنسبة إلى البعد الأكبر أو الأصغر لإطار العرض. هذا يعني أنه يمكنك عمل شيء ما بنسبة 50٪ من أطول جانب لإطار العرض على سبيل المثال. يكون هذا مفيدًا بشكل خاص عندما يحمل شخص ما جهازًا في الوضع الأفقي أو الرأسي. تتحول وحدة vmin دائمًا إلى الصغيرة أو vw أو vh و vmax إلى الأكبر من vw أو vh . لذلك ، إذا كنت تريد أن يكون العرض دائمًا 20٪ من أطول جانب للجهاز ، فيمكنك استخدام 20vmax . إذا تم الاحتفاظ بالجهاز في الوضع الرأسي ، فسيكون 20vmax هو نفسه 20vh . إذا تم الاحتفاظ بالجهاز في الوضع الأفقي ، فسيكون هو نفسه 20vw .

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

الوحدات المطلقة

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

توضح القائمة أدناه الوحدات المطلقة المسموح بها في CSS:

• cm
• mm
• Q
• in
• pc
• pt
• px

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

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

البكسل المرجعي هو الزاوية المرئية لوحدة بكسل على جهاز بكثافة بكسل تبلغ 96 نقطة في البوصة ومسافة من القارئ بطول الذراع. بالنسبة للطول الاسمي للذراع البالغ 28 بوصة ، تكون الزاوية المرئية حوالي 0.0213 درجة. للقراءة بطول الذراع ، فإن 1 بكسل تقابل حوالي _{0.26 مم (1/96} ^بوصة ). - "CSS Values ​​and Units Level 3"، W3C

النسب المئوية

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

في المواصفات ، حيث ترى <length-percentage> كقيمة مسموح بها للطول ، فهذا يعني أنه سيتم حل النسبة المئوية للطول قبل استخدامها. في المثال أدناه ، يبلغ عرض العنصر الخارجي 400 بكسل ، ويبلغ عرض العنصر الفرعي الأول 50٪. يتحول هذا بعد ذلك إلى 200 بكسل - 50٪ من 400.

يحتوي العنصر الفرعي الثاني على عرض يستخدم calc ، لإضافة 50 بكسل إلى 50٪ ، مما يجعل عرض الكتلة يبلغ 250 بكسل. وبالتالي ، يتم حل نسبة 50٪ إلى الطول ثم تُستخدم في الحساب.

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

التحجيم الداخلي والخارجي لـ CSS

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

الوحدة التي تحدد حجم الأشياء ، وتمنحك طرقًا إضافية للتحكم في هذا الحجم ، هي وحدة التحجيم الداخلية والخارجية لـ CSS. في هذا القسم التالي ، سوف نلقي نظرة على ما تحدده هذه الوحدة ، ولماذا هو حيوي لفهمك للتخطيط في flexbox والشبكة.

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

يقول الملخص الخاص بالوحدة:

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

يمكن استخدام الكلمات الرئيسية لأي من الخصائص التي تستغرق عادةً مدة طويلة. على سبيل المثال width height والحد min-width وما إلى ذلك ، بالإضافة إلى تحديدها للاستخدام في تحجيم مسار تخطيط الشبكة وأساس flex-basis بوكس ​​المرن. قيم الكلمات الرئيسية على النحو المحدد في مسودة المحرر الحالية للمواصفات الأساسية للمستوى 3 هي:

• max-content
• min-content
• fit-content(<length-percentage>)

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

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

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

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

استخدم width: min-content على div ، ويصبح div الآن كبيرًا فقط بالقدر المطلوب مع أن يصبح المحتوى صغيرًا في الاتجاه المضمّن قدر الإمكان. مع وجود سلسلة نصية ، يعني هذا أن النص يستغل كل فرص الالتفاف الناعم التي يمكنه القيام بها.

هذا هو الحجم الأدنى للمحتوى لهذا العنصر. أصغر ما يمكن أن تحصل عليه دون أن يفيض أي محتوى بطريقة ما.

ماكس المحتوى

يحدث السلوك المعاكس إذا استخدمنا width: max-content . يصبح المربع الآن أكبر بما يكفي لاحتواء المحتوى إذا أصبح أكبر في البعد المضمّن قدر الإمكان. تمتد سلسلة النص لدينا الآن ولا تلتف على الإطلاق. سيؤدي هذا إلى حدوث فيضانات إذا أصبحت أوسع من العرض المتاح الذي يجب أن ينمو فيه هذا div.

يتم شحن الكلمات الرئيسية للمحتوى هذه إلى المتصفحات ، ويمكنك استخدامها في Chrome وأيضًا مسبوقة في Firefox كقيمة width height . يمكنك استخدامها لتحجيم المسار في تخطيط الشبكة كما سنستكشف أدناه ، حتى الآن لم يتم تطبيقها flex-basis في flexbox. ومع ذلك ، فإن السبب الحقيقي للنظر في هذه الآن هو فهم أن الحد min-content max-content موجودان ، لأن الأشياء التي لها حد أدنى وأقصى لحجم المحتوى أمر مهم بمجرد أن نبدأ في النظر في كيفية توزيع المساحة في Flexbox و Grid.

التحجيم المستند إلى المحتوى في تخطيط شبكة CSS

يحتوي CSS Grid Layout على تنفيذ قوي للكلمات الرئيسية للمحتوى التي اكتشفناها للتو ، وتستخدم لتغيير حجم مسارات الشبكة. هذا يعني أنه يمكنك أن تجعل المحتوى يحدد حجم المسار على الشبكة. الشيء المهم الذي يجب تذكره مع الشبكة هو أنه نموذج تخطيط ثنائي الأبعاد. إذا كنت تطلب من مسار العمود أن يصبح حجم min-content فسيتم تغيير حجم المسار بناءً على أوسع شيء في المسار.

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

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

ماكس المحتوى

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

تناسب المحتوى

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

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

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

المسارات ذات الحجم التلقائي

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

ومع ذلك ، فإن auto لها معنى محدد في المواصفات. في حالة Grid و flexbox ، إذا كنت تستخدم auto لحجم المسار أو كقيمة flex-basis ، فسوف يبحث لمعرفة ما إذا كان هناك أي حجم للعنصر (أو على أي عنصر في هذا المسار لـ Grid) و استخدم هذا الحجم كحجم المسار الأساسي أو كقيمة flex-basis . يمكنك أن ترى هذا يحدث في CodePen أدناه. المثال الأول هو تخطيط الشبكة ، والثاني تخطيط مرن. يحتوي تخطيط الشبكة على ثلاثة مسارات أعمدة كلها ذات حجم auto ، ويمكن أن ينمو كل عنصر في تخطيط Flex ويتقلص من flex-basis auto

في كلا التخطيطين ، يبلغ عرض العنصر الأخير 200 بكسل. يمكنك أن ترى كيف يتم استخدام هذا العرض عند تحديد حجم المسار. يصبح flex-basis كعنصر أخير ، والحجم الأساسي لمسارات الشبكة. بالنسبة لمسارات الشبكة والعناصر المرنة الأخرى ، لا يوجد عرض ، وبالتالي تستخدم الخوارزمية حجم المحتوى.

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

وحدات fr

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

الوحدة fr ليست طولًا ولا يمكن استخدامها مع calc() بنفس الطريقة التي يمكن بها استخدام النسبة المئوية أو وحدة الطول.

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

تتصرف وحدة fr هنا إلى حد كبير مثل سلوك Flexbox إذا كان flex-basis الخاص بك هو 0 . تأخذ الشبكة كل المساحة الموجودة في حاوية الشبكة وتسليم جزء واحد لكل مسار. ومع ذلك ، لن تتسبب الشبكة في تجاوز المسار عند القيام بذلك. قد يكون هذا السلوك محيرًا إذا كنت تعتقد أن ثلاثة مسارات من 1fr ستكون دائمًا ثلاثة مسارات متساوية الحجم.

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

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

لذلك ، تعمل وحدة fr مثل flexbox مع أساس flex-basis يبلغ 0 ما لم يكن حجم min-content لهذا المسار أكبر ، ثم تعمل مثل flexbox باستخدام أساس flex-basis auto . تمامًا كما في مثالنا عن auto في القسم السابق. يجدر تذكر هذا إذا كانت مساراتك المتساوية العرض لا تبدو متساوية للغاية. السبب المحتمل هو أن هناك شيئًا ما في أحد المسارات يحتوي على حجم min-content أقل من الذي سيتم تسليمه إليه.

صنع مسارات متساوية مع minmax

نحن نعلم الآن لماذا قد تنشئ وحدة fr مسارات أكبر مما أردنا. ومع ذلك ، يمكننا التحكم في الطريقة التي يتصرف بها هذا عن طريق إدخال طريقة أخرى خاصة بالشبكة لتحديد الحجم - وظيفة minmax() . في المثال أعلاه (الكلمة الطويلة في مسار واحد تفرض حجم min-content أدنى أكبر) ، يتصرف Grid كما لو كنا نستخدم تعريف تغيير حجم المسار التالي.

 .grid { display: grid; grid-template-columns: minmax(auto,1fr) minmax(auto,1fr) minmax(auto,1fr); }

تبحث الشبكة في الحجم auto الذي يتناسب مع حجم content ، ويستخدم ذلك كحجم أساسي للمسار قبل مشاركة أي مساحة متبقية.

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

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

تعد الوظيفة minmax() مفيدة جدًا أيضًا عند تغيير حجم الصفوف لمنع الصف من الانهيار إلى ارتفاع صفري عندما يكون فارغًا ، مع السماح له بالنمو إلى الحجم الذي يسمح بأي محتوى مضاف. في المثال التالي ، لدي grid-auto-rows مضبوطة على minmax(50px, auto) . سيكون طول المسارات في الشبكة الضمنية دائمًا 50 بكسل ، ومع ذلك يمكنك أن ترى أن الصف الثاني أطول بسبب كمية المحتوى في خلية واحدة من هذا الصف.

النسب المئوية في تخطيط الشبكة

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

في معظم الأوقات ، سيعمل الحجم المئوي كما هو متوقع. سيؤدي حجم مسار الشبكة باستخدام النسبة المئوية إلى حساب النسبة المئوية من عرض حاوية الشبكة. يمكنك أيضًا استخدام النسب المئوية لخصائص gap ، وستحسب هذه أيضًا بناءً على عرض حاوية الشبكة. يحتوي المثال أدناه على ثلاثة مسارات أعمدة لكل منها 30٪ ، بالإضافة إلى فجوات شبكية بنسبة 5٪ بين المسارات.

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

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

المحاذاة والتحجيم في تخطيط الشبكة

يمكن أن يؤدي استخدام خصائص محاذاة المربع في تخطيط الشبكة أيضًا إلى تغيير حجم المساحات في شبكتك. ضع في اعتبارك التخطيط التالي مع أربعة مسارات أعمدة 100 بكسل وثلاثة مسارات صف 50 بكسل وفجوات 20 بكسل. لا تشغل مسارات الشبكة المساحة الكاملة لحاوية الشبكة ولذا تحاذي نفسها start على كلا المحورين. تصبح العناصر التي تمتد على أكثر من مسار حجمًا يمثل إجمالي جميع المسارات والفجوات التي تمتد إليها.

إذا استخدمت الآن خصائص Box Alignment align-content justify-content بقيم space-between ، تنتشر المسارات مع زيادة الفجوات لاستيعاب المساحة الإضافية. الآن ، أصبح أي عنصر يمتد على أكثر من مسار أكبر لأنه يحتوي على مساحة من الفجوة الموسعة الآن.

توزيع الفضاء في Flexbox والشبكة مقارنة

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

يوضح المثال حاوية مرنة بها أربعة عناصر مرنة ؛ تحته عبارة عن حاوية شبكية بها أربعة عناصر شبكة. هذا المحتوى متطابق ، لكن التخطيط مختلف قليلاً ، على الرغم من كونها تخطيطات قابلة للمقارنة تقريبًا. العناصر المرنة لها flex-basis auto ويسمح لها بالتقلص. يحدد تعريف الشبكة أربعة مسارات جميعها بحجم auto .

في مثال flexbox ، تم تصغير العناصر الأقصر إلى حجم min-content ، وتم توفير مساحة أكبر للعنصر الأكبر.

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

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

القياس يهم!

بينما لم يكن عمل أحجام النسب المئوية من أجل ترتيب الأشياء أمرًا ممتعًا أبدًا ، فقد كان شيئًا على الأقل نفهمه جميعًا. لقد منحنا قدرًا كبيرًا من التحكم ، على الرغم من أنه كان يعني أنه كان علينا القيام بكل العمل. قد يكون الأمر محبطًا عند البدء في استخدام Flexbox و Grid ، فقط لتجد أننا في بعض الأحيان لا نحصل على التصميم الذي توقعناه. قد يكون من المغري العودة مباشرة إلى القيام بالعمل لأنفسنا واستخدام النسب المئوية flex-basis أو تغيير حجم المسار.

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

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