Посмотрите на это поведение footer__column
селектора, сделанного на гибких коробках (вы должны смотреть на большие размеры экрана по крайней мере 1156 пикселей в ширину)
CodePen: https://codepen.io/anon/pen/ZwwGMB?editors=1100 или
.footer {
position: relative;
z-index: 1;
margin-top: 60px;
}
.footer__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.footer__row {
display: flex;
flex-wrap: wrap;
width: 100%;
}
.footer__column {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
flex-grow: 1;
align-content: flex-start;
background-color: #F5F7FC;
width: 0;
min-width: 300px;
padding: 10px;
margin-right: 60px;
margin-bottom: 40px;
}
.footer__side {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.footer__text {
padding-top: 5px;
padding-bottom: 5px;
}
<div class="footer__floor">
<div class="footer__inner">
<div class="footer__row">
<div class="footer__column">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
</div>
<div class="footer__column">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
</div>
<div class="footer__column">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
</div>
</div>
</div>
</div>
Когда последний столбец не помещается в строку, он занимает все доступное пространство в следующей строке ниже.
Он становится доступным из-за flex-grow:1
, min-width:300px;
и flex-shrink:0
.
Я попытался найти точно такое же решение для CSS-сетки, но безуспешно.Я пытался использовать свойство autofill
, но столбец всегда занимает следующую ячейку.
CodePen: https://codepen.io/anon/pen/pGGJBb?editors=1100 или
.footer {
position: relative;
z-index: 1;
margin-top: 60px;
}
.footer__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.footer__grid {
display: grid;
grid-gap: 60px;
grid-template-columns: repeat(auto-fill, minmax(300px, 2fr));
width: 100%;
}
.footer__column {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
flex-grow: 1;
align-content: flex-start;
background-color: #F5F7FC;
width: 0;
min-width: 300px;
padding: 10px;
margin-bottom: 40px;
}
.footer__side {
display: flex;
flex-wrap: wrap;
align-items: center;
}
.footer__text {
padding-top: 5px;
padding-bottom: 5px;
}
<div class="footer__floor">
<div class="footer__inner">
<div class="footer__grid">
<div class="footer__column">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
</div>
<div class="footer__column">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
</div>
<div class="footer__column">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut sint ratione doloremque laboriosam laborum! Id sunt ut corrupti repellat vel autem aut velit enim, harum, eveniet, aliquam reprehenderit ea odio.</p>
</div>
</div>
</div>
</div>
Я знаю, что это возможно с помощью медиазапроса и свойства grid-template: span 2
.Но дело в том, что я не хочу писать никаких дополнительных медиа-запросов вообще.Я хочу получить то же автоматическое поведение, что и для флексбоксов, описанных выше.
Итак, вопрос: возможно ли это?Если да, не могли бы вы предоставить решение?