1. April 2023

Mehrspaltiges Layout mit gleichgroßen divs mit CSS Grid

Mit folgendem Code lässt sich mit CSS Grid ein mehr-spaltiges Layout mit divs in gleicher Höhe ohne jQuery oder JavaScript umsetzten.

Darüber hinaus ist in diesem Beispiel zu sehen, wie man Buttons unten im div ausrichtet, ohne dafür „position: absolute“ zu nutzen.

<style>
.grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 25px;
}

@media ( max-width: 768px) {
    .grid { grid-template-columns: repeat(1, 1fr);}
}

.box{ 
    padding: 25px;
    background: #eee;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;       
    }
    
.cta{      
    margin-top:auto;
}
</style>

<div class="grid">
    <div class="box">
        <h3>Box 1</h3>
        <p>Lorem ipsum, dolor sit.</p>
    </div>

    <div class="box">
        <h3>Box 2</h3>
        <a class="btn btn-secondary cta" href="#">Button</a>
    </div>
<!-- ... -->
</div>Code-Sprache: HTML, XML (xml)

Hier gibt es das Beispiel im Vergleich zu einem Bootstrap Spalten-Layout zu sehen: https://www.fbnfrtg.de/demo/css-grid.html

Weitere Beispiele zum Thema „CSS Grid Layouts“ und umfangreiche Erklärungen gibt es hier: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout