Как сделать, чтобы первый элемент сетки охватывал 100%?

Question

У меня есть следующее для рабочего стола, который создает 4 равных столбца все на 25%.

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Однако как я могу изменить их размер в медиа-запросе, чтобы первый столбец переместился на 100%, а остальные столбцы естественным образом обернулись снизу и теперь равны 33,333?% все еще использует CSS-сетки?

.footer-inner {
  display: grid;
  grid-template-columns: 100% 1fr 1fr 1fr; 
  /* AND THIS */
  grid-template-columns: 100% 33.333% 33.333% 33.333%;
}

Answer 1

Вы можете сделать это с помощью grid-column: span 3, установленного на :first-child:

.footer-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 650px) {
  .footer-inner {
    grid-template-columns: repeat(3, 1fr);
  }
  .footer-inner > div:first-child {
    grid-column: span 3;
    border: 1px solid;
  }
}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Answer 2

Вот очень простой метод.Вам нужно всего три строки кода.

Для широких экранов:

.footer-inner {
  display: grid;
  grid-auto-columns: 1fr;
}

.footer-inner > div {
  grid-row: 1;
}



/* non-essential demo styles */
.footer-inner { background-color: gray; grid-gap: 1px; }
.footer-inner > div { background-color: lightgreen; text-align: center; padding: 5px;}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Для узких экранов:

.footer-inner {
  display: grid;
  grid-auto-columns: 1fr;
}

.footer-inner > div:first-child {
  grid-column: span 3;
}



/* non-essential demo styles */
.footer-inner { background-color: gray; grid-gap: 1px; }
.footer-inner > div { background-color: lightgreen; text-align: center; padding: 5px;}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>

Пояснения

широкие экраны

*Свойство 1032 *grid-auto-columns устанавливает ширину неявных столбцов.При установке значения 1fr все созданные столбцы будут занимать одинаковое распределение свободного места в строке.С grid-row: 1, примененным ко всем элементам, они появятся в первой строке.

узкие экраны

Как только вы установите первый элемент, чтобы охватить три неявных столбца, контейнер долженсоздать три столбца.Остальные элементы могут быть аккуратно помещены внизу во вновь созданных столбцах.

---

Наконец, рассмотрите возможность использования fr единиц вместо процентов (например, 33,33%) в размере дорожки.Тогда вам не нужно беспокоиться о факторизации полей и разрывов сетки.Вот еще немного информации: Разница между процентами и франками в CSS Grid Layout

Answer 3

Измените сетку на три столбца и установите первый div, чтобы охватить их все в соответствующей точке.

.footer-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.footer-inner div {
  border: 1px solid grey;
  text-align: center;
}

.footer-inner :first-child {
  grid-column: 1 / -1;
}

<div class="footer-inner">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
</div>