خاصية grid-row-end في لغة CSS

في هذا الدرس 4تصفّح المواضيع

CSS Grid Row End خاصية grid-row-end في لغة CSS

تستخدم خاصية grid-row-end مع العناصر الداخلية لحاوية grid في لغة CSS لتحديد أي صف سوف ينتهي عنده العنصر.

قيم خاصية grid-row-end في لغة CSS:

auto هي القيمة الأفتراضية ويتم عرض العناصر تلقائياً وفقاً لوضعة داخل حاوية grid.
span تحديد عدد الصفوف أو عدد المربعات بشكل رأسي التي سوف يقوم بحجزها العنصر نسبة لحجم الصفوف الأخري وينتهي عند صف أو خلية معينه.
row-line تحديد يبدأ عرض العنصر ينتهي عند رقم line الخط الموجود بعد كل صف.

CSS grid-row-end syntax

طريقة كتابة خاصية grid-row-end في لغة CSS.

HTML

grid-row-end:value;

CSS grid-row-end values

قيم خاصية grid-row-end في لغة CSS.

HTML

grid-row-end:auto|span number|row-line;

CSS grid row end auto خاصية grid-row-end مع القيمة auto في لغة CSS

تستخدم خاصية grid-row-end في لغة CSS والقيمة auto ليتم عرض العناصر تلقائياً وفقاً لوضعة داخل حاوية grid وهي القيمة الأفتراضية.

جرّب بنفسك

CSS grid row end auto

خاصية grid-row-end مع القيمة auto في لغة CSS.

HTML

.one
{
grid-row-end:auto;
}

جرّب بنفسك

CSS grid row end span خاصية grid-row-end مع القيمة span في لغة CSS

تستخدم خاصية grid-row-end في لغة CSS والقيمة auto ليتم تحديد عدد الصفوف أو عدد المربعات بشكل رأسي التي سوف يقوم بحجزها العنصر نسبة لحجم الصفوف الأخري وينتهي عند صف أو خلية معينه.

جرّب بنفسك

CSS grid row end span

خاصية grid-row-end مع القيمة span في لغة CSS.

HTML

.one
{
grid-row-end:span 4;
}

جرّب بنفسك

CSS grid row end row line خاصية grid-row-end مع القيمة row line في لغة CSS

تستخدم خاصية grid-row-start في لغة CSS والقيمة row line لتحديد يبدأ عرض العنصر بداية من رقم line الخط الموجود بعد كل صف.

جرّب بنفسك

CSS grid row start row line

خاصية grid-row-end مع القيمة row line في لغة CSS.

HTML

.one
{
  grid-row-end:3;
}

جرّب بنفسك

CSS grid row start row line four

خاصية grid-row-end مع القيمة row line في لغة CSS.

HTML

.one
{
grid-row-end:4;
}

جرّب بنفسك

CSS grid row start and CSS grid row end

خاصية grid-row-start مع خاصية grid-row-end في لغة CSS.

HTML

.one
{
grid-row-start:1;
grid-row-end:4;
}

جرّب بنفسك

CSS grid row start row line minus

خاصية grid-row-start مع القيمة row line في لغة CSS.

HTML

.five
{
grid-row-end:-1;
}

جرّب بنفسك

خاصية grid-row-end في لغة CSSCSS Grid Row End

CSS Grid Row End خاصية grid-row-end في لغة CSS

CSS grid-row-end syntax

CSS grid-row-end values

CSS grid row end auto خاصية grid-row-end مع القيمة auto في لغة CSS

CSS grid row end auto

CSS grid row end span خاصية grid-row-end مع القيمة span في لغة CSS

CSS grid row end span

CSS grid row end row line خاصية grid-row-end مع القيمة row line في لغة CSS

CSS grid row start row line

CSS grid row start row line four

CSS grid row start and CSS grid row end

CSS grid row start row line minus

سجّل الدخول لحفظ تقدمك

خاصية grid-row-end في لغة CSSCSS Grid Row End

CSS Grid Row End خاصية grid-row-end في لغة CSS

CSS grid-row-end syntax

CSS grid-row-end values

CSS grid row end auto خاصية grid-row-end مع القيمة auto في لغة CSS

CSS grid row end auto

CSS grid row end span خاصية grid-row-end مع القيمة span في لغة CSS

CSS grid row end span

CSS grid row end row line خاصية grid-row-end مع القيمة row line في لغة CSS

CSS grid row start row line

CSS grid row start row line four

CSS grid row start and CSS grid row end

CSS grid row start row line minus

مشاركة

هل كان هذا الدرس مفيدًا؟

سجّل الدخول لحفظ تقدمك