3.0 KiB
3.0 KiB
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