Положения значений в grid-template работают по разному

Question

Я использую значения fr или 0 в сетке grid в зависимости от разных размеров экрана. Проблема в том, что если значение 0 стоит в конце сетки то оно не работает и элемент всё равно отображается. Если 0 стоит в любом другом месте то все нормально работает.

пример

<!doctype html>
<html lang="en">
<head>
<title>grid bad</title>
</head>
<style>
.grid_normal {
    width: 500px;
    display: grid;
    float: left;
    grid-template-columns: 1fr 1fr 1fr 0 1fr;
    background-color: #4dd963;
    padding: 15px;
}

.grid_bad {
    width: 500px;
    display: grid;
    float: left;
    place-items: end left;
    grid-template-columns: 1fr 1fr 1fr 1fr 0;
    background-color: #ff6163;
    margin-top: 200px;
    padding: 15px;
}

.element {
    width: 50px;
    height: 50px;
    font-size: 16px;
    background-color: #E4DA4A;
    box-sizing: border-box;
    padding: 50px;
    border: 1px solid #1e549d;
}

</style>
<body>

<div class="grid_normal">
<div class="element">№1</div>
<div class="element">№2</div>
<div class="element">№3</div>
<div class="element">№4</div>
<div class="element">№5</div>
</div>



<div class="grid_bad">
<div class="element">№1</div>
<div class="element">№2</div>
<div class="element">№3</div>
<div class="element">№4</div>
<div class="element">№5</div>

</div>

</body>
</html>

codepen

Не понимаю как теперь использовать сетку grid с такими глюками в адаптивной верстке

БЛОГ НА HUSL

Положения значений в grid-template работают по разному

Ответы (0 шт):