Как убрать расстояние между элементами в GRID сетке?

Question

[Роман Говоров]

Как убрать данное расстояние (это не падинги и не маржины)?


Пример кода тут!

Comments

[maksam07]

Я не специалист в css, но хочу поинтересоваться, а для чего вы каждый "абзац" делаете в сетке? Почему не сделать 2 колонки: красная поменьше, белая побольше, и в белой через дивы или абзацы добавить описание?

[Роман Говоров]

maksam07, это тестовая хрень, грид использую для дальнейшей более гибкой адаптации под мобилу.
Раньше задавал подобный вопрос, но так как там костыли, перешли на грид: Вопрос тут

[maksam07]

Роман Говоров, так снова же, какая цель? Почему именно на таком варианте остановились? Для адаптации под мобилу вполне подходит система сеток через row, col и breakpoints. В некоторых случаях я еще пользовался display none/block тоже с breakpoints. Чего нет в бустрапе, допиливаем кастомные стили под бутстраповские breakpoints и готово.

Answer 1

[Fehax]

Привет. Я тоже недавно начал изучать grid, после этой темы
В комментариях человек мне без слов пояснил, что я не так делаю - я плохо знаю документацию.
Советую тебе тоже самое. Почитай, как работает grid. А именно вбей в гугле - вертикальное позиционирование в грид контейнере (justify-items: center;align-items: center;)
Я предлагаю ещё одно решение на флексах. Оборочаиваем твои текстовые элементы в флекс-обёртку. Задаём ей такое, либо то, что тебе нужно
flex-direction: column ( чтобы элементы были вертикально )
align-items: center (прижимает их к центру по горизонтали слева и справа )
justify-content: center (прижимает их к центру сверху и снизу )

Comments

[Роман Говоров]

Так у меня установлен justify-items: center; и align-items: center; но оно не работает, по этому я здесь

[Fehax]

Роман Говоров,

[Fehax]

Fehax, сорри, я увидел, тут бутстрап поверх задан. Не разбираюсь
Можно каждый элемент отдельно отцентрировать

.title{align-self: end;}
.desc {align-self: start;}
.list {align-self: end;}
.button {align-self: start;}

Дальше уменьшить высоту descr на auto, по контенту, а последний элемент растянуть. Костыль, но он сработает. Весь контент будет "в центре", если нужно по центру всё сделать. Думаю, ты понял меня)
Сделай через flex, будет лучше всего