Поиграйте с макетом сетки

CSS

основное блюдо

Недавно компания Barbecue Jun получила запрос на создание эффекта, подобного следующему изображению:

Это для молодых людей, таких как BBQ Jun, которые уже много лет работают на рынке барбекю.

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

анализ спроса

Диаграмма, описывающая требования

Это конкретный случай компоновки сетки!

Ширина родительского контейнера является адаптивной, а формула расчета ширины дочернего контейнера такова:(100% - (n - 1) * 24) / n . Если ширина страницы больше 1280 пикселей, n равно 5, а когда меньше 1280 пикселей, n равно 4, а минимальная ширина страницы 960 пикселей;

Согласно этой формуле расчета, мы можем нарисовать следующие методы обработки.

Макет сетки

Это требование является наиболее профессиональным с макетом сетки. Макет сетки также называется макетом сетки.

Чтобы узнать о макете сетки, прочитайте статью Мастера Руана и поймите ее с первого взгляда:Учебное пособие по компоновке сетки CSS Grid 》

//html
<div class="parent">
	<div class="children">
    	<div class="children-content"></div>
    </div>
    ...
</div>

//css
//父容器
.parent {
	display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-row-gap: 24px;
    grid-column-gap: 24px;
}

@media screen and (max-width: 1280px) {
    .parent {
        grid-template-columns: repeat(4, 1fr);
    }
}

//子容器
.children {}

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

Но его недостаток в том, что совместимость браузера IE не очень хорошая, и совместимы только некоторые атрибуты, Если вы хотите полностью адаптироваться, вам придется потрудиться!

плавающий макет

Многие студенты думают об использовании поля для увеличения расстояния, как только они используют плавающую компоновку Эта идея реализована с помощью css.

//父容器
.parent {
	width: 100%;
}
//清楚浮动
.parent::after {
	content: '';
    display: block;
    height: 0;
    clear: both;
}
//子容器
.children {
	float: left;
	width: **px;
    height: **px;
    margin: **px **px;
}

Написав приведенную выше реализацию макета, я обнаружил, что исходная функция не может быть достигнута.Расстояние между субконтейнерами составляет 24 пикселя, которое не меняется при масштабировании страницы.百分比, написал следующий ответ, чтобы обмануть себя:

//子容器 18.4 * 5 + 4 * 2 = 100;
.children {
	float: left;
	width: 18.4%;
    height: **px;
    margin-left: 2%;
}

Необходимость 100% восстановления дизайна без сомнения нужна!

Как я могу достичь этого идеально, используя плавающий макет?

Рассчитать ширину дочернего контейнера по формуле(100% - (n - 1) * 24) / n Иди, меняй:

childrenWidth = (100% - (n - 1) * 24) / n 
			  = (100% + 24 - n * 24) / n
			  = (100% + 24) / n - 24

от результата (100% - 24) / n - 24Смотри, нашел это решение. Ширина дочернего контейнера должна включать интервал 24 пикселя, а ширина родительского контейнера должна быть увеличена на 24 пикселя, то есть ширина дочернего контейнера может быть выражена в процентах, но дополнительная ширина 24px включено.

как показано на рисунке:

Код:

//父容器强行增加24px
.parent {
	width: calc(100% + 24px);
}

.parent::after {
	content: '';
    display: block;
    height: 0;
    clear: both;
}

.children {
	float: left;
    width: 20%;
    margin-bottom: 24px;
    padding-right: 24px;
}

@media screen and (max-width: 1280px) {
    .children {
        width: 25% !important;
    }
}

.children-content {
	width: 100%;
}

//or
.parent {
	width: calc(100% + 24px);
    margin-left: -24px;
}

.parent::after {
	content: '';
    display: block;
    height: 0;
    clear: both;
}

.children {
	float: left;
    width: calc(25% - 24px);
    height: 40px;
    margin-bottom: 24px;
    margin-left: 24px;
    background-color: aquamarine;
}

@media screen and (max-width: 1280px) {
    .children {
        width: calc(25% - 24px) !important;
    }
}

Недостатком этого подхода является то, что добавляется n узлов верхнего уровня подконтейнера. Этот узел может повлиять на макет в подконтейнере. Используйте этот метод с осторожностью. Конечно, самым большим преимуществом этого подхода является очень хорошая совместимость с браузерами, хотя более совместимый атрибут calc находится вcan i useДисплей не полностью адаптирован для IE, но приведенный выше код очень хорош!

гибкий макет

Если вы не понимаете, что такое гибкий макет, прочитайте эту статью Мастера Руана.Учебное пособие по гибкому макету: синтаксис

Непосредственно по способу реализации:

.parent {
    width: calc(100% + 24px);
    margin-left: -24px;
    display: flex;
    flex-wrap: wrap;
}

.children {
    flex-basis: calc(20% - 24px);
    height: 40px;
    margin-bottom: 24px;
    margin-left: 24px;
    background-color: aquamarine;
}

@media screen and (max-width: 1280px) {
    .children {
        width: calc(25% - 24px) !important;
    }
}

Можно видеть, что эта реализация похожа на реализацию плавающего макета, поэтому очевидно, что эти два макета не настолько профессиональны для этого требования! Также совместимость зависит от совместимости calc и flex.

Однако для студентов, которым нравится использовать гибкую компоновку, flex также может удовлетворить это требование к макету сетки.

Суммировать

В дополнение к вышеупомянутой централизованной форме макета, которая может удовлетворить требования, конечно, есть и другие методы реализации, которые можно обсудить в области комментариев, но если вы не учитываете совместимость, когда вы видите это требование, первое, что вы думаю, следует использовать сетку.

Обратите внимание на общедоступную учетную запись Nuggets или WeChat «Front-end BBQ Stall» и как можно скорее получите сводку и информацию о внешнем пути BBQ Jun.

Категории