Могу ли я эмулировать flex-grow и flex-shrink с помощью CSS Grid layout? - PullRequest
0 голосов
/ 18 февраля 2019

Посмотрите на это поведение 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.Но дело в том, что я не хочу писать никаких дополнительных медиа-запросов вообще.Я хочу получить то же автоматическое поведение, что и для флексбоксов, описанных выше.

Итак, вопрос: возможно ли это?Если да, не могли бы вы предоставить решение?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...