CSS Grid vs. Flexbox: Was eignet sich am besten zum Erstellen responsiver Quadrate?

Erstellen eines reaktionsfähigen Rasterlayouts mit dynamischen Quadraten

Ihr Ziel ist es, ein Rasterlayout mit reaktionsfähigen Quadraten zu erstellen und dabei sicherzustellen, dass jedes Quadrat die gleiche Höhe hat auf seine Breite ausgelegt und durch eine Rinne getrennt. Um dies zu erreichen, erwägen Sie die Verwendung von CSS Grid oder Flexbox.

CSS Grid

Mit CSS Grid können Sie die Spalten und die Höhe des Rasters definieren der Quadrate als Prozentsatz der Gitterfläche. Hier ist ein Beispiel:

.square-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
    gap: 10px;
}

.square {
    height: 100%;
}

Flexbox

Mit Flexbox können Sie mithilfe der Flex-Wrap-Eigenschaft ein responsives Layout erstellen. Um sicherzustellen, dass die Quadrate ein quadratisches Seitenverhältnis beibehalten, können Sie den Padding-Bottom-Trick verwenden oder ein Pseudoelement erstellen, um die entsprechende Höhe festzulegen.

.square-container {
    display: flex;
    flex-wrap: wrap;
}

.square {
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    border: 1px solid;
    box-sizing: border-box;
}

.square::before {
    content: '';
    display: block;
    padding-top: 100%;
}

Zusätzliche Überlegungen

• Um Text innerhalb der Quadrate zu zentrieren, können Sie die Anzeige verwenden: flex; Eigenschaft mit justify-content: center; und align-items: center;.
• Der Padding-Bottom-Trick kann in älteren Browsern zu unzuverlässigen Ergebnissen führen.
• Um konsistente quadratische Seitenverhältnisse zu gewährleisten, positionieren Sie das Inhaltselement absolut innerhalb der Quadrate.

Das obige ist der detaillierte Inhalt vonCSS Grid vs. Flexbox: Was eignet sich am besten zum Erstellen responsiver Quadrate?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!