פריסת כרטיסים ברשת
חלק מהיחידה שליטה ב-CSS במסלול ה-HTML של Coddy. שיעור 42 מתוך 43.
אתגר
קלצרו פריסה פשוטה של שתי עמודות לכרטיסים באמצעות CSS Grid.
- יש להציג את הכרטיסים בשתי עמודות שוות.
- צריך להיות רווח בין הכרטיסים.
נסו בעצמכם
<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>
כל השיעורים ביחידה שליטה ב-CSS
3פסאודו־מחלקות מבניות
פסאודו־מחלקות מבניותבחירת הילד הראשוןבחירת הילד האחרוןכוחם של דפוסים: שימוש ב־nth-childאתגר סיכום9אתגרים מסכמים
הדגשת התפריט הפעילשורות מתחלפות בטבלהאפקט ריחוף בכפתורפריסת כרטיסים ברשתתמונת פתיחה מטושטשתתרגלו בעצמכם: Web אונליין