Wie erstellt man mit CSS Grid und Flexbox responsive Quadrate in einem Rasterlayout?

So erstellen Sie ein Rasterlayout mit responsiven Quadraten

In diesem Artikel besprechen wir, wie Sie mithilfe von CSS ein Rasterlayout mit responsiven Quadraten erstellen.

CSS Grid-Ansatz

Für CSS Grid können wir eine Kombination aus Grid-Template-Columns und dem verwenden Padding-Bottom-Trick, um reaktionsfähige Quadrate zu erstellen. Der Padding-Bottom-Trick weist der Polsterung des Quadrats einen prozentualen Wert zu und stellt so dessen Seitenverhältnis effektiv auf 1:1 ein.

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

.square {
    padding-bottom: 100%;
}

Flexbox-Ansatz

Mit Flexbox können wir eine ähnliche Polsterung verwenden -Bottom-Technik zum Erstellen reaktionsfähiger Quadrate. Wir können die Flex-Elemente auf gleiche Seitenverhältnisse einstellen, indem wir ihrer Polsterung einen Prozentwert zuweisen.

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

.square {
    flex-basis: calc(33.333% - 10px);
    margin: 5px;
    padding-bottom: 100%;
}

Beachten Sie, dass beide Ansätze die Verwendung von Pseudoelementen oder zusätzlichen Wrappern erfordern, um sicherzustellen, dass die prozentuale Polsterung stimmt Wird auf das Quadrat selbst angewendet, nicht auf sein Flex- oder Rasterelement.

Verwenden von Medienabfragen für die Reaktionsfähigkeit

Um das Rasterlayout auf ein zu reduzieren Wenn wir einzelne Spalten auf kleineren Bildschirmen verwenden, können wir Medienabfragen verwenden.

@media (max-width: 768px) {
    .square-container {
        grid-template-columns: 100%;
        flex-direction: column;
    }
}

Fazit

Durch die Kombination dieser Techniken können wir ein Rasterlayout mit reaktionsfähigen Quadraten erstellen, das über verschiedene hinweg ein konsistentes Seitenverhältnis beibehält Bildschirmgrößen und Geräteausrichtungen.

Das obige ist der detaillierte Inhalt vonWie erstellt man mit CSS Grid und Flexbox responsive Quadrate in einem Rasterlayout?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!