В этой статье рассматриваются несколько мощных строк 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 , вы установите значения center как align-items , так и justify-items .
.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;
}
Теперь, при увеличении или уменьшении размера экрана, эти гибкие элементы одновременно уменьшаются и увеличиваются в размере.
03. Боковая панель содержит: 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. Pancake Stack: 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 (Повтор, Авто, Минмакс): 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, а направление устанавливается на `column` с помощью flex-direction: column .
Это размещает заголовок, описание и блок изображения в вертикальной колонке внутри родительской карточки. Затем, применив justify-content: space-between привязывает первый (заголовок) и последний (блок изображения) элементы к краям flexbox, а описательный текст между ними размещается с одинаковым отступом от каждого из них.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Мой стиль управления: clamp(<min>, <actual>, <max>)
Здесь мы рассмотрим некоторые методы, которые имеют действительно интересные последствия для компоновки и адаптивного дизайна пользовательского интерфейса. В этом примере вы устанавливаете ширину с помощью функции clamp следующим образом: width: clamp(<min>, <actual>, <max>) .
Это задаёт абсолютные минимальный и максимальный размер, а также фактический размер. В виде значений это может выглядеть так:
.parent {
width: clamp(23ch, 60%, 46ch);
}
Минимальный размер здесь составляет 23 символа ( 23ch ), а максимальный — 46 символов ( 46ch ). Единицы ширины символов основаны на размере шрифта элемента (в частности, на ширине глифа 0 ). «Фактический» размер составляет 50%, что соответствует 50% ширины родительского элемента.
Функция clamp() позволяет этому элементу сохранять ширину 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 x 9 без этого свойства, вам потребуется использовать обходной путь с отступом padding-top ) и задать отступ в 56.25% , чтобы установить соотношение верхней и нижней границ ширины. Вскоре у нас появится свойство, позволяющее избежать этого обходного пути и необходимости вычислять проценты. Вы можете создать квадрат с соотношением 1 / 1 , с соотношением 2/1 с помощью 2 / 1 , и вообще любой объект, который вам нужен для масштабирования изображения с заданным соотношением сторон.
.square {
aspect-ratio: 1 / 1;
}
Об этой функции стоит знать, поскольку она решает множество проблем, с которыми я сам сталкивался много раз, особенно когда дело касается видео и iframe.
Заключение
Спасибо, что следили за этим путешествием по 10 мощным строкам CSS. Чтобы узнать больше, посмотрите полное видео и попробуйте сами примерить примеры .