Вложенные элементы сетки CSS

У меня проблема с сеткой CSS. Не знаю, возможно ли это вообще.

Моя DOM выглядит так:

<div class = "grid">
  <div class = "nest">Item i want to nested</div>
  <form>
    <div class = "item1">Item 1</div>
    <div class = "item1"> Item 2</div>
  </form>
</div>

Мне нужно поместить элемент "гнездо" между "item1" и "item2"

Я пробовал использовать такую сетку

.grid {
  display: grid;
  .item1 { grid-row: 1}
  .nest {grid-row: 2}
  .item2 {grid-row: 3}
}

но это не сработало. Есть ли возможность вложить элемент в сетку?

Какой CSS вы пытаетесь использовать? Это не похоже на базовый CSS, не столько на display: grid, сколько на тот факт, что вы пытались вложить .item1, .nest '' и .item2 внутрь .grid. Это должно быть что-то вроде .grid{display: grid;} .item1{grid-row:1} .nest{grid-row:2} .item1{grid-row:3}. Не только это, но CSS не перемещает в нее что-то извне формы, это может быть то, для чего вам понадобится фреймворк, например Angular. Не могли бы вы уточнить немного подробнее? Трудно понять, о чем вы хотите спросить

— 30.03.2021 17:03

Вы не можете создать эту вложенную структуру стилей с помощью CSS, вы должны работать с Sass, а не с CSS.

— 30.03.2021 17:13

html css nested css-grid

30.03.2021 16:53

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

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

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

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

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

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

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

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

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

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

Ответы 1

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

Если можно использовать display: contents для формы, это возможно.

.grid {
  display: grid;
}

form {
  display: contents;
}

.item1 {
  grid-row: 1
}

.nest {
  grid-row: 2
}

.item2 {
  grid-row: 3
}

<div class = "grid">
  <div class = "nest">Item i want to nested</div>
  <form>
    <div class = "item1">Item 1</div>
    <div class = "item2"> Item 2</div>
  </form>
</div>

30.03.2021 17:15

Другие вопросы по теме

Как добавить верхний край поля, когда изображение вращается с помощью JS

Компонент Animate с дочерними элементами условного рендеринга

SVG не загружается на живом сервере

Как рассчитать абсолютное положение элемента при наведении на него курсора

Как оставить пробел между заголовком и телом?

Принудительная прокрутка страницы в текстовое поле на мобильном устройстве

Используйте разные анимации Lottie без HTTP-запросов

Кто-нибудь знает, как разместить поле гиперссылки на веб-баннере, чтобы оно зависело от пикселей, а не «слева» или «справа»?

Любая волшебная пуля для увеличения размеров шрифта css во всех подэлементах элемента?

Как выровнять два контейнера по горизонтали для CSS?

Вложенные элементы сетки CSS

Ответы 1

Другие вопросы по теме

Похожие вопросы