CSS Grid Nesting приводит к тому, что Sub-grid сдувает родительскую ячейку сетки - PullRequest
Новая
       68

CSS Grid Nesting приводит к тому, что Sub-grid сдувает родительскую ячейку сетки

0 голосов
/ 03 августа 2020

Я работаю над своим личным сайтом и использую CSS Grid для всего, что связано с макетом. Я пытаюсь сделать свою сеточную систему максимально гибкой, чтобы разрешить вложение (на случай, если мне это действительно нужно).

Моя проблема заключается в следующем: у меня есть сетка с 2 строками, каждая из которых имеет 2 столбца соответственно 3 столбца. Я пытаюсь в основном вложить одну и ту же сетку в один из трех столбцов первого. Я думаю, что из-за слишком большого зазора они вылетают из своего родителя.

Предварительный просмотр моей вложенной сетки, переполняющей родительскую ячейку

Код ниже: 

.grid {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(12, minmax(0, 1fr));
        grid-gap: 50px;
    }

.grid__col-12 { grid-column-end: span 12; }
.grid__col-4 { grid-column-end: span 4; }
.grid__col-3 { grid-column-end: span 3; }
.grid__col-6 { grid-column-end: span 6; }
<div class="grid">
        <div class="grid__col-6">hey</div>
        <div class="grid__col-6">hey</div>
        <div class="grid__col-4">hey</div>
        <div class="grid__col-4">hey</div>
        <div class="grid grid__col-4">
            <div class="grid__col-6">hey</div>
            <div class="grid__col-6">hey</div>
            <div class="grid__col-4">hey</div>
            <div class="grid__col-4">hey</div>
            <div class="grid__col-4">hey</div>
        </div>
    </div>

Я действительно не могу понять, почему это происходит, поэтому хотел бы получить некоторые разъяснения.

Большое спасибо!

1 Ответ

0 голосов
/ 03 августа 2020

Причина, по которой вторая сетка имеет переполненные элементы div, связана с вашим grid-gap. Браузер отдает приоритет значению grid-gap над имеющимися у вас fr единицами. Из-за этого ваш браузер всегда пытается убедиться, что у вас есть grid-gap: 50px, независимо от ширины родительского элемента (или экрана) .

Итак, если ширина вашего экрана (например) 375 пикселей (iPhone 11 Pro size), браузер сделает все возможное, чтобы получить grid-gap 50 пикселей, но вы столкнетесь с проблемами с размером div, поскольку браузер пытается найти все свободное место для ваши div элементы. В этом случае количество оставшегося места будет очень минимальным, поэтому вам придется использовать @media запросов, чтобы изменить работу сетки при разной ширине экрана ... То есть, если вы непреклонны в сохранении 50px grid-gap.

Другим решением было бы сделать ваш grid-gap процентным. Таким образом, это будет динамическое c с любой шириной родительского элемента (или экрана) что у вас есть.

Итак, вкратце, ваша вложенная сетка не имеет достаточно места для своих div элементов, потому что вложенная сетка уже настолько мала. Браузер отдает приоритет grid-gap: 50px, поэтому во вложенной сетке не остается места для других столбцов.

...