CSS-сетка | Как автоматически подобрать столбцы разного размера?

Я пытаюсь использовать CSS-сетку (впервые), у меня возникают основные проблемы.

Я создаю нижний колонтитул из трех компонентов.

  #footer-content {
    position: relative;
    margin: 0 auto;
    padding: 0 20px;
    max-width: $max-width;
    width: 100%;
    height: 100%;
    color: white;

    display: grid;
    grid-template-columns: 12% 12% 76%;
}

Для мобильных:

@media only screen and (max-width: 800px) {
  #footer-content {
      grid-template-columns: 50% 50% 100%;
    }
}

Проблема с приведенным выше кодом: третий элемент (ширина 100%) не переносится на следующую строку, а появляется за пределами экрана.

Использование grid-template-columns: repeat(auto-fit, 50% 50% 100%); не работает.

Использование grid-template-columns: repeat(auto-fit, 50%); работает: третий элемент сдвигается вниз, но его ширина составляет всего 50% вместо 100%.

Вопрос: Как я могу использовать сетку CSS для автоматического размещения трех столбцов разного размера?


html css css-grid
person Vingtoft    schedule 08.04.2019    source источник
comment
просто определите только один столбец grid-template-columns: auto;   -  person Temani Afif    schedule 08.04.2019

Ответы (1)


arrow_upward
5
arrow_downward

Столбцы сетки не переносятся, поэтому grid-template-columns: 50% 50% 100%; не имеет смысла для двух столбцов. Вы должны определить ДВА столбца и указать третьему элементу, чтобы он занимал их оба в следующей строке.

.box {
  height: 150px;
  background: lightblue;
  border: 1px solid grey;
}

#footer-content {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-gap: .25em;
}

.box:nth-child(3) {
  grid-column: span 2;
}
<div id="footer-content">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

person Paulie_D    schedule 08.04.2019