Tata Letak Kartu Grid
Termasuk bagian Menguasai CSS dalam perjalanan HTML di Coddy. Pelajaran 42 dari 43.
Tantangan
MudahBuat tata letak 2 kolom sederhana untuk kartu menggunakan CSS Grid.
- Kartu harus ditampilkan dalam dua kolom yang sama besar.
- Harus ada jarak di antara kartu.
Coba sendiri
<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>
Semua pelajaran di Menguasai CSS
1Menguasai Selector, Kombinasi
PengantarSelector KeturunanSelector AnakSelector Saudara SebelahSelector Saudara UmumTantangan Rangkuman7Membangun dengan CSS Grid
Dasar-Dasar GridPenempatan Item dengan grid-rowArea BernamaTantangan Rangkuman3pseudo-class struktural
pseudo-class strukturalMemilih Anak PertamaMemilih Anak TerakhirKekuatan Pola: Menggunakan nth-childTantangan Rangkuman6Halaman Landing
Atur Gaya Bagian HeaderAtur Gaya TombolTata Letak BagianTata Letak KartuTambahkan Sentuhan Akhir9Tantangan Akhir
Sorot Menu AktifBaris Tabel Berselang-selingEfek Hover TombolTata Letak Kartu GridGambar Utama yang BuramLatihan sendiri: Playground Web