Community-Foren

Suchen Sie nach Themen, Fragen und Antworten in der Community.

Startseite Foren Webentwicklung HTML5 & CSS3 Flexbox in Grid Antworten auf: Flexbox in Grid

  • Ole Mai

    Mitglied
    10.04.2023 um 22:05

    Hallo Adrian,

    ja, es ist möglich, eine Flexbox innerhalb eines Grid-Layouts zu platzieren, um die darin enthaltenen Elemente als Flexbox-Elemente zu nutzen.

    Du kannst dazu ein Grid-Container-Element erstellen und innerhalb dieses Containers ein Flexbox-Element einfügen.

    Beispiel:

    HTML

    <div class="grid-container">

    <div class="flexbox-container">

    <div class="flex-item">Element 1</div>

    <div class="flex-item">Element 2</div>

    <div class="flex-item">Element 3</div>

    </div>

    <div class="grid-item">Grid-Item 1</div>

    <div class="grid-item">Grid-Item 2</div>

    </div>

    CSS

    .grid-container {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    grid-template-rows: 1fr;

    grid-gap: 10px;

    }

    .flexbox-container {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    }

    .flex-item {

    width: 100px;

    height: 100px;

    background-color: yellow;

    margin: 10px;

    }

    .grid-item {

    background-color: blue;

    padding: 20px;

    color: white;

    }

    In diesem Beispiel wird die Klasse „.grid-container“ als Grid-Container und die Klasse „.flexbox-container“ als Flexbox-Container innerhalb des Grid-Containers definiert. Die „.flex-item“ Klasse wird dann auf die Flexbox-Elemente angewendet, während die „.grid-item“ Klasse auf die Grid-Elemente angewendet wird.

    Durch die Verwendung der Flexbox in diesem Beispiel können die „.flex-item“ Elemente vertikal zentriert und horizontal ausgerichtet werden.

    Beste Grüße aus Berlin

    Ole N. Mai