От автора: я хочу поделиться одной техникой верстки, которую я использую в последней версии моего сайта. Ничего грандиозного, но я не видел, чтобы об этом было написано где-то еще, и я нашел это довольно полезным. Может быть, вы тоже так думаете.
Я начну со следующего: большинство адаптивных макетов, над которыми я работал, имели максимальную ширину, точку, после которой гибкий макет перестает масштабироваться. И макет этого сайта не является исключением. Вот упрощенная версия того, с чего начинался этот новый дизайн, когда я впервые приступил к созданию прототипов:
.layout { display: grid; grid-template-columns: repeat( 8, 1fr ); max-width: 72rem;
}Это сеточный макет с десятью колонками: восемь колонок посередине, каждая имеет размер 1 fr. Максимальное ограничение по ширине — 72rem.
И это нормально! Но когда я начал настраивать с помощью нового макета свое портфолио, у меня возникла проблема: на отдельных страницах проекта, как на этой странице проекта, который я выполнил для ProPublica, вверху было hero-изображение, которое должно было охватывать всю ширину окна просмотра. Другими словами, оно должно было быть шире, чем max-width, которую я определил.
Это не очень серьезная проблема. Я мог бы создать отдельный блок для размещения поверх сетки, его макет не будет иметь того же ограничения. Но я понял, что есть другой способ ограничить максимальную ширину сетки — путем удаления max-width и создания колонки ограничения с правого края:
.layout { display: grid; grid-template-columns: repeat( 8, 1fr ) calc( 100vw - 72rem );
}Частично вдохновленный CSS Locks, я в основном использую для определения колонок calc(), я задаю 100vw — полная ширина области просмотра — минус 72rem, что является максимальной шириной для моего дизайна. Это действует как гибкий буфер для сетки: если восемь колонок сетки имеют общую ширину 72rem, тогда ограничительная колонка будет зафиксирована на месте, и «основная» часть моей сетки не станет шире.
Это для выровненной по левому краю сетки. Но, как отметил Марк Льобрера, что, если вам нужен центрированный макет, имеющий ограничительную колонку с обеих сторон? В этом случае вам может помочь что-то вроде этого:
.layout { display: grid; grid-template-columns: calc( 50vw - 36rem ) repeat( 8, 1fr ) calc( 50vw - 36rem );
}Слева и справа я использую 50vw, вместо 100vw, и вычитаю из них 36rem, то есть половину целевой максимальной ширины 72rem, чтобы получить нужный мне буфер.
Я должен отметить, что если «основная» часть сетки имеет какие-либо колонки неправильного размера или использует grid-gap, вы должны учитывать эти значения, вычитая их из максимальной ширины, указанной в функции calc(). Например, моя сетка фактически имеет две колонки «зазора» слева и справа, которые выглядят примерно так:
.layout { display: grid; grid-template-columns: 1rem repeat( 8, 1fr ) 1rem;
}Чтобы определить ограничительную колонку для этой сетки, я вычту 2rem из максимальной ширины 72rem:
.layout { display: grid; grid-template-columns: 1rem repeat( 8, 1fr ) 1rem calc( 100vw - 70rem );
}Я нашел эту технику довольно удобной, прежде всего потому, что она дает мне возможность создавать элементы сетки, которые расширяются с помощью этой ограничительной колонки, создавая нужные нам макеты по мере необходимости.
Опять же, это не какая-то феноменальная техника: просто то, на что я наткнулся при настройке этой последней версии моего сайта. И, конечно, это может не подходить для каждого макета на основе сетки. Но, кроме этого, мне действительно очень нравится, как CSS Grid слегка переделала мое мышление и помогла мне представить новые возможности для разработки макетов. Вместо того, чтобы просто применять max-width как ограничение по умолчанию, я могу использовать пустое пространство вокруг и рассматривать его как инструмент макета.
Автор: Ethan Marcotte
Источник: https://ethanmarcotte.com
Редакция: Команда webformyself.