Sep 12 2020 at 22:35

Grid. Min-width и auto

Invite pending

Элементу задали min-width:

.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>

Hubs: