Проблема с вложенной встроенной сеткой CSS Grid

У меня есть код сетки css, где у меня есть вложенные элементы div. Вот полный код:

#outer-grid {
  display: grid;
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1px;
  border: 10px solid purple;
}

#outer-grid>div {
  grid-column: 1 / -1;
  background-color: red;
  color: white;
  font-size: 4vw;
  padding: 10px;
}

#inner-grid {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

#inner-grid>div {
  background: salmon;
  padding: 10px;
}

<div id = "outer-grid">
  <div id = "inner-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div id = "inner-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>

Итак, у меня есть div-оболочка, который использует сетку css, и 2 встроенных div, которые используют встроенную сетку, но по какой-то причине не расположены рядом.

Как я могу это исправить?

#outer-grid>div - для чего применяются стили под этим селектором?

— 13.12.2020 17:16

Без особой причины. Любая часть, не относящаяся к структуре, просто игнорируйте

— 13.12.2020 17:20

удалите эту строку: grid-column: 1 / -1; и посмотрите, получится ли у вас нужный макет.

— 13.12.2020 17:21

css css-grid

13.12.2020 17:00

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

119

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Удалите grid-template-rows: 1fr 1fr; и grid-column: 1 / -1;.

#outer-grid {
  display: grid;
  /* grid-template-rows: 1fr 1fr; */
  grid-template-columns: 1fr 1fr;
  grid-gap: 1px;
  border: 10px solid purple;
}

#outer-grid>div {
  /* grid-column: 1 / -1; */
  background-color: red;
  color: white;
  font-size: 4vw;
  padding: 10px;
}

#inner-grid {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5px;
}

#inner-grid>div {
  background: salmon;
  padding: 10px;
}

<div id = "outer-grid">
  <div id = "inner-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
  <div id = "inner-grid">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
  </div>
</div>

Почему я могу добавить только 2 внутренние сетки, прежде чем они обернутся? Могу ли я добавить больше и изменить их размер, а не обернуть?

— 13.12.2020 17:54

@Tomazbyden2000 Tomazbyden2000 В своем вопросе вы не написали, что вам может понадобиться более двух внутренних сеток. Мой ответ относится к вашему коду. Посмотрите здесь, это может быть полезно: css-tricks.com/snippets/css/complete-guide-grid

— 13.12.2020 18:01

@Tomazbyden2000 Tomazbyden2000 это потому, что вы определили внешнюю сетку с двумя столбцами.

— 14.12.2020 13:10

13.12.2020 17:32