اكتشف الاختلافات بين أساليب تخطيط CSS الحديثة مع مشكلة عملية: ترتيب الأعمدة.

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

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

السلوك المختلف لـ CSS Flexbox وGrid

للمساعدة في تصور الأشياء، قم بإنشاء Index.html الملف في المجلد المفضل لديك والصقه في العلامات التالية:

html>
<htmllang="en">
<head>
<linkrel="stylesheet"href="style.css">
head>
<body>
<h1>Flexbox vs Gridh1>
<h2>Flexbox:h2>


<divclass="flex-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>


<h2>Grid:h2>
<divclass="grid-container">
<div>Lorem.div>
<div>Lorem ipsum dolor sit amet.





instagram viewer


div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
<div>Lorem ipsum dolor sit amet consectetur adipisicing elit.div>
<div>Lorem ipsum dolor sit amet.div>
<div>Lorem ipsum dolor sit amet consectetur.div>
<div>Lorem ipsum dolor sit.div>
div>
body>
html>

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

يمكنك أيضًا أن ترى أن HTML يستورد ملف ورقة أنماط مسمى style.css. قم بإنشاء هذا الملف في نفس المجلد مثل Index.html والصق الأنماط التالية فيه:

body {
padding: 30px;
}
h1 {
color: #A52A2A;
}


h2 {
font-size: large;
}
div:not([class]) {
outline: 2pxsolidblack;
padding: 0.5em;
}

يجب أن تبدو صفحتك كما يلي:

الآن، لننتقل إلى الأول في عمود مرن، ما عليك سوى إضافة الكود التالي إلى ورقة الأنماط الخاصة بك:

.flex-container {
display: flex;
}

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

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

لمنع تجاوز الأعمدة في حاوية مرنة، يمكنك استخدام ال التفاف المرن ملكية:

.flex-container {
display: flex;
flex-wrap: wrap;
}

إذا لم تكن هناك مساحة كافية لتناسب العناصر الفرعية في سطر واحد، فسوف تلتف الآن وتستمر في السطر التالي.

الآن قم بتطبيق تخطيط الشبكة على الثاني باستخدام هذا CSS:

.grid-container {
display: grid;
}

لن يحدث أي شيء مع الإعلان أعلاه وحده لأن السلوك الافتراضي لـ Grid ينشئ صفوفًا مكدسة فوق بعضها البعض.

للتبديل إلى عرض الأعمدة، تحتاج إلى تغيير شبكة التدفق التلقائي الملكية (التي صف بشكل افتراضي):

.grid-container {
display: grid;
grid-auto-flow: column;
}

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

لتحديد العدد الدقيق للأعمدة التي تريدها في كل سطر، استخدم أعمدة قالب الشبكة:

.grid-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
}

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

.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, min-max(300px, 1fr));
}

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

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

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

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

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

متى تستخدم Flexbox

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

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

<h1>Flexbox vs. Gridh1>
<headerclass="flex">
<h2>Flexboxh2>


<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>


<headerclass="grid">
<h2>Gridh2>
<nav>
<ulclass="nav-list">
<li><ahref="">Homea>li>
<li><ahref="">About Usa>li>
<li><ahref="">Service Information Goes Herea>li>
<li><ahref="">Blog Contacta>li>
<li><ahref="">a>li>
ul>
nav>
header>

استبدل العلامة الموجودة في ملف CSS بما يلي:

.nav-list {
list-style: none;
margin: 0;
padding: 0;
}
header {
--border-width: 5px;
border: var(--border-width) solidblack;
margin-bottom: 30px;
}


header > *:first-child {
border: var(--border-width) solid#FFC0CB;
margin: 0;
}
li {
border: var(--border-width) solid#90EE90;
}

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

الآن، قم بتحويل التنقل الأول إلى تخطيط مرن والثاني إلى تخطيط شبكي عن طريق إضافة CSS التالي:

.flex.nav-list {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
.grid.nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

قارن النتائج لمعرفة أيهما أكثر ملاءمة:

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

متى تستخدم شبكة CSS

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

استبدل العلامة الموجودة داخل العلامات مع هذا:

<h1>Flexbox vs. Gridsh1>
<sectionclass="cards">
<h2>Some cardsh2>


<divclass="columns">
<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit.p>


<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>


<articleclass="card">
<h3class="card__title">Fun Stuffh3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.p>


<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>


<articleclass="card">
<h3class="card__title">A Longer Title Than Othersh3>


<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Facere
 excepturi sit ea dolores totam veniam qui voluptates commodi,
 perferendis et!p>
<ul>
<li>Loremli>
<li>Ipsumli>
<li>Excavateli>
ul>
article>
div>
section>

أضف هذا CSS:

.columns {
display: flex;
gap: 1em;
}
article {
background-color: #90EE90;
color: black;
padding: 15px;
}
ul {
background-color: white;
padding: 2px;
list-style: none;
}

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

لاحظ كيف أن العمود الأخير أكبر من الآخرين بسبب حجمه الجوهري، وهو ما يتعامل معه Flexbox جيدًا. ولكن لجعلها بنفس العرض باستخدام Flexbox، يجب عليك أن تتعارض مع هذا الحجم الجوهري عن طريق إضافة ما يلي:

.columns > * {
flex: 1;
}

هذه هي الحيلة. لكن Grid مناسب بشكل أفضل لحالات مثل هذه. ما عليك سوى تحديد عدد الأعمدة، وستكون جاهزًا للبدء:

.columns {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 1em;
}

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

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

إذن متى يجب عليك استخدام Grid أو Flexbox؟

باختصار، تعد CSS Grid رائعة عندما تريد تحكمًا منظمًا من وجهة نظر الوالدين، مع حجم متساوٍ من الأعمدة بغض النظر عن حجم محتوياتها الفردية.

من ناحية أخرى، يعد Flexbox مثاليًا عندما تريد نظامًا أكثر مرونة يعتمد على الحجم الجوهري للعناصر.