ورقة غش تخطيط شبكة CSS (Grid)

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

حاوية الشبكة (Grid Container)

الخاصية	القيمة	الوصف
`display`	`grid`	تعريف العنصر كحاوية شبكة
`grid-template-columns`	`100px 1fr`	تحديد عرض الأعمدة
`grid-template-rows`	`100px 1fr`	تحديد ارتفاع الأسطر
`grid-template-areas`	`header header` `sidebar main` `footer footer`	تعريف الشبكة من خلال تسمية المناطق
`grid-column-gap`	`10px`	تحديد المسافة بين الأعمدة
`grid-row-gap`	`10px`	تحديد المسافة بين الأسطر
`grid-gap`	`10px 20px`	تحديد المسافة بين الأسطر والأعمدة في نفس الوقت
`justify-items`	`start`	محاذاة عناصر الشبكة أفقيًا داخل خلايا الشبكة
`align-items`	`start`	محاذاة عناصر الشبكة عموديًا داخل خلايا الشبكة
`justify-content`	`start`	محاذاة الشبكة بأكملها أفقيًا داخل حاوية الشبكة
`align-content`	`start`	محاذاة الشبكة بأكملها عموديًا داخل حاوية الشبكة

الخاصية	القيمة	الوصف
`grid-column`	`1 / 3`	تحديد الأعمدة التي يمتد عليها العنصر
`grid-row`	`1 / 3`	تحديد الأسطر التي يمتد عليها العنصر
`grid-area`	`header`	وضع عناصر الشبكة عن طريق تسمية المناطق
`justify-self`	`start`	محاذاة عنصر شبكة معين أفقيًا داخل خليته
`align-self`	`start`	محاذاة عنصر شبكة معين عموديًا داخل خليته
`grid-column-start`	`1`	تحديد خط بداية العمود للعنصر
`grid-column-end`	`3`	تحديد خط نهاية العمود للعنصر
`grid-row-start`	`1`	تحديد خط بداية السطر للعنصر
`grid-row-end`	`3`	تحديد خط نهاية السطر للعنصر

@media (max-width: 600px) {
  .container {
    grid-template-columns: 1fr;
  }
}

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

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

.container {
  display: grid;
  align-items: center;
}

.container {
  display: grid;
  justify-items: center;
}