Mauerwerkslayout

Einführung

In diesem Lab werden wir das Konzept des Mauerwerkslayouts erkunden und lernen, wie wir eine visuell ansprechende gitterartige Struktur erstellen, die ideal zum Anzeigen von Bildern ist. Mit CSS und HTML werden wir ein responsives Mauerwerkslayout mit flexiblen Spaltenanzahlen und Spaltenbreiten erstellen, das sich an verschiedene Bildschirmgrößen anpasst. In diesem Lab erhalten Sie praktische Erfahrungen bei der Erstellung eines eleganten und funktionalen Layouts für Ihre Webseiten.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("CSS")) -.-> css/CoreLayoutGroup(["Core Layout"]) css(("CSS")) -.-> css/IntermediateStylingGroup(["Intermediate Styling"]) css(("CSS")) -.-> css/ResponsiveandAdaptiveDesignGroup(["Responsive and Adaptive Design"]) css(("CSS")) -.-> css/CSSPreprocessorsGroup(["CSS Preprocessors"]) css(("CSS")) -.-> css/BasicConceptsGroup(["Basic Concepts"]) 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{{"Responsives Mauerwerkslayout mit CSS"}} css/margin_and_padding -.-> lab-35224{{"Responsives Mauerwerkslayout mit CSS"}} css/width_and_height -.-> lab-35224{{"Responsives Mauerwerkslayout mit CSS"}} css/display_property -.-> lab-35224{{"Responsives Mauerwerkslayout mit CSS"}} css/pseudo_classes -.-> lab-35224{{"Responsives Mauerwerkslayout mit CSS"}} css/media_queries -.-> lab-35224{{"Responsives Mauerwerkslayout mit CSS"}} css/mobile_first_design -.-> lab-35224{{"Responsives Mauerwerkslayout mit CSS"}} css/variables -.-> lab-35224{{"Responsives Mauerwerkslayout mit CSS"}} css/mixins -.-> lab-35224{{"Responsives Mauerwerkslayout mit CSS"}} end

index.html und style.css wurden bereits in der VM bereitgestellt.

Um ein Mauerwerkslayout zu erstellen, verwenden Sie die Klasse .masonry-container als Hauptcontainer und fügen Sie die Klasse .masonry-columns als inneren Container hinzu, in den die .masonry-brick-Elemente platziert werden. Das Layout besteht aus "Ziegelsteinen", die ineinander fallen und perfekt zusammenpassen. Die width für ein vertikales Layout und die height für ein horizontales Layout können festgelegt werden.

Um sicherzustellen, dass das Layout ordnungsgemäß fließt, wenden Sie display: block auf die .masonry-brick-Elemente an. Verwenden Sie den :first-child-Pseudo-Element-Selektor, um einen anderen margin für das erste Element anzuwenden, um seine Positionierung zu berücksichtigen.

Für eine größere Flexibilität und Responsivität verwenden Sie CSS-Variablen und Medienabfragen. Der .masonry-container hat CSS-Variablen für die Spaltenanzahl und den Abstand. Die Anzahl der Spalten wird durch Medienabfragen gesteuert, die unterschiedliche Spaltenanzahlen und -breiten für verschiedene Bildschirmgrößen angeben.

<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);
}

Bitte klicken Sie auf 'Go Live' in der unteren rechten Ecke, um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite zu previewen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Mauerwerkslayout-Lab abgeschlossen. Sie können in LabEx weitere Labs absolvieren, um Ihre Fähigkeiten zu verbessern.