Две сетки CSS не выравниваются в одном родительском контейнере

У меня есть две отдельные сетки CSS в одном родительском контейнере.

Первая из двух сеток имеет свойство столбца grid-template-columns: 1fr 2fr;

Второй из 2 имеет grid-template-columns: 1fr 1fr 1fr;

Тем не менее, сетки почему-то не совсем выровнены - текст в верхней сетке должен начинаться во втором столбце (как показано), но он немного не совпадает с сеткой внизу, что вызвано размером столбца. .

Я действительно мог бы обойтись без помещения их обоих в одну и ту же сетку из-за дизайна сайта.

Есть ли способ заставить их выровняться с синтаксисом CSS Grid, не помещая их обоих в одну и ту же сетку?

Кодовое слово: https://codepen.io/emilychews/pen/qzvPqJ

body {
  margin: 0;
  padding: 0;
}

.grid-section {
display: flex;
flex-direction: column;
align-items: center;
}

.row {
width: 80%; 
max-width: 1250px;
}

.grid-column {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 1rem;
}

/* adds space to main grid title*/
.grid-row.row-1 .grid-column {
  margin: 5rem 0;
  grid-template-columns: 1fr 2fr
}

.grid-image {
  height: 10rem;
  width: 100%;
  background: lightblue;
}

h4.grid-heading {
  margin: 1rem 0 0 0;
}

.grid-text {
    position: relative;
    padding: 0 1rem 0 0;
    margin: 0 0 1rem 0;
}

<section class = "section grid-section section-2">
    <div class = "row grid-row row-1">
        <div class = "one-col grid-column column-1">
            <div class = "grid-heading"></div>
            <div class = "grid-heading">
                <h3 class = "grid-title">Focused on the Issues That Affect You.</h3>
            </div>
        </div>
    </div>
    <div class = "row grid-row row-2">
        <div class = "one-col grid-column column-1">
            <div class = "home-grid grid-item-1">
                <div class = "grid-image"></div>
                <div class = "grid-text">
                    <h4 class = "td grid-heading family">Lorem</h4>
                    <hr>
                    <p class = "td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    <div class = "arrow-wrapper"></div>
                </div>
            </div>
            <div class = "home-grid grid-item-2">
                <div class = "grid-image"></div>
                <div class = "grid-text">
                    <h4 class = "td grid-heading employment">Lorem</h4>
                    <hr>
                    <p class = "td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class = "home-grid grid-item-3">
                <div class = "grid-image"></div>
                <div class = "grid-text">
                    <h4 class = "td grid-heading residential-property">Lorem</h4>
                    <hr>
                    <p class = "td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class = "home-grid grid-item-4">
                <div class = "grid-image"></div>
                <div class = "grid-text">
                    <h4 class = "td grid-heading wills">Lorem</h4>
                    <hr>
                    <p class = "td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class = "home-grid grid-item-5">
                <div class = "grid-image"></div>
                <div class = "grid-text">
                    <h4 class = "td grid-heading landlord">Lorem</h4>
                    <hr>
                    <p class = "td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class = "home-grid grid-item-6">
                <div class = "grid-image"></div>
                <div class = "grid-text">
                    <h4 class = "td grid-heading litigation">Lorem</h4>
                    <hr>
                    <p class = "td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class = "home-grid grid-item-7">
                <div class = "grid-image"></div>
                <div class = "grid-text">
                    <h4 class = "td grid-heading commercial-property">Lorem</h4>
                    <hr>
                    <p class = "td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class = "home-grid grid-item-8">
                <div class = "grid-image"></div>
                <div class = "grid-text">
                    <h4 class = "td grid-heading business-affairs">Lorem</h4>
                    <hr>
                    <p class = "td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
            <div class = "home-grid grid-item-9">
                <div class = "grid-image"></div>
                <div class = "grid-text">
                    <h4 class = "td grid-heading media">Lorem</h4>
                    <hr>
                    <p class = "td grid-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
            </div>
        </div> 
    </div>
</section>

Не без настройки зазоров/маржи сетки. По крайней мере, пока не поддерживается display:subgrid.

— 11.07.2019 16:30

Причина несоосности – зазор. ....

— 11.07.2019 16:31

Тем не менее, почему бы просто не использовать тот же макет 3 1fr в верхнем ряду? - codepen.io/Поли-Д/пен/QXoOjQ

— 11.07.2019 16:32

Да, ваше выравнивание выходит примерно на половину зазора сетки, потому что у вас есть два из них на нижней сетке и один наверху.

— 11.07.2019 16:33

@Paulie_D Сначала я пытался сделать 3 столбца 1fr, но затем текст переносился в средний / заголовок столбца. Я добавил к сетке максимальную ширину, чтобы сделать ее более репрезентативной для сайта. Если я это сделаю, мне нужен способ заставить заголовок переполняться из среднего столбца.

— 11.07.2019 18:21

Вы можете просто установить этот элемент на spab 2 столбца... это должно решить проблему с переносом.

— 11.07.2019 18:28

html css alignment css-grid grid-layout

11.07.2019 16:24

Улучшение производительности загрузки с помощью 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 страниц, которые помогут...

151

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

Ответы 2

Причина рассогласования в том, что в первой сетке у вас есть только один разрыв, во второй у вас есть 2.

Одна возможность - установить свойство столбца первой сетки на

grid-template-columns: 1fr 2fr 1px;

Теперь второй элемент никак не может достичь крайней правой границы, но смещение составляет всего лишь долю пикселя.

Чтобы расширить это: 100% - 2бэр (два пробела) / дроби, против 100% - 1бэр / дроби.

— 11.07.2019 16:37

11.07.2019 16:33

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

На первой сетке вместо этого:

.grid-column {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

Учти это:

.grid-column {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* or even grid-template-columns: 1fr */
    text-align: center;
}

пересмотренный код

Привет, Майкл, я пробовал это сначала, но текст переносится внутри среднего столбца. Я добавил максимальную ширину к обеим сеткам, чтобы сделать их более репрезентативными для сайта. Есть ли способ заставить заголовок переполняться из среднего столбца сетки из трех столбцов (переполнение: видимое не работает)?

— 11.07.2019 18:19

11.07.2019 16:49