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

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

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

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

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

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

От автора: CSS Grid предоставляет нам мощную систему верстки для веб-сайтов. Руководство CSS-Tricks предоставляет полный обзор свойств Grid с примерами макетов. В этой статье мы используем обратный подход, мы покажем наименьший возможный набор свойств сетки, который вы должны знать, чтобы он удовлетворял большинство ваших потребностей. Эти пять свойств помогут вам начать работу: display (для значения grid) grid-template-columns grid-gap grid-auto-flow grid-column ...

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

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

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