شرح تخطيط شبكة CSS: fr، Gap vs Flexbox

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

الشيء الذي أبعدني عن الشبكة لفترة طويلة هو بناء الجملة. grid-template-columns: repeat(3, minmax(0, 1fr)) ليست عبارة تتدحرج من الأصابع، والعلاقة بين المسارات التي تعلنها والمربعات التي تظهر ليست واضحة حتى ترى حدوثها بضع عشرات من المرات. تلك الفجوة بين &quot؛ أعرف ما أريده واقتباسه؛ و&quot؛ أعرف الخاصية التي تنتجها واقتباسها؛ هو بالضبط ما يغلقه المولد.

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

ليرة تركية؛DR: CSS Grid هو نموذج تخطيط ثنائي الأبعاد يتحكم في الصفوف والأعمدة في نفس الوقت. الحاوية تقودها من خلال grid-template-columns، grid-template-rows، gap، والأربعة يبررون الخصائص ويحاذونها. يعرض هذا المولد كل هذه العناصر، ويعرض معاينة مباشرة، ويصدر CSS نظيفًا يستخدم repeat() و ال fr وحدة. نظرًا لأن المعاينة تعرض نفس الإعلانات التي تخرجها، فإن ما تراه هو بالضبط ما تلصقه. يتم تشغيله بالكامل في متصفحك بدون تسجيل.

ما هي المشكلة التي يحلها مولد شبكة CSS؟

الصعوبة في CSS Grid ليست في أنها معقدة. إنه مجرد. أنت تصف بنية (&quot؛ ثلاثة أعمدة متساوية مع القليل من المسافة بينها وبينquot؛) ويقوم المتصفح بحساب الشكل الهندسي. هذا المراوغة هو بيت القصيد، لأنه هو ما يجعل الشبكات تستجيب دون استعلام وسائط واحد. ولكن من الصعب الاحتفاظ بالمراوغة في رأسك. لا يمكنك النظر إلى repeat(3, 1fr) واشعر بالنتيجة على الفور بالطريقة التي يمكنك من خلالها النظر إلى شبكة الصناديق المعروضة.

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

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

ما هي الخصائص التي تتحكم فيها حاوية الشبكة؟

تقوم شبكة CSS، مثل flexbox، بتقسيم المسؤولية بين الحاوية وعناصرها. تحدد الحاوية المسارات والبنية العامة، وهذا هو المكان الذي تعيش فيه معظم قرارات التخطيط، لذا فهو المكان الذي يركز عليه المولد. إليك ما تفعله كل خاصية حاوية.

ملكية	ما يتحكم فيه	القيم المشتركة
grid-template-columns	عدد وحجم الأعمدة	repeat(3, 1fr)، 200px 1fr، auto
grid-template-rows	عدد وحجم الصفوف	repeat(2, auto)، 100px، 1fr
gap	المسافة بين المسارات	أي طول، على سبيل المثال 16px أو 20px 10px
justify-items	موضع العنصر على طول محور الصف	stretch، start، center، end
align-items	موضع العنصر على طول محور العمود	stretch، start، center، end
justify-content	تتبع الموضع عندما تكون الشبكة أضيق من الحاوية الخاصة بها، على محور الصف	start، center، space-between
align-content	تتبع الموقف على محور العمود	start، center، space-between

النموذج العقلي الذي يصنع هذه العصا هو التمييز بين المسارات والعناصر. grid-template-columns و grid-template-rows تحديد المسارات، وهي الممرات الفارغة للشبكة. وتقع الفجوة بين تلك الممرات. ال justify-items و align-items ثم تقوم الخصائص بوضع كل عنصر داخل الخلية التي يشغلها، بينما justify-content و align-content ضع مجموعة المسارات بأكملها داخل الحاوية عندما تكون هناك مساحة احتياطية. يحافظ المولد على هذين المستويين منفصلين بصريًا حتى تتمكن من الشعور بالفرق بين نقل عنصر داخل خليته وتحريك الشبكة بأكملها داخل الصفحة.

ماذا تعني وحدة الاب؟

ال fr الوحدة هي جزء من شبكة CSS التي تدفع ثمن النموذج بأكمله، وهي تستحق الفهم بدلاً من النسخ. واحد fr يمثل جزءًا واحدًا من المساحة الحرة في حاوية الشبكة بعد طرح أي أحجام وفجوات ثابتة. إذا كتبت grid-template-columns: 1fr 1fr 1frالحاوية &#39؛ العرض المتاح مقسم إلى ثلاثة أجزاء متساوية. يكتب 2fr 1fr 1fr والعمود الأول يأخذ نصف المساحة بينما يقسم العمودان الآخران الباقي. يعيد المتصفح حساب تلك الكسور في كل تغيير حجم، ولهذا السبب تكون الشبكة القائمة على الكسور سائلة دون أي نقاط توقف.

هذا هو السلوك الذي يجعل الشبكة متفوقة على النسب المئوية لمعظم التخطيطات. مجموعة من 33.33% تتجاهل الأعمدة الفجوة وتفيض، لأن النسب المئوية بالإضافة إلى الفجوات تصل إلى أكثر من الحاوية. يتم حساب وحدات الكسر بعد إزالة الفجوات، لذلك repeat(3, 1fr) مع وجود فجوة تناسب دائما. المولد الافتراضي ل 1fr ولهذا السبب بالضبط، يمكنك مشاهدة ثلاثة أعمدة متساوية تحافظ على نسبها أثناء تغيير الفجوة. إذا كنت تريد عمودًا يحتضن محتواه بدلاً من ذلك، فقم بالتبديل إليه auto، min-content، أو max-content وانظر الفرق على الفور.

كيف يمكنني عمل تخطيط من ثلاثة أعمدة؟

هذا أحد أكثر الأشياء شيوعًا التي يبنيها الناس باستخدام الشبكة، والوصفة عبارة عن سطرين. ضبط الحاوية على display: grid واعطيها grid-template-columns: repeat(3, 1fr). ينتج عن ذلك ثلاثة أعمدة متساوية تتدفق إلى أكبر عدد ممكن من الصفوف حسب احتياجات المحتوى. أضف أ gap ولديك تخطيط البطاقة.

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

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 16px;
}

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

متى يجب أن أستخدم الشبكة فوق flexbox؟

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

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

سؤال	فليكس بوكس	شبكة CSS
أبعاد	محور واحد في وقت واحد	الصفوف والأعمدة معا
الأفضل ل	أشرطة الأدوات، التنقل، صفوف العناصر، علامات التغليف	تخطيطات الصفحة والمعارض ولوحات المعلومات والنماذج
التحجيم مدفوعة	المحتوى، ثم التوزيع	قالب المسار الذي تعلنه
محاذاة	justify-content، align-items	نفس زائد justify-items، align-content
الاستخدام النموذجي	داخل خلية الشبكة	إطار الصفحة أو القسم العام

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

ما الفرق بين الفجوة والمحتوى المبرر والمحتوى المحاذي؟

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

justify-content و align-contentعلى النقيض من ذلك، لا تفعل أي شيء إلا عندما تكون مسارات الشبكة &#39؛ أصغر من الحاوية، مما يترك مساحة احتياطية للتوزيع. إذا كانت جميع أعمدتك ذات عرض بكسل ثابت ولا تملأ الحاوية، justify-content: center سيتم توسيط كتلة المسارات بأكملها، و space-between سوف تدفعهم إلى الحواف. مع fr الأعمدة التي تملأ العرض بالفعل، هذه الخصائص ليس لديها ما توزعه ويبدو أنها لا تفعل شيئًا، وهو مصدر شائع للارتباك. يحذفها المولد من الإخراج عندما يتم تركها في الوضع الافتراضي start، لذا فإن كل سطر في القاعدة المنسوخة هو سطر له تأثير مرئي. إن عادة إصدار إعلانات ذات معنى فقط هي نفسها التي أعتمد عليها في مولد التدرج و ال مولد الظل الصندوقيلأن القاعدة المليئة بخطوط عدم التشغيل هي قاعدة لا يمكنك الوثوق بها في لمحة.

كيف يحافظ المولد على صدقة المعاينة؟

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

اختيار التصميم هذا هو سبب استخدام الإخراج repeat() لأي محور له أكثر من مسار. ينبعث مسار واحد بالحجم العاري، ولكن ينهار اثنان أو أكثر repeat(n, size)، وهو ما سيكتبه الإنسان وما يبقي القاعدة قابلة للقراءة مع نمو العدد. إنه شيء صغير، لكنه الفرق بين المخرجات التي ستشحنها والمخرجات التي ستعيد كتابتها.

بناء شبكة بطاقات سريعة الاستجابة، خطوة بخطوة

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

ولجعله يلتف من تلقاء نفسه دون استعلامات الوسائط، فإن الخطوة التالية في المشروع الحقيقي هي المبادلة repeat(3, 1fr) ل repeat(auto-fill, minmax(240px, 1fr))، والذي يخبر المتصفح أن يناسب أكبر عدد ممكن من الأعمدة التي تبلغ سعتها 240 بكسل وتمديدها لملءها. يمنحك المولد نقطة البداية ذات العد الثابت؛ أن أحد التعديلات يحولها إلى شبكة ذاتية التغليف. إن فهم نقطة البداية هو ما يجعل التحرير واضحًا، وهذه هي الحجة الكاملة لتعلم التخطيط من خلال بنائه بدلاً من لصقه. الحالة الأوسع لتجميع مجموعة من الأدوات التي تعمل بهذه الطريقة موجودة في القطعة الموجودة على مجموعة أدوات مطور الويبوعادات سير العمل وراء ذلك موجودة في أدوات إنتاجية المطور مرشد.

ما هي المتصفحات التي تدعم شبكة CSS؟

يتم دعم CSS Grid في كل متصفح حالي وهي كذلك منذ سنوات. الخصائص التي يصدرها هذا المولد قياسية وغير مسبوقة، لذلك يعمل الإخراج في Chrome وFirefox وSafari وEdge بدون بادئات البائع أو النسخ الاحتياطية لأي متصفح يستهدفه المشروع بشكل واقعي اليوم. gap الملكية في حاويات الشبكة، والتي كانت آخر قطعة هبطت على نطاق واسع، مدعومة عالميًا الآن. وهذا يعني أن CSS الذي تنسخه جاهز للإنتاج كما هو مكتوب، وهو ما لم يكن صحيحًا دائمًا في السنوات الأولى للشبكة وهو أحد أسباب كون النموذج هو الاختيار الافتراضي أخيرًا وليس التحسين التدريجي. بالنسبة للقواعد الأساسية، تعد مواصفات وحدة تخطيط الشبكة CSS من المستوى 1 من W3C هي المصدر الأساسي، وتستحق القراءة بمجرد أن يمنحك المولد الحدس لمتابعتها.

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

الأسئلة المتداولة

ما هو مولد شبكة CSS؟

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

ماذا تعني وحدة fr في شبكة CSS؟

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

ما الفرق بين CSS Grid وflexbox؟

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

كيف يمكنني إنشاء شبكة سريعة الاستجابة؟

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

ما هي خاصية الفجوة في شبكة CSS؟

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

هل الشبكة المولدة CSS آمنة للاستخدام في الإنتاج؟

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

هل يعمل مولد شبكة CSS على الهاتف المحمول؟

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

هل مولد شبكة CSS هذا مجاني؟

نعم. إنه مجاني تمامًا بدون تسجيل ولا علامات مائية ولا حدود للاستخدام. شبكة CSS التي تنتجها هي ملكك لاستخدامها في أي مشروع.