أدوات التطوير السرية لكل مبتدئ في برمجة المواقع

لقد كانت خاصية الوضعية (Position) في CSS هي العقبة التي يبدو أن العديد من المطورين يترددون في التغلب عليه.  فهي في الحقيقة صعبة نوعا ما ومحبطة على أقل تقدير. 

متى يجب علي إستخدام الوضعية (Position)؟

هل الوضعية (Position) تكون مطلق (position: absolute) أم نسبي (position: relative)؟ 

لماذا لا تتكدس العناصر فوق بعضها البعض؟

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

خاصية الشبكة (Grid) في CSS

 ظهرت خاصية الشبكة (Grid) في CSS في أبريل من عام 2007 ، ووالتي ساعدت بشكل كبير في معالجة صعوبات تحديد الوضعيات (positions) التي جاءت مع Flexbox في ذلك الوقت. 

عندما يتعامل Flexbox مع بُعد واحد (الصفوف أو الأعمدة) فهو جيد، لكن خاصية الشبكة (Grid) في CSS أفضل بشكل عام للعمل مع بُعدين.

شاهد مثال صوري ليساعدك على الفهم:

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

 لذلك دعونا ندخل في تقديم حلول من خلال خاصية الشبكات (Grid) CSS الفعلية.

 إليك الكود الأساسي الذي أستخدمه على سبيل المثال ، في حالة رغبتك في اختبار الأشياء بنفسك:

/* CSS */

.base-box {
  font-size: 1.5rem;
  width: auto;
  height: 125px;
  margin: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

#container {
  background-color: rgb(241, 194, 194);
}
#box-1 {
  background-color: rgb(75, 79, 105);
}

#box-2 {
  background-color: rgb(197, 40, 119);
}

#box-3 {
  background-color: rgb(54, 202, 228);
}

#box-4 {
  background-color: rgb(36, 233, 52);
}

#box-5 {
  background-color: rgb(238, 179, 90);
}

<!-- HTML -->

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id='container'>
      <div id='box-1' class='base-box'>Div 1</div>
      <div id='box-2' class='base-box'>Div 2</div>
      <div id='box-3' class='base-box'>Div 3</div>
      <div id='box-4' class='base-box'>Div 4</div>
      <div id='box-5' class='base-box'>Div 5</div>
    </div>
</body>
</html>