We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

العلاقة بين التنسيق الشبكي وطرق التنسيق الأخرى

ما زال العمل جارٍ على هذه الترجمة.

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

نظام الشبكة ونظام الأجزاء المرنة

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

النسق ذو بعد واحد مقارنة مع النسق ذو بعدين

سنستعمل مثالا بسيطا لإظاهر الإختلاف المتواجد بين النسق ذو بعد واحد والنسق ذو بعدين.

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

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

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
.wrapper {
  display: flex;
  flex-wrap: wrap;
}
.wrapper > div {
  flex: 1 1 200px;
}

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

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

نفس التنسيق باستعمال نظام الشبكات

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

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

من بين الأسئلة البسيطة التي يتوجب على كل مصمم طرحها عند محاولة الاختيار بين نظام الأجزاء المرنة و نظام الشبكة هي:

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

المحتوى الخارجي أو النسق الداخلي؟

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

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

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

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

المحاذات بين الأجزاء

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

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

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

في المثال الأول والذي يستعمل نظام الأجزاء المرنة، نتوفر على حاوية (وعاء) بها ثلاثة عناصر. قمنا بتحديد ارتفاع هاته الحاوية المرنة من خلال إعطاء قيمة للخاصية min-height للفئة wrapper. ولكي نبدأ ترتيب العناصر داخل هاته الحاوية المرنة انطلاقا من النهاية قمنا بإعطاء القيمة flex-end للخاصية align-items. نريد كذلك إلغاء خاصية التمدد الإفتراضية للعنصر box1 وجعله يتمدد ليحتل كل ارتفاع هاته الحاوية بالإضافة لذلك قمنا بإعطاء القيمة stretch للخاصية align-self بالإضافة قمنا بإعطاء هاته الخاصية القيمة flex-start بالنسية للعنصر box2 لكي يقوم بوضع نفسه (يصطف) انطلاقا من نقطة بداية هاته الحاوية المرنة.

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>
.wrapper {
  display: flex;
  align-items: flex-end;
  min-height: 200px; 
}
.box1 {
  align-self: stretch;
}
.box2 {
  align-self: flex-start;
}

 المحاذاة في نظام الشبكات

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

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  align-items: end;
  grid-auto-rows: 200px;
}
.box1 {
  align-self: stretch;
}
.box2 {
  align-self: start;
}

الوحدة fr و flex-basis

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

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

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

الملأ الآلي لمسارات الشبكة

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

في المثال التالي، استعملت الخاصية auto-fill عوضا عن القيم الرقيمة داخل الدالة repeat و تحديد قيمة 200 بيكسل لمجموع هاته المسارات. أي أن هاته الشبكة سوف تعمل على إنشاء العدد الكافي من أعمدة المسارات لتتناسب مع حجم الحاوية.

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, 200px);
}

عدد المسارات المرن

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

<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

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

Grid and absolutely positioned elements

Grid interacts with absolutely positioned elements, which can be useful if you want to position an item inside a grid or grid area. The specification defines the behavior when a grid container is a containing block and a parent of the absolutely positioned item.

A grid container as containing block

To make the grid container a containing block you need to add the position property to the container with a value of relative, just as you would make a containing block for any other absolutely positioned items. Once you have done this, if you give a grid item position: absolute it will take as its containing block the grid container or, if the item also has a grid position, the area of the grid it is placed into.

In the below example I have a wrapper containing four child items. Item three is absolutely positioned and also placed on the grid using line-based placement. The grid container has position: relative and so becomes the positioning context of this item.

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">
   This block is absolutely positioned. In this example the grid container is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the area it has been placed into.
  </div>
  <div class="box4">Four</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-auto-rows: 200px;
  grid-gap: 20px;
  position: relative;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: absolute;
  top: 40px;
  left: 40px;
}

You can see that the item is taking the area from grid row line 2 to 4, and starting after line 1. Then it is offset in that area using the top and left properties. However, it has been taken out of flow as is usually for absolutely positioned items and so the auto-placement rules now place items into the same space. The item also doesn’t cause the additional row to be created to span to row line 3.

If we remove position: absolute from the rules for .box3 you can see how it would display without the positioning.

A grid container as parent

If the absolutely positioned child has a grid container as a parent but that container does not create a new positioning context, then it is taken out of flow as in the previous example. The positioning context will be whatever element creates a positioning context as is common to other layout methods. In our case, if we remove position: relative from the wrapper above, positioning context is from the viewport, as shown in this image.

Image of grid container as parent

Once again the item no longer participates in the grid layout in terms of sizing or when other items are auto-placed.

With a grid area as the parent

If the absolutely positioned item is nested inside a grid area then you can create a positioning context on that area. In the below example we have our grid as before but this time I have nested an item inside .box3 of the grid.

I have given .box3 position relative and then positioned the sub-item with the offset properties. In this case, the positioning context is the grid area.

<div class="wrapper">
  <div class="box1">One</div>
  <div class="box2">Two</div>
  <div class="box3">Three
    <div class="abspos">
     This block is absolutely positioned. In this example the grid area is the containing block and so the absolute positioning offset values are calculated in from the outer edges of the grid area.
    </div>
  </div>
  <div class="box4">Four</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  grid-auto-rows: 200px;
  grid-gap: 20px;
}
.box3 {
  grid-column-start: 2;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 3;
  position: relative;
}
.abspos {
  position: absolute;
  top: 40px;
  left: 40px;
  background-color: rgba(255,255,255,.5);
  border: 1px solid rgba(0,0,0,0.5);
  color: #000;
  padding: 10px;
}

Grid and display: contents

A final interaction with another layout specification that is worth noting is the interaction between CSS Grid Layout and display: contents. The contents value of the display property is a new value that is described in the Display specification as follows:

“The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree.”

If you set an item to display: contents the box it would normally create disappears, and the boxes of the child elements appear as if they have risen up a level. This means that children of a grid item can become grid items. Sound odd? Here is a simple example. In the following markup, I have a grid and the first item on the grid is set to span all three column tracks. It contains three nested items. As these items are not direct children, they don’t become part of the grid layout and so display using regular block layout.

<div class="wrapper">
  <div class="box box1">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
  </div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
}

If I now add display: contents to the rules for box1, the box for that item vanishes and the sub-items now become grid items and lay themselves out using the auto-placement rules.

<div class="wrapper">
  <div class="box box1">
    <div class="nested">a</div>
    <div class="nested">b</div>
    <div class="nested">c</div>
  </div>
  <div class="box box2">Two</div>
  <div class="box box3">Three</div>
  <div class="box box4">Four</div>
  <div class="box box5">Five</div>
</div>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(100px, auto);
}
.box1 {
  grid-column-start: 1;
  grid-column-end: 4;
  display: contents;
}

This can be a way to get items nested into the grid to act as if they are part of the grid, and is a way around some of the issues that would be solved by subgrids once they are implemented. You can also use display: contents in a similar way with flexbox to enable nested items to become flex items.

As you can see from this guide, CSS Grid Layout is just one part of your toolkit. Don’t be afraid to mix it with other methods of doing layout, to get the different effects you need.

Document Tags and Contributors

المساهمون في هذه الصفحة: harchaoui
آخر مَن حدّثها: harchaoui,