هل تحتاج إلى تصميم صفحة ويب احترافية؟ تعلم CSS Grid اليوم!

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

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

هل تحتاج إلى تصميم صفحة ويب احترافية؟ تعلم CSS Grid اليوم

الصفوف والأعمدة في CSS Grid: أساس التصميم الشبكي

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

الخطوة الأولى: تحديد الحاوية

ابدأ بتحديد خاصية display: grid; على العنصر الحاوي (Container). بعد ذلك، استخدم الخصائص grid-template-rows وgrid-template-columns لتحديد عدد وأبعاد الصفوف والأعمدة.

كود HTML

<div class="container">
  <div class="box" id="one">Box One - 1</div>
  <div class="box" id="two">Box Two - 2</div>
  <div class="box" id="three">Box Three - 3</div>
  <div class="box" id="four">Box Four - 4</div>
  <div class="box" id="five">Box Five - 5</div>
  <div class="box" id="sex">Box Sex - 6</div>
</div>

كود CSS

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 300px 300px 300px;
    grid-template-rows: 150px 150px;
    grid-gap: 10px;
    border: 2px solid #fff;
    padding: 10px;
}

.box {
    background-color: orange;
    color: #000;
    font-weight: bold;
    border: 2px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

Rows & Columns in CSS Grid

المسافات بين العناصر (Gutters)

لتحديد المسافة بين الصفوف والأعمدة، يمكنك استخدام خاصية grid-gap (أو gap في الإصدارات الحديثة). هذه الخاصية تُعرف أيضًا باسم "المزاريب"، وهي تضمن توزيعًا منظمًا للعناصر داخل الشبكة.

• على سبيل المثال، إذا حددت قيمة 10px للـ grid-gap، فإن المسافة بين كل صف وعمود ستكون 10 بكسل.

إعداد الشبكة: تحليل المثال السابق

• سيكون لدينا شبكة تحتوي على ثلاقة أعمدة وثلاثة صفوف. في هذه الحالة:
  1. كل عمود سيكون 300 بكسل.
  2. كل سف سيكون 150 بكسل.
• لتوسيع الشبكة لتحتوي على ثلاثة أعمدة:
  1. استخدم الخاصية grid-template-columns وحدد القيم لكل عمود (مثال: 300px 300px 300px).
  2. إذا تجاوزت الأبعاد عرض الشبكة، قم بزيادة عرض الشبكة باستخدام width: 100%; لضمان احتواء العناصر داخلها.

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

التحكم في المساحات التي تشغلها العناصر في CSS Grid

في CSS Grid، يمكنك التحكم في المساحات التي يشغلها كل عنصر داخل الشبكة باستخدام خصائص مثل:

1. grid-row-start و grid-column-start

• grid-row-start: تحدد بداية العنصر على المحور العمودي (الصفوف).
• grid-column-start: تحدد بداية العنصر على المحور الأفقي (الأعمدة).

2. grid-row-end و grid-column-end

• grid-row-end: تحدد نهاية العنصر على المحور العمودي.
• grid-column-end: تحدد نهاية العنصر على المحور الأفقي.

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

مثال عملي

كود HTML:

<div class="container">
  <header id="header">Header</header>
  <aside id="sidebar">Sidebar</aside>
  <main id="main">Main</main>
  <footer id="footer">Footer</footer>
</div>

كود CSS:

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 150px 150px 150px 150px;
    grid-gap: 10px;
    border: 2px solid #fff;
    padding: 10px;
}

.container > * {
    background-color: orange;
    color: #000;
    font-weight: bold;
    border: 2px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

#header {
    grid-column-start: 1;
    grid-column-end: 4;
}

#sidebar {
    grid-column-start: 1;
    grid-column-end: 2;
    /* grid-row-start: 2;
    grid-row-end: 4; */
  grid-row: span 2;
}

#main {
    grid-column-start: 2;
    grid-column-end: 4;
    /* grid-row-start: 2;
    grid-row-end: 4; */
  grid-row: 2 / 4;
}

#footer {
    /* grid-column-start: 1;
    grid-column-end: 4; */
  grid-column: 1 / 4;
}

CSS Grid Row & Column (Start and End)

شرح الكود

• grid-row-start و grid-column-start:
  1. تحدد مكان بداية العنصر في الشبكة.
  2. على سبيل المثال، عنصر Item 1 يبدأ من الصف الأول والعمود الأول.
• grid-row-end و grid-column-end:
  1. تحدد مكان نهاية العنصر.
  2. على سبيل المثال، عنصر Item 1 يمتد إلى الصف الثالث والعمود الثالث.
• إختصار grid-row:
  1. تحدد مكان بداية ونهاية العنصر فى الصفوف.
  2. يفصل بين القيمتين بالفاصلة /.
  3. على سبيل المثال عنصر main.
• إختصار grid-column:
  1. تحدد مكان بداية ونهاية العنصر فى الأعمدة.
  2. يفصل بين القيمتين بالفاصلة /.
  3. على سبيل المثال عنصر footer.
• span:
  1. يمكن استخدام span لتحديد عدد الصفوف أو الأعمدة التي يجب أن يمتد إليها العنصر.
  2. على سبيل المثال، عنصر sidebar يمتد عبر صفين.

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

المناطق الشبكية (Grid Areas) في CSS Grid

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

ما هي المناطق الشبكية؟

المناطق الشبكية هي اختصار يتيح لك تحديد المساحات التي تشغلها العناصر عبر خصائص مثل:

• grid-row-start
• grid-column-start
• grid-row-end
• grid-column-end

بدلاً من استخدام هذه الخصائص بشكل منفصل، يمكنك استخدام أسماء مناطق مخصصة تُعين للعناصر من خلال الخاصية grid-area.

كيف تعمل المناطق الشبكية؟

لإنشاء شبكة تحتوي على مناطق مسماة:

1. استخدم خاصية grid-template-areas لتحديد تخطيط الشبكة باستخدام سلاسل نصية.
2. قم بإعطاء كل عنصر داخل الشبكة معرفًا (ID) أو اسمًا يتطابق مع اسم المنطقة المخصصة في الشبكة.

مثال عملي
إذا كنت تصمم مدونة بسيطة، يمكن إعداد تخطيط يتضمن:

• رأس (Header) يمتد عبر العرض الكامل.
• شريط جانبي (Sidebar) على اليسار.
• محتوى رئيسي (Main Content) في المنتصف.
• تذييل (Footer) في الأسفل.

ليكتمل التصميم النهائى بالشكل الأتى.

Grid Areas

كود HTML

<div class="container">
  <header id="header">Header</header>
  <aside id="sidebar">Sidebar</aside>
  <main id="main">Main</main>
  <footer id="footer">Footer</footer>
</div>

كود CSS
إعداد الشبكة باستخدام grid-template-areas مع بعض الألوان للتمييز:

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 150px 150px 150px 150px;
    grid-template-areas: 
    "header header header"
    "sidebar main main"
    "sidebar main main"
    "footer footer footer";
    grid-gap: 10px;
    border: 2px solid #fff;
    padding: 10px;
}

.container > * {
    background-color: orange;
    color: #000;
    font-weight: bold;
    border: 2px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

تعيين المناطق للعناصر:

#header {
    grid-area: header;
}

#sidebar {
    grid-area: sidebar;
}

#main {
    grid-area: main;
}

#footer {
    grid-area: footer;
}

• تأكد من أن عدد الأعمدة في جميع الصفوف متسق في grid-template-areas.
• يمكنك ضبط أبعاد الأعمدة والصفوف لتناسب احتياجاتك باستخدام grid-template-columns وgrid-template-rows.

الشبكة المتقدمة (Advanced Grid) في CSS

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

1. وحدة fr

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

Fr Unit in CSS Grid

كود HTML:

<div class="container">
  <div class="box" id="one">Box One - 1</div>
  <div class="box" id="two">Box Two - 2</div>
  <div class="box" id="three">Box Three - 3</div>
  <div class="box" id="four">Box Four - 4</div>
  <div class="box" id="five">Box Five - 5</div>
  <div class="box" id="sex">Box Sex - 6</div>
</div>

كود CSS:

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 150px 150px 150px;
    grid-gap: 10px;
    border: 2px solid #fff;
    padding: 10px;
}

.box {
    background-color: orange;
    color: #000;
    font-weight: bold;
    border: 2px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

2. استخدام repeat لتكرار الأعمدة

بدلاً من كتابة 1fr لكل عمود، يمكننا استخدام خاصية repeat لتكرار الأعمدة وتسهيل كتابة الكود:

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 150px 150px 150px;
    grid-gap: 10px;
    border: 2px solid #fff;
    padding: 10px;
}

Repeat in CSS Grid

هذا الكود يكرر 1fr لثلاثة أعمدة، مما يجعل الكود أكثر نظافة وقوة.

3. استخدام minmax

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

مثال عملي

لنأخذ مثالًا لتوضيح كيفية استخدام هذه الميزات:

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, minmax(150px, auto));
    grid-gap: 10px;
    border: 2px solid #fff;
    padding: 10px;
}

Minmax in CSS Grid

في هذا المثال:

• grid-template-rows: يتم تخصيص الصفوف الثلاثة بارتفاع 150 بكسل كحد أدنى، بينما إذا زاد المحتوى داخل الصندوق يتمدد ليحافظ على المحتوى داخله.
• grid-template-columns: يتم تقسيم الأعمدة إلى ثلاثة أعمدة متساوية باستخدام repeat(3, 1fr).

4. الصفوف التلقائية باستخدام grid-auto-rows

إذا كنت تريد أن تكون الصفوف ديناميكية، بحيث تتكيف مع المحتوى، يمكنك استخدام grid-auto-rows مع minmax. هذه الطريقة مفيدة عندما لا تعرف مسبقًا عدد الصفوف التي ستكون موجودة (مثلما يحدث في خلاصة الأخبار على Facebook).

Auto Rows in CSS Grid

كود HTML:

<div class="container">
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
  <div class="box">Box</div>
</div>

كود CSS:

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 250px);
    grid-auto-rows: minmax(150px, auto);
    grid-gap: 10px;
    border: 2px solid #fff;
    padding: 10px;
}

Auto Rows with Long Content in CSS Grid

هنا، minmax(150px, auto) تعني أن كل صف سيكون له ارتفاع لا يقل عن 150 بكسل، ولكن يمكن أن يكون أكبر إذا كان المحتوى يتطلب ذلك.

5. الأعمدة التلقائية باستخدام grid-auto-columns

خاصية grid-auto-columns في CSS Grid تُستخدم لتحديد حجم الأعمدة التي يتم إنشاؤها تلقائيًا عندما يحتاج المحتوى إلى أعمدة إضافية لا تتوفر في تعريف الشبكة الأساسي.

• وظيفتها: تحدد عرض الأعمدة التلقائية التي يتم إنشاؤها عند إدراج عناصر خارج الشبكة المحددة.
• متى تُستخدم؟: عندما يحتوي العنصر على أعمدة تتجاوز الأعمدة المحددة في الخاصية grid-template-columns.

مثال عملى:

كود HTML:

<div class="container">
  <div class="box" id="one">Box One - 1</div>
  <div class="box" id="two">Box Two - 2</div>
  <div class="box" id="three">Box Three - 3</div>
  <div class="box" id="four">Box Four - 4</div>
  <div class="box" id="five">Box Five - 5</div>
  <div class="box" id="sex">Box Sex - 6</div>
</div>

كود CSS:

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-rows: repeat(3, 150px);
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: 100px;
    grid-gap: 10px;
    border: 2px solid #fff;
    padding: 10px;
}

#four {
    grid-column: 4;
}

#five {
    grid-column: 5;
}

Auto Columns in CSS Grid

شرح الكود

• grid-template-columns:
  • يحدد ثلاث أعمدة بحجم ثابت 1fr.
• grid-auto-columns:
  1. يحدد عرض الأعمدة التلقائية ليكون 100px.
  2. عندما يحتاج العنصر الرابع والخامس إلى أعمدة إضافية خارج الأعمدة المحددة، يتم إنشاء أعمدة تلقائية بعرض 100px.
• grid-column:
  1. تستخدم لتحديد مكان العنصر على الشبكة.
  2. four و five يمتدان إلى الأعمدة التلقائية.

تخصيص الأعمدة التلقائية

يمكنك استخدام وحدات مختلفة لتخصيص عرض الأعمدة التلقائية، مثل:

• نسبة مئوية (%): grid-auto-columns: 25%;
• الوحدات المرنة (fr): grid-auto-columns: 1fr;
• قيم ثابتة: grid-auto-columns: 200px;
• القيم الأدنى والأقصى: grid-auto-columns: minmax(100px, 1fr);

فوائد grid-auto-columns

• تحسين تخطيط الشبكات الديناميكية.
• تقليل التعقيد عند التعامل مع محتوى يتجاوز التعريف الأساسي.
• توفير المرونة لتوسيع الشبكة بشكل منظم.

نصيحة إضافية

• لا تستخدم الأعمدة التلقائية إذا كنت تعرف مسبقًا عدد الأعمدة المطلوبة؛ استخدم grid-template-columns بدلاً من ذلك لتحقيق تخطيط ثابت ومنظم.

6. خاصية grid-auto-flow

تعريفها:
تُحدد اتجاه إضافة العناصر الجديدة تلقائيًا (الصفوف أم الأعمدة).

القيم المتاحة:

• row: الإضافة للصفوف.
• column: الإضافة للأعمدة.
• dense: تعبئة المساحات الفارغة.

مثال عملي:
كود HTML

<div class="container">
  <div class="box" id="one">Box One - 1</div>
  <div class="box" id="two">Box Two - 2</div>
  <div class="box" id="three">Box Three - 3</div>
  <div class="box" id="four">Box Four - 4</div>
  <div class="box" id="five">Box Five - 5</div>
  <div class="box" id="sex">Box Sex - 6</div>
  <div class="box" id="seven">Box Seven - 7</div>
</div>

كود CSS:

.container {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-rows: repeat(3, 150px);
    grid-template-columns: repeat(3, 1fr);
    grid-auto-columns: 100px;
    grid-auto-flow: column dense;
    grid-gap: 10px;
    border: 2px solid #fff;
    padding: 10px;
}

Auto Flow in CSS Grid

• يتبين من خلال الصورة السابقة أن العناصر الجدسدة يتم إضافتها للأعمدة وليس للصفوف.

7. خاصية grid (مختصرة)

تعريفها:
اختصار لخصائص مثل: grid-template-rows, grid-template-columns, وgrid-template-areas.

القيمة:

  grid: 
    "header header" 50px
    "sidebar main" auto
    "footer footer" 50px
    / 150px 1fr;

مثال عملي:

<div class="container">
  <header id="header">Header</header>
  <nav id="sidebar">Sidebar</nav>
  <main id="main">
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Impedit consectetur laborum distinctio expedita, voluptatem ex consequatur delectus in excepturi voluptatibus recusandae quo autem obcaecati, repudiandae, eos iure quos veniam dolorem.</p>
    <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. In praesentium quo temporibus illo. Dolores eveniet ad pariatur! Incidunt, deserunt. Magni autem atque possimus id voluptas similique, facere perspiciatis dicta tenetur!
    </p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis magnam quidem temporibus. Rerum in ipsam perspiciatis omnis pariatur quaerat, quas, ratione laudantium id itaque dolorem totam nobis adipisci unde quo.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis magnam quidem temporibus. Rerum in ipsam perspiciatis omnis pariatur quaerat, quas, ratione laudantium id itaque dolorem totam nobis adipisci unde quo.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis magnam quidem temporibus. Rerum in ipsam perspiciatis omnis pariatur quaerat, quas, ratione laudantium id itaque dolorem totam nobis adipisci unde quo.</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis magnam quidem temporibus. Rerum in ipsam perspiciatis omnis pariatur quaerat, quas, ratione laudantium id itaque dolorem totam nobis adipisci unde quo.</p>
  </main>
  <footer id="footer">Footer</footer>
</div>

.container {
  display: grid;
  grid: 
    "header header" 50px
    "aside main" 1fr
    "footer footer" 50px
    / 200px 1fr;
}

Grid Property in CSS Grid

شرح الكود:

"header header" 
"sidebar main" 
"footer footer"

• يتم تقسيم الشبكة إلى ثلاثة صفوف:
• الصف الأول: يحتوي على منطقتين باسم header، مما يعني أن الرأس يمتد على عرض الشبكة بالكامل.
• الصف الثاني: يحتوي على منطقتين هما sidebar و main.
  • sidebar يمثل الشريط الجانبي.
  • main يمثل المنطقة الرئيسية للمحتوى.
• الصف الثالث: يحتوي على منطقتين باسم footer، مما يعني أن التذييل يمتد على عرض الشبكة بالكامل.

50px auto 50px

• الصف الأول: ارتفاعه ثابت بـ 50px.
• الصف الثاني: ارتفاعه تلقائي (auto)، بحيث يتكيف مع المحتوى بداخله.
• الصف الثالث: ارتفاعه ثابت بـ 50px.

150px 1fr

• العمود الأول: عرضه ثابت بـ 150px (عادةً مخصص للشريط الجانبي).
• العمود الثاني: عرضه مرن باستخدام 1fr (يمثل نسبة مرنة، ويشغل المساحة المتبقية من الشبكة).

8. الفرق بين grid-gap و gap في CSS

• 1. grid-gap (القديم)

الوصف: خاصية كانت تُستخدم في CSS Grid لتحديد المسافات بين الصفوف والأعمدة في الشبكة.

المحددات:

• grid-row-gap: لتحديد المسافة بين الصفوف.
• grid-column-gap: لتحديد المسافة بين الأعمدة.
• أو يمكن استخدام grid-gap لتحديد المسافتين معًا.

الاعتماد: هذه الخاصية تُعتبر قديمة وتم استبدالها بـ gap في CSS الحديثة.

مثال:

  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px 10px; /* 20px للمسافات بين الصفوف و10px للأعمدة */
  }

• 2. gap (الحديث)

الوصف: خاصية جديدة ومُحسّنة يمكن استخدامها مع كل من CSS Grid و Flexbox، مما يجعلها أكثر شمولية.

المحددات:

• row-gap: لتحديد المسافة بين الصفوف.
• column-gap: لتحديد المسافة بين الأعمدة.
• أو يمكن استخدام gap لتحديد القيمتين معًا. الميزة: gap متوافقة مع تصميمات الشبكات (grid) وتصميمات الصناديق المرنة (flexbox)، مما يوفر مرونة أكبر.

مثال:

  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px 10px; /* نفس التأثير مثل grid-gap */
  }

Gap in CSS Grid

أفضلية الاستخدام

• gap هي الأفضل لأنها معيار حديث وتعمل مع كل من Flexbox و Grid، مما يجعلها الخيار الأمثل للتصميمات المستقبلية.
• إذا كنت تعمل على كود قديم يحتوي على grid-gap، فمن الأفضل تحديثه لاستخدام gap لضمان التوافقية مع المتصفحات الحديثة.

ملاحظة عن الدعم

• gap مدعومة من معظم المتصفحات الحديثة، بما في ذلك Edge وFirefox وChrome وSafari.
• إذا كنت تستهدف متصفحات قديمة، فقد تحتاج إلى اختبار الكود لضمان التوافق.

خصائص توزيع العناصر بإستخدام CSS Grid

1. خاصية align-content

تتحكم في توزيع الشبكة بالكامل على المحور العمودي. كود HTML:

<div class="container">
  <div class="box" id="one">Box One - 1</div>
  <div class="box" id="two">Box Two - 2</div>
  <div class="box" id="three">Box Three - 3</div>
  <div class="box" id="four">Box Four - 4</div>
</div>

كود CSS:

.container {
    width: 90%;
  height: 400px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(2, 100px);
  align-content: center;
    gap: 10px;
    border: 2px solid #fff;
    padding: 10px;
}

.box {
    background-color: orange;
    color: #000;
    font-weight: bold;
    border: 2px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;   
}

• إرتفاع الحاوية مساحتها 400px.
• تأثير المحاذاة العمودية align-content فى المنتصف.

Align Content in CSS Grid

2. خاصية justify-content

تتحكم في توزيع الشبكة بالكامل على المحور الأفقي.

.container {
    width: 90%;
  height: 400px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(2, 100px);
  justify-content: center;
    gap: 10px;
    border: 2px solid #fff;
    padding: 10px;
}

Justify Content in CSS Grid

• إرتفاع الحاوية مساحتها 400px.
• تأثير المحاذاة أفقياٌ justify-content فى المنتصف.

3. خاصية place-content

اختصار لـ align-content و justify-content.

.container {
    width: 90%;
  height: 400px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: repeat(2, 100px);
  grid-template-columns: repeat(2, 100px);
  place-content: center space-between;
    gap: 10px;
    border: 2px solid #fff;
    padding: 10px;
}

Place Content in CSS Grid

4. خاصية align-self

تُحدد محاذاة العنصر على المحور العمودي (داخل الصف).

• القيم:
  
  • start.
  • end.
  • center.
  • stretch.

Align Self in CSS Grid

.container {
    width: 90%;
  height: 400px;
    margin: 0 auto;
    display: grid;
    grid-template-rows: repeat(2, 1fr);
  grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    justify-content: center;
    align-content: center;
    align-items: center;
    justify-items: center;
    border: 2px solid #fff;
    padding: 10px;
}

#one, #two {
    align-self: start;
}

#three, #four {
    align-self: end;
}

5. خاصية justify-self

تُحدد محاذاة العنصر على المحور الأفقي (داخل العمود).

• القيم:
  
  • start.
  • end.
  • center.
  • stretch.

Justify Self in CSS Grid

#one, #two {
    justify-self: start;
}

#three, #four {
    justify-self: end;
}

6. خاصية place-self

اختصار لـ align-self و justify-self.

Place Self in CSS Grid

#one, #two {
    place-self: center start;
}

#three, #four {
    place-self: center end;
}

الفرق بين CSS Grid و Flexbox: معركة الأساليب الحديثة!

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

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

CSS Grid: البطل في إنشاء التخطيطات الكاملة

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

Flexbox: سيد تدفق المحتوى

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

العمل معاً: مزيج القوة

القوة الحقيقية تكمن في الجمع بين CSS Grid وFlexbox. يُمكن استخدام Grid لتحديد الهيكل العام للصفحة، بينما يتم استخدام Flexbox داخل كل قسم من التخطيط لتوزيع العناصر بطريقة ديناميكية.

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

مثال عملي: الجمع بين CSS Grid و Flexbox

لنفهم كيف يمكن لـ CSS Grid و Flexbox العمل معًا، دعونا نلقي نظرة على مثال عملي قمت بإعداده. سنستعرضه سريعًا، وستتعلم خلال الدرس كيف تبني هذا المثال خطوة بخطوة.

إعداد الحاوية

<div class="container">
  <div class="box" id="one">Box One - 1</div>
  <div class="box" id="two">Box Two - 2</div>
  <div class="box" id="three">Box Three - 3</div>
  <div class="box" id="four">Box Four - 4</div>
  <div class="box" id="five">Box Five - 5</div>
</div>

في البداية، أنشأنا حاوية (container) واستخدمنا خاصية display: grid; لتحديدها كشبكة. بعد ذلك، قمنا بضبط الأعمدة والصفوف باستخدام الخاصية grid-template-areas.

توزيع العناصر داخل الشبكة

.container {
    width: 90vw;
    display: grid;
    grid-template-columns: 40vw 40vw;
    grid-template-rows: 25vh 25vh 25vh;
    grid-template-areas: "top top";
    grid-gap: 20px;
    justify-content: center;
    border: 2px solid #fff;
    padding: 10px;
}

.box {
    background-color: blueviolet;
    color: #fff;
    border: 2px solid orange;
    display: flex;
    justify-content: center;
    align-items: center;
}

#one {
    grid-area: top;
}

في هذا المثال، تحتوي الحاوية على خمس عناصر داخلها. الحاوية نفسها تم ضبطها لتكون شبكة (grid)، في حين أن كل عنصر داخل الحاوية تم تعيين خاصية display: flex; له.

• هذا الإعداد يجعل النصوص الموجودة داخل العناصر تظهر في المنتصف.
• إذا قمنا بإزالة خاصية flex من العناصر، ستعود جميع المحتويات إلى الزاوية العلوية اليسرى، ما يظهر أهمية Flexbox في توزيع العناصر.

تحسين التخطيط باستخدام الخصائص المشتركة

رغم أن Flexbox يُستخدم داخل العناصر، إلا أن CSS Grid يدعم تحسين توزيع الحاوية بأكملها. على سبيل المثال، يمكننا استخدام خاصية justify-content: center; لتوسيط الشبكة نفسها.

النتيجة النهائية

CSS Gid with Flexbox

الناتج هو تخطيط شبكي مكون من عمودين وصفين مع عناصر مرتبة بشكل جميل في المنتصف. هذا المثال يُبرز كيف يمكن لـ CSS Grid و Flexbox أن يكمل كل منهما الآخر لإنشاء تصميمات جذابة ومرنة في نفس الوقت.

هذا مجرد بداية لما يمكن تحقيقه باستخدام هاتين الأداتين معًا!

خاتمة

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

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

الأسئلة الشائعة

ما هي CSS Grid وكيف تختلف عن Flexbox؟

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

كيف يمكنني البدء في استخدام CSS Grid؟

للبدء، قم بتعيين الخاصية display: grid على العنصر الحاوي، ثم استخدم خصائص مثل grid-template-columns وgrid-template-rows لتحديد تخطيط الشبكة.

ما هي ميزات CSS Grid التي تجعلها مناسبة لتصميم الصفحات الاحترافية؟

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

هل يمكن استخدام CSS Grid مع تقنيات أخرى مثل Flexbox؟

نعم، يمكن استخدام CSS Grid لتحديد التخطيط الأساسي للصفحة، بينما يتم استخدام Flexbox لتوزيع العناصر داخل الشبكات الفردية.

ما هي أفضل المصادر لتعلم CSS Grid بشكل عملي؟

من أفضل المصادر: CSS-Tricks، وموقع MDN Web Docs، بالإضافة إلى قنوات YouTube المتخصصة في تصميم الويب.

تعديل المقال