Удалите пробелы, вызванные строками сетки, используя элементы с переменной высотой

Это базовый макет страницы:

* {
  margin: 0;
  padding: 0;
}

img {
  width: 100%;
  float: left;
}

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

#test-one {
  grid-column-start: 1;
  grid-column-end: 2;
  width: 100%;
  height: 300px;
}

#test-two {
  grid-column-start: 2;
  grid-column-end: 3;
  width: 100%;
}

#test-three {
  grid-column-start: 2;
  grid-column-end: 3;
  width: 100%;
}
<div id="grid">
  <div id="test-one"><img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Feral_cat_Virginia_crop.jpg"></div>
  <div id="test-two">
    <h2> Hello </h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</div>
  <div id="test-three">
    <h2>Please no gap to top text with the "Hello" headline</h2>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </div>
</div>

Изображение будет иметь определенную высоту. Текстовые области имеют динамическую высоту в зависимости от текста. Между текстовыми блоками с идентификаторами #test-two и #test-three не должно быть вертикального зазора. Можно ли это исправить с помощью нескольких настроек CSS? Или схему надо переделывать?

Добавление: Думаю, работа с настройками grid-row здесь мало поможет, так как высота переменная. Дайте мне знать, если я ошибаюсь.

Вы можете растянуть .test-one на 2 строки (см. grid-row: xx;) в вашем любимом учебнике по сетке), взглянуть на сетку masonry (здесь, в поиске) или даже использовать столбец CSS, если вам это подходит.

G-Cyrillus 22.04.2022 21:35

Эй, спасибо! Что вы имеете в виду под «использовать столбец CSS»?

Anna_B 22.04.2022 21:59

Я добавил больше дубликатов, проверьте последний

Temani Afif 22.04.2022 22:07

@TemaniAfif Спасибо. Я только что проверил другие рекомендации. Может быть, я ошибаюсь, но я думаю, что это совершенно разные вопросы. Так что если я попытаюсь скопировать например что-то из прошлого, то получится: jsfiddle.net/7vaLj39g/2 — И мне не нужно, чтобы он переворачивался, я просто хочу убрать пробел ?

Anna_B 22.04.2022 22:17

это точно такие же проблемы, и третий дубликат дает четкий ответ: jsfiddle.net/fm3osdpw ... вам просто нужно набраться терпения, чтобы понять дубликаты, код и попытки, и, пожалуйста, перестаньте задавать один и тот же вопрос .. он получит всегда закрыто. Изменить и проголосовать за повторное открытие

Temani Afif 22.04.2022 23:05

@TemaniAfif Спасибо! Я умственно отсталый, извините.

Anna_B 22.04.2022 23:24
3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
6
30
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

У вас есть grid-column-gap: 10px; в вашем коде CSS. Это создает промежуток в 10 пикселей между блоками сетки. Попробуй это:

<div id="grid">
  <div id="test-one">Hello Box</div>
  <div id="test-two">Hey Box</div>
  <div id="test-three">Please no top gap to the "Hey Box"</div>
</div>

#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
}

#test-one {
  grid-column-start: 1;
  grid-column-end: 2;
  background-color: red;
  height: 100px;
  width: 100%;
}

#test-two {
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: blue;
  height: 50px;
  width: 100%;
}

#test-three {
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: green;
  height: 50px;
  width: 100%;
}

Извините, но это мне не поможет. Проблема не в промежутке между столбцами сетки, а в пространстве, которое получается из строки сетки.

Anna_B 22.04.2022 21:37
Ответ принят как подходящий

из моего комментария

You can either span .test-one through 2 rows (see grid-row: xx;) in your favorite grid tutorial) , take a look at masonry grid (here in the search) or even use column CSS if that's fine for you. – G-Cyrillus 1 min

вот пример через grid-row-start/end, как вы сделали для столбца:

#grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-column-gap: 10px;
}

#test-one {
  grid-column-start: 1;
  grid-column-end: 2;
  background-color: red;
  grid-row-start: 1;
  grid-row-end:3;
  height: 100px;
  width: 100%;
}

#test-two {
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: blue;
  height: 50px;
  width: 100%;
}

#test-three {
  grid-column-start: 2;
  grid-column-end: 3;
  background-color: green;
  height: 50px;
  width: 100%;
}
<div id="grid">
  <div id="test-one">Hello Box</div>
  <div id="test-two">Hey Box</div>
  <div id="test-three">Please no top gap to the "Hey Box"</div>
</div>

Эй, извини. Мне нужно было обновить свой вопрос. Я хотел опубликовать новый, но его сразу закрыли.

Anna_B 22.04.2022 21:58

@Anna_B не извиняйтесь, некоторые вопросы/проблемы избыточны и могут ссылаться на множество дубликатов. Это случается, не стесняйтесь спрашивать снова, если что-то особенное все еще является для вас проблемой ;) Четкое описание вашей проблемы может привести к еще одному дублированию, в противном случае ответ с конкретным объяснением. Многие из нас время от времени

G-Cyrillus 22.04.2022 22:09

Благодарю вас! Мне кажется, что этот вопрос уже не задавался, но я постараюсь понять все рекомендуемые статьи. Хорошего дня, и еще раз спасибо за ответ.

Anna_B 22.04.2022 22:30

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