كيف نعطي لعنصر Grid إرتفاعا مرنا؟

مصطفى اوريك · 18 فبراير

السلام عليكم

لدي هذا التصميم التالي:

<div class="wrapper">
  <div class="main"></div>
  <div class="aside-bar"></div>
</div>

* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: "main main main aside aside";
  gap: 20px;
  height: 1000vh;
}

.main {
  background-color: red;
  grid-area: main;
  min-height: 400px;
}

.aside-bar {
  background-color: blue;
  grid-area: aside;
}

يمكنكم الإطلاع على نتيجة الكود عبر موقع Codepen من هنا: https://codepen.io/MUSTAPHA-AOURIK-DEV102-/pen/mdooWbj

ما أريد القيام به هو أن أعطي للعنصر main إرتفاعا محددا ومرنا (أي قابل للزيادة في حالة إزداد إرتفاع محتواه), جربت خاصية min-height لكنها لم تعمل, فكيف أقوم بهذا؟

Mustafa Suleiman · 18 فبراير

بالطبع خاصية min-height لا تعمل بشكل صحيح لأن عنصر main يعتمد على إرتفاع العنصر الآب (wrapper) في حساب إرتفاعه.

ولوضع طول بحسب المحتوى فقط، نستخدم قيمة max-content لـ height كالتالي:

.main {
  background-color: red;
  grid-area: main;
  height: max-content;
}

ياسر مسكين · 18 فبراير

بالطبع يجب أن تقوم ببعض التعديلات كي تعمل خاصية ال Height بشكل عادي، يمكنك استخدام قيمة `auto` لارتفاع العنصر الأساسي (`main`) بدلا من `max-content` أو `()minmax`، مع تعيين `height` للعنصر الأب (`wrapper`) ليكون بنفس ارتفاع العنصر الأساسي.
ههذا سيؤدي إلى تحقيق الهدف أيضا يمكنك التعديل عليه بهذا الشكل:

* {
  box-sizing: border-box;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: "main main main aside aside";
  gap: 20px;
  height: auto;
}

.main {
  background-color: red;
  grid-area: main;
  min-height: 400px;
  height: auto;
}

.aside-bar {
  background-color: blue;
  grid-area: aside;
}

بهذا التعديل، العنصر الأساسي (`main`) سيحصل على ارتفاع مرن بناء على احتياجات المحتوى، في حين يكون ارتفاع العنصر الأب (`wrapper`) متناسبا مع ارتفاع العنصر الأساسي.

Mahmoud Hassan19 · 18 فبراير

مرحبا
المشكلة عندك ان main واخد height ال parent الخاص wrapper (1000vh)
لحل هذ المشكلة :
من الممكن تضيف dev بداخل main وتعطيه min-height ويودي نفس الوظيفة

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    * {
    box-sizing: border-box;
  }
  
  .wrapper {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas: "main main main aside aside";
    gap: 20px;
    height: 1000vh;
  }
  
  .main {
    background-color: red;
    grid-area: main;
    /* min-height: 400px; */
  }
  
  .aside-bar {
    background-color: blue;
    grid-area: aside;
  }
  .inside-main{
    background-color: black;
    min-height: 400px;// اعطاء min-height
  }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="main">
            <div class="inside-main"> // انشاء div  داخل  main
                
            </div>
        </div>
        <div class="aside-bar"></div>
      </div>
</body>
</html>

كيف نعطي لعنصر Grid إرتفاعا مرنا؟

السؤال

مصطفى اوريك

3 أجوبة على هذا السؤال

Recommended Posts

Mustafa Suleiman

ياسر مسكين

Mahmoud Hassan19

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية