#css #grid #tips #frontend
Вместо того чтобы мысленно обозначать столбцы и строки, используйте области шаблонов грида. Это как дать названия блокам, сделать макет визуально описательным и более простым в управлении.
Использование имен делает код более читаемым и упрощает процесс проектирования.
@dev_notes_ru
Вместо того чтобы мысленно обозначать столбцы и строки, используйте области шаблонов грида. Это как дать названия блокам, сделать макет визуально описательным и более простым в управлении.
Использование имен делает код более читаемым и упрощает процесс проектирования.
@dev_notes_ru
👍1
#css #grid #tips #frontend
Иногда нет фиксированного числа строк или столбцов.
Это делает грид гибким и отзывчивым без лишних хлопот.
@dev_notes_ru
Иногда нет фиксированного числа строк или столбцов.
grid-auto-rows и grid-auto-columns позволяют автоматически изменять размер и расположение элементов. Это делает грид гибким и отзывчивым без лишних хлопот.
@dev_notes_ru
👍1
#css #grid #tips #frontend
Это свойство может стать решающим фактором. Свойство
@dev_notes_ru
Это свойство может стать решающим фактором. Свойство
place-items: center; является сокращением для align-items и justify-items. Оно выравнивает элементы по вертикали и горизонтали внутри ячейки. Аналогично, свойство place-content выравнивает грид в целом. @dev_notes_ru
👍3🔥1
#css #grid #tips #frontend
Для создания более сложных макетов можно использовать гриды внутри гридов. Эта техника упрощает работу с запутанными элементами пользовательского интерфейса.
Такой подход, хотя и является мощным, может стать сложным, поэтому следите за слоями вложенности.
@dev_notes_ru
Для создания более сложных макетов можно использовать гриды внутри гридов. Эта техника упрощает работу с запутанными элементами пользовательского интерфейса.
Такой подход, хотя и является мощным, может стать сложным, поэтому следите за слоями вложенности.
@dev_notes_ru
#css #grid #tips #frontend
Функция
Она создает отзывчивый грид, в котором столбцы увеличиваются и уменьшаются в заданных пределах.
@dev_notes_ru
Функция
minmax() позволяет контролировать изменение размера. Она создает отзывчивый грид, в котором столбцы увеличиваются и уменьшаются в заданных пределах.
@dev_notes_ru
👍1
#css #grid #tips #frontend
Используйте
Это обеспечивает гибкость и сбалансированность макетов.
@dev_notes_ru
Используйте
auto для контента, определяющего размер на основе его длины, а fr (fraction) делят оставшееся пространство.Это обеспечивает гибкость и сбалансированность макетов.
@dev_notes_ru
🔥1
#frontend #css #css3 #grid #flexbox #flex
👩💻 "Умные" макеты с контейнерными запросами
Контейнерные запросы — одна из тех вещей, которые открывают новые возможности, но поскольку они очень похожи на старый способ работы с медиа-запросами, наш первый инстинкт — использовать их так же, или, по крайней мере, очень похоже.
Но при этом мы не используем преимущества того, насколько умными являются контейнерные запросы по сравнению с медиа-запросами!
Поскольку медиа запросы сыграли важную роль в наступлении эры отзывчивого веб-дизайна, не хочется говорить о них ничего плохого… но медиа-запросы — это тупость. Не тупые с точки зрения концепции, а тупые в том смысле, что они не знают очень многого. На самом деле, большинство людей полагают, что они знают больше, чем есть на самом деле.
🖥 Читать статью
📱 @dev_notes_ru
Контейнерные запросы — одна из тех вещей, которые открывают новые возможности, но поскольку они очень похожи на старый способ работы с медиа-запросами, наш первый инстинкт — использовать их так же, или, по крайней мере, очень похоже.
Но при этом мы не используем преимущества того, насколько умными являются контейнерные запросы по сравнению с медиа-запросами!
Поскольку медиа запросы сыграли важную роль в наступлении эры отзывчивого веб-дизайна, не хочется говорить о них ничего плохого… но медиа-запросы — это тупость. Не тупые с точки зрения концепции, а тупые в том смысле, что они не знают очень многого. На самом деле, большинство людей полагают, что они знают больше, чем есть на самом деле.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍1🔥1
grid и @propertyВеерное раскрытие — это расширяющаяся анимация, при которой группа предметов появляется один за другим, рядом друг с другом, как будто их выкладывают из стопки. Как правило, при этом наблюдается едва уловимое подпрыгивание.
Эффект обычно достигается за счёт тайминга и позиционирования каждого элемента по отдельности с очень жёстко заданными значениями. Однако это может оказаться очень трудоёмкой задачей. Можно сделать всё немного проще, если позволить родительскому контейнеру элементов сделать это за нас.
#frontend #css #grid #property
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥1