Category: css grid

18
Мар
2021

Отладка CSS Grid как профи

От автора: теперь вы можете использовать Chrome DevTools для визуальной проверки CSS-сеток и их отладки. CSS Grid — это модуль, который позволяет более эффективно разрабатывать сложные адаптивные веб-дизайны, сохраняя при этом согласованность между браузерами. Для разработчика CSS Grid — это инструмент, который помогает справляться с такими вещами, как повторное использование кода, бесконечные размеры экрана, скорость […]

25
Янв
2021

Прикрепленные элементы сетки в CSS

От автора: если вы когда-либо пытались поместить липкий элемент в макет сетки и наблюдали, как элемент прокручивается вместе с остальным содержимым, вы, возможно, замечали, что position: sticky с CSS Grid не работает. Не стоит волноваться! Вполне возможно совместить эти два макета для работы вместе. Все, что вам, вероятно, понадобится, это еще одна строка CSS. Проблема […]

28
Дек
2020

Подробное рассмотрение CSS Grid minmax()

От автора: существует множество учебных пособий и руководств, которые обучают CSS-grid в целом, и я писал об этом несколько раз. Однако я заметил, что существует неправильное понимание функции minmax(), поскольку большинство статей являются общими или не содержат достаточного объяснения и реальных примеров использования. minmax() очень мощный и полезный инструмент. По этой конкретной причине я подумал, […]

07
Дек
2020

Нестандартное мышление с CSS Grid

От автора: поддержка CSS Grid (CSS сетки) в современных браузерах открыла новые возможности компоновки элементов. Мы можем создавать более сложные дизайны, используя меньше элементов, чем мы могли, используя компонент Flexbox. Но когда вы думаете о CSS Grid, вы в основном думаете о блочном макете, ведь так? Некоторые примеры макетов из Grid by Example Рэйчел Эндрю […]

19
Ноя
2020

Макет без полей с использованием CSS Grid

От автора: когда-то существовал золотой стандарт макета веб-сайта, который все стремились создать, но это было трудно сделать правильно: Макет Святого Грааля. Не похоже, чтобы это было так сложно, правда? Но это была эпоха до появления flexbox; нашими инструментами для работы были таблицы и float, и ни один из них не подходил для этой задачи. Технически […]

06
Ноя
2020

Достижение вертикального выравнивания

От автора: инструменты для вертикального выравнивания в последнее время стали намного лучше. В первые годы работы в качестве дизайнера веб-сайтов я разрабатывал дизайн домашней страницы шириной 960 пикселей и выравнивал элементы по горизонтали на странице с помощью сетки из 12 столбцов. Появились медиа-запросы, которые потребовали серьезного психологического сдвига. Конечно, они решили некоторые значительные проблемы, но […]

07
Окт
2020

Как использовать CSS Grid для закрепления хэдера и футера

От автора: CSS Grid — это набор свойств, призванных сделать макет проще, чем когда-либо. Как и почти всегда, есть некоторая кривая обучения, но, честно говоря, с Grid будет весело работать, когда вы освоите его. Одна из областей, в которой он хорош — это хэдер и футер. Немного изменив свое мышление, мы можем получить хэдер и […]

10
Сен
2020

Современные сеточные решения CSS для распространенных проблем макета

От автора: макет и композиция — одни из самых сложных тем в CSS. Особенно когда нужна адаптивность. Мы часто прибегаем к медиа-запросам. Но добавление множества медиа-запросов для различных контрольных точек может сделать CSS неработоспособным. Однако с помощью добавления сеток мы можем преодолеть это. Они не только делают CSS более простым в обслуживании, но и улучшают […]

07
Авг
2020

Сетки Часть 1: Использовать сетку или таблицу

От автора: в своей повседневной работе я разговариваю со многими людьми, у которых много проблем с доступностью различных таблиц и сеток. Сетки иногда дают нам проблемы с комбобоксами и неудачными всплывающими подсказками, которые причиняют головную боль разработчикам, пытающимися правильно реализовать доступность. Часть этого потока вопросов доступности сетки может быть вызвана спецификой того, где я работаю, […]

27
Июл
2020

Раздвижные ряды в CSS Grid

От автора: еще один аспект редизайна meyerweb, который я хотел бы рассмотреть — это то, как я использую ряды CSS Grid для большей гибкости макета. Во-первых, давайте представим макет страницы по умолчанию здесь, на meyerweb. Это выглядит примерно так: Так просто, даже flexbox мог бы сделать это! Но это только если вещи всегда остаются такими […]

07
Июл
2020

Grid — для макета, Flexbox — для компонентов

От автора: мой брат — новичок в области компьютерной инженерии, и в настоящее время он заканчивает свою стажировку по фронт-энд разработке. Он изучил как CSS-Grid, так и Flexbox, но столкнулся с ситуацией, которую я часто вижу. Он не может решить, когда использовать Grid, а когда Flexbox. Например, он использовал CSS-Grid для разметки заголовка веб-сайта и […]

02
Июл
2020

Крутые трюки CSS Grid для вашего блога

От автора: я открыла для себя CSS около десяти лет назад, пытаясь изменить внешний вид блога, который я создала. Довольно скоро я смогла кодировать классные вещи с большим количеством математических и, следовательно, более простых для понимания функций, таких как преобразования. Однако другие области CSS, такие как верстка, остаются постоянным источником боли. Этот пост посвящен проблеме, […]

01
Июл
2020

Как использовать grid-template-area для изменения порядка элементов

От автора: работая над сайтом FordLabs, мы с моим напарником столкнулись с, казалось бы, сложной ситуацией. У нас было три элемента, которые нужно было расположить горизонтально в порядке [1] [2] [3] на экранах планшетов и на настольных компьютерах, но затем расположить вертикально в порядке [1] [3] [2] на мобильных устройствах. Хотя мы могли бы использовать […]

01
Май
2020

Ограничение для CSS-сетки без max-width

От автора: я хочу поделиться одной техникой верстки, которую я использую в последней версии моего сайта. Ничего грандиозного, но я не видел, чтобы об этом было написано где-то еще, и я нашел это довольно полезным. Может быть, вы тоже так думаете. Я начну со следующего: большинство адаптивных макетов, над которыми я работал, имели максимальную ширину, […]

23
Апр
2020

Почему footer наезжает на контент при переключении галереи?

я подключила grid (кирпичная кладка) для галереи. При загрузке страницы всё работает хорошо, но когда переключаю между галереями через фильтер футер наезжает на галерею, помогите справится с проблемой.. Вот ссылка где обнаружена данная про…

20
Апр
2020

4 свойства CSS Grid для большинства ваших потребностей

От автора: CSS Grid предоставляет нам мощную систему верстки для веб-сайтов. Руководство CSS-Tricks предоставляет полный обзор свойств Grid с примерами макетов. В этой статье мы используем обратный подход, мы покажем наименьший возможный набор свойств сетки, который вы должны знать, чтобы он удовлетворял большинство ваших потребностей. Эти пять свойств помогут вам начать работу: display (для значения […]

03
Фев
2020

Создаем резюме на основе Grid

От автора: многие популярные дизайны резюме максимально используют доступное пространство страницы, разделы в них размещаются в виде сетки. Давайте используем CSS Grid для создания макета, который будет отлично выглядеть при печати и на экранах разных размеров. Таким образом, у нас будет возможность использовать резюме онлайн и оффлайн, что может пригодиться в новом году! Сначала мы […]

30
Янв
2020

Flash Grid: Изучите CSS Grid, построив систему сетки

От автора: в последнее время я экспериментировал с идеей создания облегченной системы сетки на основе CSS Grid. У нас в CodyFrame есть система сетки, и она основана на Flexbox. Однако CSS Grid имеет так много мощных функций, которых нет во Flexbox, что я в итоге создал Flash Grid. Я собираюсь рассказать обо всем процессе создания […]

16
Дек
2019

Методы создания газетного макета с помощью CSS-сетки и границ между элементами

От автора: недавно мне пришлось создать дизайн, похожий на газету, в котором было несколько интервалов строк и столбцов с разделительными линиями между ними. Посмотрите на рисунок макета и подумайте, придется ли вам попотеть, чтобы создать подобное. Если вы похожи на меня, вы уже давно и знаете, насколько сложно это было бы с использованием старых методов […]

13
Дек
2019

Создание сложных макетов с использованием CSS Grid

От автора: это руководство предназначено для людей, которые слышали о css-grid и хотят узнать, что она может, или, возможно, не уверены, как ввести ее в свой рабочий процесс. Также статья будет вам интересна, если вы оттачиваете навыки верстки, не прибегая к фреймворкам, таким как Bootstrap. Базовые знания о css — это хорошо, но вы должны […]

05
Дек
2019

Некоторые стратегии CSS Grid для создания согласованных макетов дизайна

От автора: в мире веб-разработки всегда наблюдался разрыв при переходоме от дизайна к разработке. Амбициозные дизайнеры хотят, чтобы конечный результат их усилий выглядел уникальным и красивым (и соответствовал их первоначальному видению), тогда как многие разработчики находят большую ценность в результате, который является последовательным, надежным и стабильным (и легко кодируемым). Эта динамика может привести к напряженности […]

12
Ноя
2019

Используйте CSS Grid в производстве — сегодня

От автора: каждый хочет использовать CSS Grid. Речь идет о новом методе верстки, который существенно изменит способ разработки контента в Вебе. С помощью CSS Grid у вас есть возможность размещать контент на веб-сайте в беспрецедентной форме и динамически сортировать его по областям просмотра. Этот метод появился, поскольку многие авторы веб-сайтов имели слишком ограниченные возможности работы […]

30
Окт
2019

Создание макета настенного альбома с помощью CSS Grid

От автора: недавно моему сыну было поручено в течение недели присматривать за своим плюшевым мишкой на уроках дошкольного образования, и он должен был придумывать для него приключения и добавить свои воспоминания в альбом. Мне очень понравилось создавать этот макет альбома, и это заставило меня задуматься о том, как бы я создал что-то подобное с помощью […]

24
Окт
2019

CSS Grid меняет наше представление о структуре контента

От автора: любой, кто хоть немного занимался созданием веб-сайтов, знает, что div — это важный строительный блок для управления макетами. HTML5 представил новые семантические элементы, и хотя они являются фантастическим дополнением к языку, они немного похожи на гарнир в супе div. С grid нам больше не нужно полагаться на div, чтобы создать структуру страницы или […]

17
Окт
2019

CSS Grid: Введение с примерами

От автора: я помню, как впервые изучал CSS, и как я был рад узнать о display float и inline, которые позволяют размещать элементы, как нам нужно. Интересно, как бы я отреагировал, если бы в то время была доступна система двумерного макета? На самом деле, даже сейчас я взволнован этим, потому что это меняет все: как […]

28
Июн
2019

CSS Grid Level 2 — subgrid вводится в Firefox

От автора: функция подсетки subgrid спецификации CSS Grid еще не реализована ни в одном браузере, но теперь она доступна для тестирования в Firefox Nightly. Это функция, которая, если вы использовали CSS Grid для макета любой сложности, скорее всего, вас очень порадует. В этой статье я собираюсь представить функцию и некоторые варианты ее использования. Так что […]

20
Июн
2019

Использование метода Grid Shepherd для упорядочивания данных с CSS

От автора: при работе с данными программисты часто не знают, правильно ли они отфильтрованы или отсортированы. Это особенно болезненно, когда вы перебираете массив, затем отображает данные на сайте, не зная местоположений каждого элемента, получающего их. Grid Shepherd — это метод, который помогает позиционировать и сортировать элементы там, где вы хотите, использовать CSS Grid вместо JavaScript. […]

24
Май
2019

Создание адаптивного макета сетки CSS Grid без медиа-запросов

От автора: использование гибкой природы Интернета предоставляет нам мощные решения для интерфейса, где вместо использования определенных размеров мы задаем элементам разумные границы и позволяем им автоматически заполнять пространство, где это возможно. Я максимально применяю этот подход в своей работе и создаю утилиты, наподобие этой: Это полностью адаптивный макет сетки CSS Grid, в котором не используются […]