مشكلة إزدياد إرتفاع جميع عناصر الـ Grid

مصطفى اوريك · 12 أكتوبر

السلام عليكم

لدي هذا الكود التالي:

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <div class="grid grid-cols-3 grid-rows-3 gap-2 p-3">
    <div class="bg-neutral-500 flex items-center justify-center text-white text-3xl row-span-3 col-span-2 p-2"></div>
    <div class="bg-neutral-500 flex items-center justify-center text-white text-3xl p-2">Lorem ipsum dolor sit amet
      consectetur adipisicing elit. Excepturi accusamus, ipsam quibusdam consequuntur dolores aliquid perspiciatis
      incidunt culpa tempore suscipit illum enim dolorum a nisi, consectetur et modi velit magni? lor</div>
    <div class="bg-neutral-500 flex items-center justify-center text-white text-3xl p-2"></div>
    <div class="bg-neutral-500 flex items-center justify-center text-white text-3xl p-2"></div>
  </div>
</body>

</html>

مشكلة هذا أنه عندما يزداد ارتفاع عنصر معين من عناصر الـ Grid جميع العناصر الأخرى تزداد كذلك, كيف أحل هذه المشكلة بدون إضافة كود CSS فقط بالـ Tailwind

محمد عاطف17 · 12 أكتوبر

وعليكم السلام ورحمة الله وبركاته.

المشكلة تكمن في السمة grid-rows-3 حيث هذه السمة تحوي الكود التالي :

.grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
}

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

لذلك يمكنك حذف تلك السمة grid-rows-3 وستجد أن عنصر سيأخذ الطول الخاص به . ولكن جميع العناصر في نفس الصف سيأخذون نفس الطول .

مشكلة إزدياد إرتفاع جميع عناصر الـ Grid

السؤال

مصطفى اوريك

1 جواب على هذا السؤال

Recommended Posts

محمد عاطف17

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية