Grid. Min-width и auto
Элементу задали min-width:
Он фигурирует в формировании колонки auto в грид сетке:
Размер сетки 300х300 пикселей, padding:5px.
Почему не срабатывает min-width, и элемент с классом «m» отображается ниже?
Результат:
Код:
.m{
min-width:100px;
background-color:lightblue;
text-align:center;
}Он фигурирует в формировании колонки auto в грид сетке:
grid-template-columns:minmax(95px, 1fr) auto;
Размер сетки 300х300 пикселей, padding:5px.
Почему не срабатывает min-width, и элемент с классом «m» отображается ниже?
Результат:
Код:
<!DOCTYPE html>
<html>
<head>
<title>Grid</title>
<style>
body{
margin:0;
padding:0;
}
.m{
min-width:100px;
background-color:lightblue;
text-align:center;
}
.a{
margin:50px;
border:1px solid #000;
padding:5px;
display:grid;
grid-template-columns:minmax(95px, 1fr) auto;
grid-template-rows:min-content 100px;
width:300px;
height:300px;
}
.p{
position:fixed;
left:55px;
top:55px;
background-color:lime;
opacity:0.3;
width:150px;
height:150px;
}
.s{
position:fixed;
left:205px;
top:205px;
background-color:maroon;
opacity:0.3;
width:150px;
height:150px;
}
.g{
border:1px solid navy;
}
</style>
</head>
<body>
<div class="a">
<img src="Ucheb/IMG/3grid.jpg" alt="Грид" class="g"><!--красный листик размер 180х149 пикселей-->
<p class="m">Унылая пора, очей очарованье. Приятна мне твоя...</p>
<img src="Ucheb/IMG/31grid.jpg" alt="Грид"><!--маленький красный листик-->
<p style="color:orangered">Унылая пора, очей очарованье. Приятна мне твоя...</p>
</div>
<div class="p"></div>
<div class="s"></div>
</body>
</html>