Grid-Card-Layout
Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 42 von 43.
Aufgabe
EinfachErstellen Sie ein einfaches 2-Spalten-Layout für die Karten mit CSS Grid.
- Die Karten sollen in zwei gleich großen Spalten angezeigt werden.
- Es sollte etwas Abstand zwischen den Karten vorhanden sein.
Probier es selbst
<html>
<head>
<title>Grid Card Layout</title>
<style>
.card {
background-color: #0252c9;
padding: 16px;
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
/* Add your styles here */
</style>
</head>
<body>
<div class="card-container">
<div class="card">
<h3>Card 1</h3>
<p>This is the first card with some text.</p>
</div>
<div class="card">
<h3>Card 2</h3>
<p>This is the second card with more content.</p>
</div>
</div>
</body>
</html>
Alle Lektionen in CSS Mastery
1Selektoren-Meisterschaft – Kombinationen
EinführungNachfahren-SelektorKind-SelektorDirekter Nachbar-SelektorAllgemeiner Geschwister-SelektorWiederholungs-Challenge4Projekt: Dropdown-Menü
Das Untermenü hinzufügenDas Untermenü anzeigenWeiteres StylingInput und Button7Erstellen mit CSS Grid
Grid-GrundlagenGrid-row ElementplatzierungBenannte BereicheWiederholungs-Challenge2Interaktive Pseudoklassen
PseudoklassenHover-EffekteFokus-EffekteAktiv-StylesWiederholungs-Challenge3Strukturelle Pseudoklassen
Strukturelle PseudoklassenDas erste Kind-Element ansprechenDas letzte Kind-Element ansprechenMuster-Power: nth-child nutzenWiederholungs-Challenge6Landing Page
Header-Bereich stylenDen Button stylenSektions-LayoutCard-LayoutDen letzten Schliff hinzufügen9Abschluss-Herausforderungen
Aktives Menü hervorhebenZebra-TabellenzeilenButton-Hover-EffektGrid-Card-LayoutVerschwommenes Hero-Image