💡 Современные и эффективные CSS-раскладки
▍Часть 7
Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой и шестой частями.
▍12-колоночная сетка: grid-template-columns: repeat(12, 1fr)
В этом примере мы рассмотрим другой классический пример: 12-колоночную сетку. Вы можете быстро создавать подобные сетки в CSS с помощью функции repeat(). Использование repeat(12, 1fr); для шаблона колонок сетки создаёт 12 колонок, каждая шириной 1fr.
В следующей части рассмотрим другой способ размещения дочерних элементов.
#советы #coding #css
▍Часть 7
Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой и шестой частями.
▍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;
}
Теперь мы можем разместить на ней дочерние элементы. Один из вариантов - использовать grid-линии. Например, колонка со свойством grid-column: 1/13 будет начинаться с первой и заканчиваться последней (13-й) линией, охватывая все 12 колонок. Со свойством grid-column: 1/5 - первые 4 колонки.В следующей части рассмотрим другой способ размещения дочерних элементов.
#советы #coding #css
Каналы для быстрого поиска работы в it:
Три канала, которые быстро снимут вопрос поиска работы для технических специалистов в it.
@remoteit — только полная удаленка для технических специалистов в it, вакансии отбираются в ручную, минимум 4 в день, включая эксклюзивные позиции.
@relocats — вакансии для it специалистов с переездом в Еропу, Америку и Азию, только адекватные варианты с хорошими релокационными пакетами.
@gamedevjobs — самый регулярный, актуальный дайджест по gamedev вакансиям в тг. Редактирует подборки игровой эйчар с 20 летним опытом.
Подпишись и откликайся, работа найдется для всех.
Три канала, которые быстро снимут вопрос поиска работы для технических специалистов в it.
@remoteit — только полная удаленка для технических специалистов в it, вакансии отбираются в ручную, минимум 4 в день, включая эксклюзивные позиции.
@relocats — вакансии для it специалистов с переездом в Еропу, Америку и Азию, только адекватные варианты с хорошими релокационными пакетами.
@gamedevjobs — самый регулярный, актуальный дайджест по gamedev вакансиям в тг. Редактирует подборки игровой эйчар с 20 летним опытом.
Подпишись и откликайся, работа найдется для всех.
🔥 Лучшее на канале за неделю
1. Задавать Height и Width для изображений снова важно.
2. AutoNumeric — библиотека Javascript, которая обеспечивает форматирование по мере ввода в реальном времени для международных валют и других числовых стандартов.
3. Современные и эффективные CSS-раскладки - Часть 6 | Часть 7.
1. Задавать Height и Width для изображений снова важно.
2. AutoNumeric — библиотека Javascript, которая обеспечивает форматирование по мере ввода в реальном времени для международных валют и других числовых стандартов.
3. Современные и эффективные CSS-раскладки - Часть 6 | Часть 7.
🛠 Sortable — библиотека JavaScript для создания переупорядочиваемых перетаскиваемых списков. Она не требует внешних зависимостей, имеет массу полезных функций и работает во всех современных браузерах и на сенсорных устройствах.
#инструменты #js
#инструменты #js
💡 Современные и эффективные CSS-раскладки
▍Часть 8
Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой и седьмой частями.
▍12-колоночная сетка: grid-template-columns: repeat(12, 1fr)
Другой способ размещения дочерних элементов - использование ключевого слова span. В этом случае задаётся начальная линия и количество колонок, которое нужно охватить, начиная со стартовой точки. Например, grid-column: 1 / span 12 будет аналогом grid-column: 1 / 13, а grid-columns: 2 / span 6 - аналогом grid-column: 2 / 8.
Продолжение следует...
#советы #coding #css
▍Часть 8
Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой и седьмой частями.
▍12-колоночная сетка: grid-template-columns: repeat(12, 1fr)
Другой способ размещения дочерних элементов - использование ключевого слова span. В этом случае задаётся начальная линия и количество колонок, которое нужно охватить, начиная со стартовой точки. Например, grid-column: 1 / span 12 будет аналогом grid-column: 1 / 13, а grid-columns: 2 / span 6 - аналогом grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
Видео-демонстрацию смотрите ниже под этим постом.Продолжение следует...
#советы #coding #css
💡 Современные и эффективные CSS-раскладки
▍Часть 9
Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой и восьмой частями.
▍RAM (Repeat, Auto, MinMax): grid-template-columns(auto-fit, minmax(<base>, 1fr))
В этом примере мы объединим некоторые из рассмотренных концепций создания отзывчивого интерфейса с автоматически позиционируемыми и гибкими дочерними элементами. Довольно удобно. Ключевые термины repeat, auto-(fit|fill) и minmax() можно запомнить с помощью акронима RAM.
Всё вместе это выглядит так:
Видео-демонстрацию смотрите ниже под этим постом.
Продолжение следует...
#советы #coding #css
▍Часть 9
Перед прочтением рекомендуем ознакомиться с первой, второй, третьей, четвёртой, пятой, шестой, седьмой и восьмой частями.
▍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));
}
В следующей части продолжим данную тему.Видео-демонстрацию смотрите ниже под этим постом.
Продолжение следует...
#советы #coding #css
🛠 Tina CMS — набор инструментов для редактирования сайтов на основе React. После подключения Tina к проекту Gatsby или Next.js ваш сайт становится полностью редактируемым, что дает возможность изменять текст, переупорядочивать элементы и многое другое.
#инструменты
#инструменты
🔥 Лучшее на канале за неделю
1. Современные и эффективные CSS-раскладки.
2. Sortable — библиотека JavaScript для создания переупорядочиваемых перетаскиваемых списков.
3. 12-колоночная сетка: grid-template-columns: repeat(12, 1fr).
1. Современные и эффективные CSS-раскладки.
2. Sortable — библиотека JavaScript для создания переупорядочиваемых перетаскиваемых списков.
3. 12-колоночная сетка: grid-template-columns: repeat(12, 1fr).
📑 Декларативный подход в Angular
Compliant-механизмы окружают нас в повседневности — в виде застежек рюкзака, кнопок мыши или колпачков от шампуней, — мы редко задумываемся о концепции таких устройств.
Если говорить кратко, в compliant-механизме для обеспечения его технических характеристик используют деформацию. В то время как в традиционной технике (rigid body) гибкость зачастую является негативным качеством материала, сompliant-механизмы используют ее для передачи силы и движения в нужном направлении, вместо соединений из нескольких подвижных деталей.
#статьи #js #Angular #TypeScript
Compliant-механизмы окружают нас в повседневности — в виде застежек рюкзака, кнопок мыши или колпачков от шампуней, — мы редко задумываемся о концепции таких устройств.
Если говорить кратко, в compliant-механизме для обеспечения его технических характеристик используют деформацию. В то время как в традиционной технике (rigid body) гибкость зачастую является негативным качеством материала, сompliant-механизмы используют ее для передачи силы и движения в нужном направлении, вместо соединений из нескольких подвижных деталей.
#статьи #js #Angular #TypeScript