В этой статье описываются несколько мощных строк CSS, которые выполняют серьезную работу и помогают вам создавать надежные современные макеты.
Современные макеты 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;
}
Теперь, по мере увеличения или уменьшения размера экрана, эти гибкие элементы как уменьшаются, так и увеличиваются.
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. Стек блинов: grid-template-rows: auto 1fr auto
В отличие от Deconstructed Pancake, этот пример не переносит свои дочерние элементы при изменении размера экрана. Обычно называемый липким колонтитулом , этот макет часто используется как для веб-сайтов, так и для приложений, в мобильных приложениях (колонтитул обычно представляет собой панель инструментов) и веб-сайтах (одностраничные приложения часто используют этот глобальный макет).
Добавление 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-Span: grid-template-columns: repeat(12, 1fr)
Далее у нас есть еще одна классика: 12-пролетная сетка. Вы можете быстро писать сетки в CSS с помощью функции repeat() . Использование: repeat(12, 1fr); для шаблона сетки columns дает вам 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. ОЗУ (Повтор, Авто, МинМакс): 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);
}
Минимальный размер здесь составляет 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>
И, наконец, этот последний инструмент макета является самым экспериментальным из всех. Он был недавно представлен в Chrome Canary в Chromium 84, и Firefox активно работает над его реализацией, но в настоящее время он не представлен ни в одной стабильной версии браузера.
Я хочу упомянуть об этом, потому что это очень распространённая проблема. Речь идёт всего лишь о сохранении пропорций изображения.
Благодаря свойству aspect-ratio при изменении размера карточки зелёный визуальный блок сохраняет соотношение сторон 16 x 9. Мы соблюдаем соотношение сторон с помощью aspect-ratio: 16 / 9 .
.video {
aspect-ratio: 16 / 9;
}
Чтобы сохранить соотношение сторон 16 x 9 без этого свойства, вам пришлось бы использовать хак padding-top и задать padding 56.25% чтобы задать соотношение сторон. Скоро у нас появится свойство для этого, которое позволит избежать хака и необходимости вычислять процентное значение. Вы можете создать квадрат с соотношением 1 / 1 , соотношение сторон 2:1 с 2 / 1 и, по сути, всё, что угодно, чтобы изображение масштабировалось с заданным соотношением сторон.
.square {
aspect-ratio: 1 / 1;
}
Хотя эта функция еще только разрабатывается, о ней полезно знать, поскольку она решает множество разногласий между разработчиками, с которыми мне самому не раз приходилось сталкиваться, особенно когда речь идет о видео и iframes.
Заключение
Спасибо, что прошли это путешествие по 10 мощным строкам CSS. Чтобы узнать больше, посмотрите полное видео и опробуйте демонстрационные примеры самостоятельно.