كيف نعطي لعنصر 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 لكنها لم تعمل, فكيف أقوم بهذا؟

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>

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`) متناسبا مع ارتفاع العنصر الأساسي.

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

السؤال

مصطفى اوريك

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

Recommended Posts

Mahmoud Hassan19

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Mustafa Suleiman

رابط هذا التعليق

شارك على الشبكات الإجتماعية

ياسر مسكين

رابط هذا التعليق

شارك على الشبكات الإجتماعية

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية