Две CSS-сетки не выравниваются внутри одного родительского контейнера - PullRequest
Новая
       36

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

2 голосов
/ 11 июля 2019

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

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

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

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

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

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

Codepen: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>

Ответы [ 2 ]

1 голос
/ 11 июля 2019

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

.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;
}

пересмотренная кодовая ручка

0 голосов
/ 11 июля 2019

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

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

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

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

...