Макет кирпичного стиля

Введение

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css/BasicConceptsGroup -.-> css/selectors("Selectors") css/CoreLayoutGroup -.-> css/margin_and_padding("Margin and Padding") css/CoreLayoutGroup -.-> css/width_and_height("Width and Height") css/CoreLayoutGroup -.-> css/display_property("Display Property") css/IntermediateStylingGroup -.-> css/pseudo_classes("Pseudo-classes") css/ResponsiveandAdaptiveDesignGroup -.-> css/media_queries("Media Queries") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("Mobile First Design") css/CSSPreprocessorsGroup -.-> css/variables("Variables") css/CSSPreprocessorsGroup -.-> css/mixins("Mixins") subgraph Lab Skills css/selectors -.-> lab-35224{{"Респонсивный макет кирпичного стиля с использованием CSS"}} css/margin_and_padding -.-> lab-35224{{"Респонсивный макет кирпичного стиля с использованием CSS"}} css/width_and_height -.-> lab-35224{{"Респонсивный макет кирпичного стиля с использованием CSS"}} css/display_property -.-> lab-35224{{"Респонсивный макет кирпичного стиля с использованием CSS"}} css/pseudo_classes -.-> lab-35224{{"Респонсивный макет кирпичного стиля с использованием CSS"}} css/media_queries -.-> lab-35224{{"Респонсивный макет кирпичного стиля с использованием CSS"}} css/mobile_first_design -.-> lab-35224{{"Респонсивный макет кирпичного стиля с использованием CSS"}} css/variables -.-> lab-35224{{"Респонсивный макет кирпичного стиля с использованием CSS"}} css/mixins -.-> lab-35224{{"Респонсивный макет кирпичного стиля с использованием CSS"}} end

В ВМ уже предоставлены index.html и style.css.

Для создания макета в стиле кирпичного кладки используйте .masonry-container в качестве основного контейнера, и добавьте .masonry-columns в качестве внутреннего контейнера, в который будут помещены элементы .masonry-brick. Макет состоит из "кирпичей", которые накладываются друг на друга, образуя идеальное сочетание. Ширина (width) для вертикального макета и высота (height) для горизонтального макета могут быть фиксированы.

Для обеспечения правильного отображения макета примените display: block к элементам .masonry-brick. Используйте селектор псевдо-элемента :first-child, чтобы применить другой margin для первого элемента, учитывая его позиционирование.

Для большей гибкости и адаптивности используйте CSS переменные и медиа-запросы. В .masonry-container есть CSS переменные для количества колонок и расстояния между ними. Количество колонок контролируется медиа-запросами, которые задают разные количества колонок и ширины для различных размеров экранов.

<div class="masonry-container">
  <div class="masonry-columns">
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1016/384/256"
      alt="An image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1025/495/330"
      alt="Another image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1024/192/128"
      alt="Another image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1028/518/345"
      alt="One more image"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1035/585/390"
      alt="And another one"
    />
    <img
      class="masonry-brick"
      src="https://picsum.photos/id/1074/384/216"
      alt="Last one"
    />
  </div>
</div>

.masonry-container {
  --column-count-small: 1;
  --column-count-medium: 2;
  --column-count-large: 3;
  --column-gap: 0.125rem;
  padding: var(--column-gap);
}

.masonry-columns {
  column-gap: var(--column-gap);
  column-count: var(--column-count-small);
  column-width: calc(1 / var(--column-count-small) * 100%);
}

@media only screen and (min-width: 640px) {
  .masonry-columns {
    column-count: var(--column-count-medium);
    column-width: calc(1 / var(--column-count-medium) * 100%);
  }
}

@media only screen and (min-width: 800px) {
  .masonry-columns {
    column-count: var(--column-count-large);
    column-width: calc(1 / var(--column-count-large) * 100%);
  }
}

.masonry-brick {
  width: 100%;
  height: auto;
  margin: var(--column-gap) 0;
  display: block;
}

.masonry-brick:first-child {
  margin: 0 0 var(--column-gap);
}

Пожалуйста, нажмите на кнопку 'Go Live' в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

Поздравляем! Вы завершили практическое занятие по макету кирпичного стиля. Вы можете практиковаться в других лабораторных работах в LabEx, чтобы улучшить свои навыки.