يعرف أي شخص قام على الأقل بتطوير موقع الويب أن علامات
<div> هي لبنة مهمة للتحكم في التصميم.
قدم HTML5 عناصر الدلالية الجديدة للمساعدة في هذا. وعلى الرغم من أنها إضافة رائعة للغة ، إلا أنها تشبه إلى حد بعيد تزيين
<div> بعناصر
<div> .
مع ظهور CSS Grid ، لم نعد بحاجة إلى الاعتماد على عناصر
<div> لإنشاء بنية الصفحة أو حتى مكون أكثر تعقيدًا. يتم تحديد الهيكل حرفيًا بواسطة العنصر الأصل ، وليس عن طريق كيفية وضع المحتوى بداخله.
هذا يعني أنه يمكننا الحصول على تصميم بسيط لطيف يقوم ببناء المحتوى دون الانتباه إلى كيفية تنظيمه في الأصل باستخدام عناصر
<div> .
يمكن أن تكون شبكة CSS معقدة ، لكن Flexbox أيضًا
لقد سمعت أن العديد من الأشخاص يشكون من أن الشبكة معقدة للغاية وأن Flexbox يقوم بنفس الوظيفة. أود أن أقول أنهم مرتاحون فقط باستخدام Flexbox ، وبالتالي ليس لديهم الرغبة في معرفة المزيد عن CSS Grid.
تقدم تقنية CSS Grid العديد من الخصائص والقيم الجديدة ، لذا نعم ، هناك منحنى تعليمي. لكن Flexbox معقد للغاية أيضًا.
هل يمكنك التحدث عن فوائد استخدام خاصية
flex-basis بدلاً من
width ؟ أو كيف يحسب Flexbox عرض العناصر المرنة إذا لم نحدده بشكل صريح؟
على سبيل المثال ، إذا قمت بعرض المثال أدناه لشخص لم يستخدم Flexbox مطلقًا ، فكيف تفسر حقيقة أنه يحتوي على نفس التصميم والأنماط لكلتا المجموعتين من الأعمدة؟ ومما زاد الطين بلة ، العمود الثاني في كلتا الحالتين هو 50 ٪. من الواضح أن عرض 50٪ لا يضبط حجم العنصر فعليًا على 50٪.
"حسنًا ، يبدأ كل شيء بحقيقة أن العناصر مضغوطة إذا لم يكن هناك مساحة كافية في الحاوية ، لذلك ، حتى لو قمنا بتعيين عرض العنصر = 50٪ ، فإنه لا يحتوي على مساحة كافية ، لذلك يبدأ في الضغط للضغط في الحاوية ، لأن الآخر
<div> يتطلب مساحة أكبر. 50 ٪ من المرجح أن يكون الحجم المثالي للكتلة ، ولكن ليس الحجم الفعلي. "
"وهكذا ، في المثال أعلاه ، يكون محتوى الكتلة الأولى كبيرًا إلى درجة أنه يخلق مشكلة ، لأنه ، كعنصر مرن ، يميل افتراضيًا إلى الانكماش لاستيعاب المحتوى. في هذا المثال ، يحتوي هذا العنصر على الكثير من المحتوى ، لذلك ...
نعم ، فليكس بوكس رائع ويقوم بعمل رائع في إنشاء تخطيطات ، لكن من فضلك لا تقل لي إنه بسيط. بمجرد الانتقال من الأمثلة المثالية إلى مهام العمل ، غالبًا ما يكون هذا السلوك بعيدًا عن الفهم الحدسي ، وقد يكون غريبًا في بعض الأحيان.
الشبكة معقدة حيث أنها تستلزم العديد من الخصائص والقيم الجديدة ، لكنها تمنحنا تحكمًا أكثر بكثير من flexbox.
في هذه المقالة ، أود أن أفكر في كيف يساعد هذا المستوى الإضافي من التحكم في تبسيط علاماتنا ويسمح لنا بكتابة كود أقل ، كل ذلك دون الاضطرار إلى معرفة كيفية استخدام عدد من وظائفه الغريبة.
قيود Flexbox
حتى إذا أخذنا مكونًا بسيطًا وقمنا بإنشائه باستخدام flexbox ، نظرًا لحقيقة أنه يعمل فقط في بعد واحد (العناصر المرنة هي إما صفوف أو أعمدة ، لا يمكن أن تكون كلاهما) ، لدينا الكثير عدد العناصر المستخدمة لإنشاء صفوف ، والتي يمكن بعد ذلك تقسيمها إلى أعمدة.
على سبيل المثال ، إذا كنا نعمل على بطاقة مثل هذا:
هذا ليس تخطيطًا معقدًا ، لكن ما زلنا بحاجة إلى تنظيم المحتوى الخاص بنا بطريقة محددة إلى حد ما لجعله يعمل.
هناك حاجة إلى الكتل الصفراء والبرتقالية في هذا الموقف بحيث يتم إنشاء عمودين عند إضافة الشاشة: خاصية فليكس لعنصر البطاقة. (كتلة حمراء). وبالتالي ، من أجل هيكلة كل المحتوى ، نحصل على علامات تبدو كالتالي:
<div class="card"> <div class="profile-sidebar"> </div> <div class="profile-body"> </div> </div>
بمجرد فهم كيفية عمل Flexbox ، سيكون فهم هذا الهيكل أمرًا سهلاً.
عندما نضيف
display: flex خاصية
display: flex لعنصر
.card ، نحصل على عمودين ، وبعد ذلك سنحتاج إلى تبسيط كل منهما على حدة.
هنا مثال عملي مع جميع الأنماط:
والحقيقة هي أنه عندما ننشئ أعمدة محتوى ، فإننا نحصل على ترميز أكثر تعقيدًا ، ونقصر أنفسنا أيضًا ، حيث إننا نجبر أجزاء مختلفة من المحتوى على التجميع معًا.
تبسيط كل شيء مع CSS الشبكة
نظرًا لأن CSS Grid ثنائي الأبعاد ، فإنه يسمح لنا بإنشاء صفوف وأعمدة في نفس الوقت ، مما يعني أن حاوية الشبكة (التي نعينها على
display: grid خاصية
display: grid ) تتحكم بشكل كامل في المخطط الداخلي.
في السابق ، تطلب هذا عناصر إضافية ، كما في المثال Flexbox أعلاه. باستخدام الشبكة ، يمكننا التخلص منها تمامًا.
<div class="card"> <img src="https://i.pravatar.cc/125?image=3" alt="" class="profile-img"> <ul class="social-list"> ... </ul> <h2 class="profile-name">Ramsey Harper</h2> <p class="profile-position">Graphic Designer</p> <p class="profile-info">Lorem ipsum ...</p> </div>
من وجهة نظر العلامات ، أليس هذا أكثر منطقية؟
هناك عنصر مع فئة
.card نضع فيها محتوياته الفورية. لا داعي للقلق بشأن بنية العناصر وتخطيطها ، بل نضع المحتوى الذي نحتاجه ونستمر فيه.
هيكلة التخطيط
كما هو الحال عند استخدام Flexbox ، ما زلنا بحاجة إلى تنظيم التصميم ، على الرغم من أنه نظرًا لخصائص الشبكة ، إلا أنه يبدو مختلفًا بعض الشيء.
هذا هو أحد المواقف التي يمكن للناس فيها أن يزعموا أن الشبكة أكثر تعقيدًا ، لكن في الواقع ، أرسم كتلًا حول كل جزء من المحتوى.
باستخدام Flexbox ، أنشأنا كتلتين برزت كأعمدة. عند استخدام الشبكة ، بدلاً من ذلك ، نقوم بتكوين الشبكة بأكملها للعنصر الأصل ، ثم نوضح العناصر الفرعية التي نجلس فيها على هذه الشبكة.
لإعداد الشبكة ، يمكننا القيام بشيء مثل هذا:
.card { display: grid; grid-template-columns: 1fr 3fr; }
وحدة قياس الاب فريدة من نوعها للشبكة ، وتشير إلى نسبة المساحة المتاحة. يشبه هذا الاستخدام إلى حد كبير تثبيت عمودين في Flexbox وتحديد عرضه بنسبة 25٪ و 75٪ ، على التوالي.
وضع العناصر على الشبكة
ربما يرجع ذلك إلى حقيقة أنني كنت أعوم على مدار سنوات عديدة لإنشاء العلامات ، والآن تبدو المواقف التي توجد فيها العناصر ببساطة في المكان الذي تحتاج إليه بالضبط ، بمثابة سحر قليل.
يمكنك استخدام
grid-row grid-column لكل عنصر لوضعهما في المكان الذي نريده بالضبط ، ولكن كلما استخدمت الشبكة ، كلما وقعت في غرام خاصية
grid-template-areas وعناصر المكان باستخدام تعريفات المنطقة.
يستغرق هذا النهج وقتًا أكثر قليلاً ، لكن الأمر يستحق ذلك ، خاصةً عندما ننشئ تصميمًا متكيفًا (سنصل إليه قريبًا).
نحتاج أولاً إلى تحديد
grid-template-areas لعنصر
.card ، وبعد ذلك يمكننا تعيين جميع العناصر الفرعية لهذه المناطق:
.card { ... display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "image name" "image position" "social description"; } .profile-name { grid-area: name; } .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; }
في المثال أدناه ، يمكنك رؤية كل هذا في العمل:
انها بهذه البساطة
أحد الأسباب التي أحب استخدام
grid-template-areas هو أنه إذا نظر شخص آخر إلى الكود ، فسوف يفهم على الفور ما يحدث ...
إذا قام شخص ما بعرض الرمز الذي تم فيه تحديد
grid-row grid-column باستخدام الأرقام
span ، فمن السهل جدًا حساب وفهم مكان وكيفية تحديد موقع العناصر. بالنسبة للتخطيطات البسيطة أو لاستخدام الامتداد في بعض الأماكن ، أرى أن استخدامها مناسب ،
ولكن أكثر متعة ، فقط بالنظر إلى رمز العنصر الأصل ، وفهم فورًا الشكل الذي سيبدو عليه التخطيط بالكامل .
عند استخدام الشبكة ، من الأسهل معرفة الحجم الفعلي للعنصر.
في المثال الأول لنا ، حيث قمنا بتعيين عرض أحد العناصر المرنة = 50 ٪ ، في الواقع لم يكن يساوي 50 ٪. إذا فهمت سبب حدوث ذلك ، فهذا أمر رائع ، لكن في بعض الأحيان قد يكون الأمر مزعجًا. هذا أمر سهل بما فيه الكفاية للالتفاف ، ولكن عند استخدام الشبكة ، تصبح مشكلة أصغر بكثير.
نظرًا لأننا نحدد التصميم بالكامل ، فإننا نحدد أيضًا بالضبط مقدار المساحة التي يجب أن تشغلها.
وبالطبع ، لدينا تحت تصرفنا وظيفة
minmax() ووحدات القياس
fr ، التي تثير الماء قليلاً ، لأنها تتيح لنا تحديد الأحجام بشكل أكثر مرونة (مثل تلك التي نستخدمها في المثال أعلاه) ، ولكن حتى ذلك الحين لا يزال لدينا سيطرة كاملة على مرونتها ، ويتم التحكم في كل هذا من قبل الوالد ، دون الحاجة إلى تعيين بعض الخصائص للوالدين ، والبعض الآخر للأطفال.
تغييرات محدودة
إذا نظرنا إلى مثال Flexbox ، فلن نتمكن من جعله يبدو كالتخطيط أدناه دون تغيير علامة HTML:
لقد قصرنا أنفسنا على كيفية تجميع العناصر معًا باستخدام
<div> . لقد اضطررنا إلى استخدام هذه
<div> لجعل التخطيط يعمل ، ولكن أصبح الآن عقبة أمامنا.
مع وجود أطفال حاوية شبكتنا الموجودة في نفس المستوى ، يمكنك القيام بكل شيء . وكمكافأة إضافية ، نظرًا لأننا قمنا بتكوين كل شيء باستخدام
grid-template-areas ، فإن إجراء هذه التغييرات سهل للغاية.
.card { grid-template-areas: "image name" "image position" "image social" ". description"; }
من خلال اللعب مع
grid-template-areas بهذه الطريقة ، يمكنك نقل أيقونات الشبكات الاجتماعية بسرعة وسهولة إلى المكان الذي نريد رؤيته (تشير النقطة في الجزء الأخير إلى خلية فارغة).
يجعل الحياة أسهل عند العمل مع استعلامات الوسائط.
كما ذكرت عدة مرات ، هذه هي الحالة عند استخدام مناطق
grid-template-areas . يمكننا التحكم بشكل كامل في تخطيطنا فقط باستخدام خصائص الأصل:
.card { display: grid; grid-template-columns: 1fr 3fr; grid-column-gap: 2em; grid-template-areas: "name" "image" "social" "position" "description"; } .profile-name { grid-area: name;} .profile-position { grid-area: position; } .profile-info { grid-area: description; } .profile-img { grid-area: image; } .social-list { grid-area: social; } @media (min-width: 600px) { .card { text-align: left; grid-template-columns: 1fr 3fr; grid-template-areas: "image name" "image position" "social description"; } .profile-name::after { margin-left: 0; } }
CodePen أدناه يحتوي على مثال تم تصميمه بالكامل. يمكنك دراستها ، واللعب مع مناطق الشبكة ومعرفة مدى سهولة إعادة تصميم المخطط بالكامل.
Flexbox لا يزال لديه نطاقه الخاص
أستخدم الشبكة أكثر وأكثر ، لكنني أعتقد أن Flexbox لا يزال لديه نطاقه الخاص. إذا كان لدي شعار وتصفح يقعان بجوار بعضهما البعض ، سيكون من الجيد أن يكون هناك طريقة سهلة للقيام بشيء كهذا ومعرفة أنهما سيكونان حيث أريدهما:
.header { display: flex; justify-content: space-between; }
ينطبق الشيء نفسه على
<ul> التي نستخدمها للتنقل ، فقط للحصول على العناصر التي تتبع بعضها البعض ، أو ، كما ترون في المثال مع البطاقة التي فحصناها ، فهي مثالية
.social-list .
بالنسبة للمكونات البسيطة التي لا نحتاج فيها إلى تصميم معقد ، يعمل هذا جيدًا بشكل جيد. لكن أكثر وأكثر ، لاحظت تحركًا نحو الشبكة ، أحيانًا بسبب الحاجة الواضحة لها ، وأحيانًا لأنني أريد استخدام وظيفة
minmax() أو وحدات القياس
fr .
لكن في النهاية ، أعتقد أن أفضل شيء في Grid هو القدرة على تبسيط علاماتنا بشكل كبير.
ما زلنا مضطرين لاستخدام
<div> ، ولكن بفضل الشبكة ، يمكننا استخدامها بشكل أقل وأقل.
في الختام
بغض النظر عن مدى جودة Flexbox ، فهو ليس أبسط من الشبكة. إنه يعمل بشكل رائع حقًا في مواقف معينة ، ولكن عند العمل مع تخطيطات أكثر تعقيدًا ، تتيح لنا الشبكة الحصول على قدر أكبر من التحكم. تم تحسين عنصر التحكم هذا أثناء العمل مع تصميم استجابة عند إجراء تغييرات على استعلامات الوسائط.
عند استخدام Flexbox ، فإن أكبر شيء يمكننا تغييره هو
flex-direction . باستخدام الشبكة ، يمكننا بسرعة وببساطة تغيير تصميم المكون.
يتمتع كل من Flexbox و Grid بمزيد من الميزات. لكل منها هدفه الخاص ، لكن إذا كنت تشعر أنك لا تعرف الطريقة التي يجب اتباعها ، أو أنك عالق في محاولة لفهم التصميم المتجاوب بشكل عام ، فقد أعلنت مؤخرًا عن دورة تدريبية في Scrimba تتناول مشكلات التصميم المتجاورة المسماة The Respive Web Design Bootcamp.