freeCodeCamp

3.0 KiB

Raw Blame History

id	title	challengeType	videoUrl	localeTitle
5a94fe4469fb03452672e460	Limit Item Size Using the minmax Function	0		الحد من حجم البند باستخدام وظيفة minmax

Description

هناك وظيفة أخرى مدمجة لاستخدامها مع grid-template-columns grid-template-rows تسمى minmax . يتم استخدامه لتقييد حجم العناصر عند تغيير حجم حاوية الشبكة. للقيام بذلك ، تحتاج إلى تحديد نطاق الحجم المقبول لعنصرك. هنا مثال:

أعمدة قوالب الشبكة: minmax 100 بكسل (50 بكسل ، 200 بكسل) ؛

في التعليمات البرمجية أعلاه ، يتم تعيين grid-template-columns لإنشاء عمودين ؛ الأول بعرض 100 بكسل ، والثاني يحتوي على الحد الأدنى للعرض 50 بكسل والحد الأقصى للعرض 200 بكسل.

Instructions

باستخدام minmax وظيفة، استبدل 1fr في repeat وظيفة مع حجم العمود الذي يحتوي الحد الأدنى للعرض 90px والحد الأقصى للعرض 1fr ، وتغيير حجم لوحة المعاينة لمعرفة التأثير.

Tests

tests:
  - text: <code>container</code> يجب أن يكون من الدرجة على <code>grid-template-columns</code> الممتلكات التي تم تعيينها لتكرار 3 أعمدة مع الحد الأدنى لعرض <code>90px</code> وأقصى عرض لها <code>1fr</code> .
    testString: 'assert(code.match(/.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi), "<code>container</code> class should have a <code>grid-template-columns</code> property that is set to repeat 3 columns with the minimum width of <code>90px</code> and maximum width of <code>1fr</code>.");'

Challenge Seed

<style>
  .item1{background:LightSkyBlue;}
  .item2{background:LightSalmon;}
  .item3{background:PaleTurquoise;}
  .item4{background:LightPink;}
  .item5{background:PaleGreen;}

  .container {
    font-size: 40px;
    min-height: 300px;
    width: 100%;
    background: LightGray;
    display: grid;
    /* change the code below this line */

    grid-template-columns: repeat(3, 1fr);

    /* change the code above this line */
    grid-template-rows: 1fr 1fr 1fr;
    grid-gap: 10px;
  }
</style>

<div class="container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>
  <div class="item4">4</div>
  <div class="item5">5</div>
</div>

Solution

// solution required

3.0 KiB Raw Blame History