Иногда идея поражает вас так сильно, что вы не понимаете, почему никогда не думали об этом. CSS Grid отлично подходит для создания новых типов макетов . Это также удивительно упрощает код для старых шаблонов проектирования.
Идея подкралась ко мне, когда я создавал столбец текста по центру внутри полосы с фоновым цветом во всю ширину.
Традиционно это решалось бы добавлением дополнительного <div> в нашу разметку. HTML будет выглядеть так.
<section class="stripe">
<div class="stripe__content">
<h1>Hello Stripe world</h1>
<p>More stripe content can go here ...</p>
</div>
</section>
Мы используем внешнюю сторону <section>, чтобы применить цвет фона, и внутреннюю часть <div>, чтобы изменить размер и центрировать содержимое. Это ни в коем случае не переборщ. CSS также относительно чист.
.stripe {
background-color: lavender;
padding: 2rem 0;
}
.stripe__content {
width: 90vw;
max-width: 1200px;
margin: auto;
}
Поскольку это не было большим нарушением, я никогда не думал об использовании CSS Grid для этой цели. Я использовал сетку для создания полос во всю ширину внутри других дизайнов, но никогда для чего-то такого простого.
Молния этого приложения застала меня врасплох. Несмотря на то, что свойство имеет значение grid-template-columns, мы можем использовать его для одного столбца. Соедините это с justify-content небольшим штрихом набора, и вуаля!
Цветная полоса с ограниченным по ширине набором контента без дополнительной разметки!
<section class="stripe">
<h1>Hello Stripe world</h1>
<p>More stripe content can go here ...</p>
</section>
.stripe {
display: grid;
grid-template-columns: minmax(auto, 1200px);
justify-content: center;
background-color: lavender;
padding: 2rem 1rem;
}
Этот метод создает один столбец для нашей сетки. Он имеет минимальный размер auto, позволяющий сжиматься в зависимости от содержимого, и максимальный размер 1200 пикселей. Это создает элементы соответствующего размера. Мы используем justify-content вместо того, чтобы иметь дело с auto полями. В этом методе нам нужен левый/правый отступ для ширины мобильных устройств.
С точки зрения блочной модели это имеет смысл. Заполнение предназначено для внутреннего интервала. В нашем старом способе мы используем поля, которые всегда казались немного хакерскими.
Я никогда не думал об этом варианте использования, но когда до меня дошло, это обрело большой смысл. По мере того, как мы приближаемся к будущему, в котором Grid станет одним из наших основных механизмов компоновки, мы увидим больше подобных приложений.
Сетка предназначена не только для сложных макетов, но и для создания устойчивых простых макетов.
См. Pen Centered Content with Grid Брайана Робинсона на CodePen.