В этом посте выделено несколько мощных строк CSS, которые выполняют серьезную тяжелую работу и помогают создавать надежные современные макеты.
Дата публикации: 7 июля 2020 г. Последнее обновление: 15 декабря 2025 г.
Современные макеты CSS позволяют разработчикам писать действительно значимые и надежные правила стилизации всего несколькими нажатиями клавиш. В видео выше и в этой статье рассматриваются 10 мощных строк CSS, которые выполняют серьезную работу.
Чтобы следить за ходом работы или самостоятельно поэкспериментировать с этими демоверсиями, посмотрите встроенный сайт выше или посетите 1linelayouts.com.
01. Суперцентрирование: place-items: center
Для первого макета "одна строка" давайте решим самую большую загадку во всей стране CSS: центрирование вещей. С place-items: center это проще, чем вы думаете.
Сначала укажите grid в качестве метода display, а затем добавьте place-items: center в тот же элемент. place-items – это сокращение, позволяющее одновременно задать align-items и justify-items. Если задать для него значение center, то для align-items и justify-items будет установлено значение center.
.parent {
display: grid;
place-items: center;
}
Это позволяет идеально центрировать контент внутри родительского элемента, независимо от его собственного размера.
02. Блинчики по-новому: flex: <grow> <shrink> <baseWidth>
А теперь у нас деконструированный блинчик! Это обычный макет для маркетинговых сайтов, например, который может иметь ряд из 3 элементов, обычно с изображением, заголовком, а затем некоторым текстом, описывающим некоторые особенности продукта. На мобильных устройствах они должны аккуратно складываться и расширяться по мере увеличения размера экрана.
Если вы используете Flexbox, вам не понадобятся запросы медиа, чтобы корректировать размещение элементов при изменении размера экрана.
Сокращение flex означает flex: <flex-grow> <flex-shrink> <flex-basis>.
Поэтому, если вы хотите, чтобы ваши блоки заполнялись до размера <flex-basis>, уменьшались на меньших размерах, но не растягивались, чтобы заполнить дополнительное пространство, напишите: flex: 0 1 <flex-basis>. В этом случае ваш <flex-basis> – 150px, поэтому он выглядит так:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Если вы хотите, чтобы блоки растягивались и заполняли пространство при переносе на следующую строку, задайте для свойства <flex-grow> значение 1, как показано ниже:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Теперь, когда вы увеличиваете или уменьшаете размер экрана, эти flex-элементы сжимаются и увеличиваются.
03. Sidebar Says: grid-template-columns: minmax(<min>, <max>) …)
В этой демонстрации используется функция minmax для макетов сетки. Здесь мы устанавливаем минимальный размер боковой панели равным 150px, но на больших экранах позволяем ей растягиваться до 25%. Боковая панель всегда будет занимать 25% горизонтального пространства родительского элемента, пока эти 25% не станут меньше 150px.
Добавьте это как значение grid-template-columns со следующим значением:
minmax(150px, 25%) 1fr. Элемент в первом столбце (в данном случае боковая панель) получает minmax 150px при 25%, а второй элемент (здесь раздел main) занимает остальное пространство в виде одной дорожки 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Стопка блинов: grid-template-rows: auto 1fr auto
В отличие от деконструированного блина, этот пример не переносит дочерние элементы при изменении размера экрана. Такой макет, который часто называют фиксированным нижним колонтитулом, часто используется как для сайтов, так и для приложений, в мобильных приложениях (нижний колонтитул обычно представляет собой панель инструментов) и на сайтах (одностраничные приложения часто используют этот глобальный макет).
Если добавить в компонент display: grid, вы получите сетку с одним столбцом, но основная область будет иметь высоту, равную высоте контента, а нижний колонтитул будет находиться под ней.
Чтобы закрепить нижний колонтитул внизу, добавьте:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
Это позволяет автоматически задавать размер контента верхнего и нижнего колонтитулов в соответствии с размером дочерних элементов и применять оставшееся пространство (1fr) к основной области, в то время как строка размером auto будет принимать размер минимального контента дочерних элементов, поэтому по мере увеличения размера этого контента сама строка будет увеличиваться для корректировки.
05. Классический макет "Святой Грааль": grid-template: auto 1fr auto / auto 1fr auto
Для этого классического макета святого грааля есть заголовок, нижний колонтитул, левая боковая панель, правая боковая панель и основное содержимое. Он похож на предыдущий, но теперь с боковыми панелями.
Чтобы создать всю эту сетку с помощью одной строки кода, используйте свойство grid-template. Это позволяет одновременно задавать и строки, и столбцы.
Пара "свойство – значение": grid-template: auto 1fr auto / auto 1fr auto. Косая черта между первым и вторым списками, разделенными пробелами, – это разрыв между строками и столбцами.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Как и в предыдущем примере, где верхний и нижний колонтитулы имели контент с автоматическим размером, здесь левая и правая боковые панели автоматически масштабируются в зависимости от внутреннего размера их дочерних элементов. Однако на этот раз это горизонтальный размер (ширина), а не вертикальный (высота).
06. Сетка из 12 столбцов: grid-template-columns: repeat(12, 1fr)
Далее у нас есть ещё одна классика: сетка из 12 пролётов. Вы можете быстро создавать сетки в CSS с помощью функции repeat(). Если вы используете repeat(12, 1fr); для столбцов шаблона сетки, то получите 12 столбцов, каждый из которых будет иметь размер 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Теперь у вас есть сетка из 12 столбцов, на которой можно разместить дочерние элементы. Один из способов сделать это – разместить их с помощью линий сетки. Например, grid-column: 1 / 13 будет занимать все пространство от первой до последней (13-й) строки и 12 столбцов. grid-column: 1 / 5; – первые четыре.
Ещё один способ написать это – использовать ключевое слово span. С помощью span вы задаете начальную линию, а затем указываете, сколько столбцов нужно охватить, начиная с этой точки. В этом случае grid-column: 1 / span 12 будет эквивалентно grid-column: 1 / 13, а grid-column: 2 / span 6 – grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
В седьмом примере мы объединим некоторые из уже изученных концепций, чтобы создать адаптивный макет с автоматически размещаемыми и гибкими дочерними элементами. Довольно аккуратно. Ключевые термины, которые следует запомнить, – это repeat, auto-(fit|fill) и minmax()'. Их можно запомнить по аббревиатуре RAM.
Вот как это выглядит:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Вы снова используете repeat, но на этот раз с ключевым словом auto-fit вместо явного числового значения. Это позволяет автоматически размещать дочерние элементы. Эти дочерние элементы также имеют базовое минимальное значение 150px с максимальным значением 1fr. Это означает, что на меньших экранах они будут занимать всю ширину 1fr, а когда они достигнут ширины 150px каждый, они начнут перетекать на ту же строку.
При значении auto-fit блоки будут растягиваться, если их горизонтальный размер превышает 150 пикселей, чтобы заполнить все оставшееся пространство. Однако если вы измените это значение на auto-fill, они не будут растягиваться, когда их базовый размер в функции minmax будет превышен:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Состав: justify-content: space-between
В следующем макете главное, что нужно продемонстрировать, – это justify-content: space-between, который размещает первый и последний дочерние элементы по краям их ограничивающей рамки, а оставшееся пространство равномерно распределяется между элементами. Для этих карточек задан режим отображения Flexbox, а направление установлено как столбец с помощью flex-direction: column.
Это размещает заголовок, описание и блок изображения в вертикальном столбце внутри родительской карточки. Затем, применив justify-content: space-between, мы закрепим первый (заголовок) и последний (блок изображения) элементы по краям flexbox, а описательный текст между ними будет размещен с равным интервалом до каждой конечной точки.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Clamping My Style: clamp(<min>, <actual>, <max>)
Здесь мы переходим к некоторым методам, которые имеют действительно интересные последствия для макетов и адаптивного дизайна пользовательского интерфейса. В этой демонстрации вы устанавливаете ширину с помощью зажима следующим образом: width: clamp(<min>, <actual>, <max>).
Это позволяет задать абсолютный минимальный и максимальный размер, а также фактический размер. Вот как это может выглядеть:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Минимальный размер – 23ch или 23 символа, а максимальный – 46ch или 46 символов. Единицы ширины символа зависят от размера шрифта элемента (в частности, от ширины глифа 0). Фактический размер составляет 50 %, что соответствует 50 % ширины родительского элемента.
Функция clamp() позволяет элементу сохранять ширину 50 % до тех пор, пока 50 % не станет больше 46ch (на более широких экранах) или меньше 23ch (на экранах меньшего размера). Вы можете видеть, что когда я растягиваю и сжимаю родительский размер, ширина этой карточки увеличивается до максимальной точки зажима и уменьшается до минимальной точки зажима. Затем он остается по центру родительского элемента, поскольку мы применили дополнительные свойства для его центрирования. Это позволяет сделать макеты более читабельными, поскольку текст не будет слишком широким (более 46ch) или слишком сжатым и узким (менее 23ch).
Это также отличный способ реализовать адаптивную типографику. Например, вы можете написать: font-size: clamp(1.5rem, 20vw, 3rem). В этом случае размер шрифта заголовка всегда будет оставаться в диапазоне от 1.5rem до 3rem, но будет увеличиваться и уменьшаться в зависимости от фактического значения 20vw, чтобы соответствовать ширине области просмотра.
Это отличный способ обеспечить читаемость с минимальным и максимальным значением размера.
10. Сохранение соотношения сторон: aspect-ratio: <width> / <height>
И, наконец, последний макет решает часто встречающуюся проблему сохранения соотношения сторон изображения.
Благодаря свойству aspect-ratio, когда я меняю размер карточки, зеленый визуальный блок сохраняет соотношение сторон 16 x 9. Мы сохраняем соотношение сторон с помощью aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Чтобы сохранить соотношение сторон 16:9 без этого свойства, вам нужно использовать хак padding-top и задать для него отступ 56.25%, чтобы установить соотношение высоты и ширины. Скоро мы добавим свойство, которое позволит избежать этого обходного пути и необходимости вычислять процент. Вы можете сделать квадрат с соотношением сторон 1 / 1, прямоугольник с соотношением сторон 2 / 1 или любое другое соотношение сторон, которое вам нужно.
.square {
aspect-ratio: 1 / 1;
}
Эта функция позволяет решить многие проблемы, с которыми сталкиваются разработчики, особенно при работе с видео и элементами iframe.
Заключение
Спасибо, что прошли с нами этот путь через 10 мощных строк CSS. Чтобы узнать больше, посмотрите полное видео.