Pasti diantara teman-teman sudah pernah menggabungkan sebuah kolom ya, apa lagi dengan table, ketika kita menggunakan table untuk menggabungkan sebuah kolom kita tinggal menggunakan rowspan ya, dimana kolom yang kita berikan efek rowspan akan tergabung, disini kita akan belajar cara menggabungkan baris selain menggunakan rowspan. Nanti teman-teman akan melihat perbedaanya dan mudah mana apakah menggunakan rowspan apa yang akan kita buat sesaat lagi, oke jangan kemana-mana simak terus ya teman-teman.
Tadi pada paragraf pertama saya sudah menulis dan mudah mana apakah menggunakan rowspan apakah menggunakan ini, oke langsung saja, ketika kita menggunakan rowspan kita berarti harus menggunakan table ya teman-teman, sedangkan table sendiri untuk sekarang adalah salah satu tag yang sudah usang atau sebaiknya tidak pakai, nanti yang kita buat disini adalah tentunya yang di anjurkan ya teman-teman, oke disini saya mengabil salah satu property yang saya temukan di w3schools, dimana efek ini berguna sekali bahkan hampir mirip denga rowspan, untuk cara menggabungkan baris selain menggunakan rowspan, kita akan menggunakan property CSS ya itu grid-row-end, mungkin di telinga teman-teman masih asing ya, dengan grid-row-end, kita akan membuat efek mirip seperti rowspan loh teman-teman, oke bagaimana cara membuatanya:
<!DOCTYPE html>
<html>
<head>
<title>Cara Menggabungkan Baris Selain Menggunakan Rowspan</title>
<link rel="shortcut icon" type="image/x-icon" href="oktober/favicon.ico">
<-e-style type="text/css">
*{padding: 0; margin: 0}
body{
background-color: #6EDAF8;
}
.grid-container {
display: grid;
grid-template-columns: auto auto auto;
grid-gap: 10px;
background-color: #2196F3;
padding: 10px;
}
.grid-container>div {
background-color: rgba(255, 255, 255, 0.8);
text-align: center;
padding:20px 0;
font-size: 30px;
}
.item2 {
grid-row-end:span 3;
}
.container{
width: 800px;
margin: auto;
background: #fff;
overflow: hidden;
}
</style>
</head>
<body>
<div class="container">
<h1>Cara Menggabungkan Baris Selain Menggunakan Rowspan</h1>
<div class="grid-container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
</div>
</div>
</body>
</html>-e-
Coba teman-teman perhatikan saya hanya menggunakan div class item dari 1-7 ya teman-teman. jika kita lihat dari struktur htmlnya simple bukan , dan sekarang coba teman-teman lihat CSSnya, disini yang akan kita bagi adalah class ke item2, dan saya memberikan property css yaitu grid-row-end dengan valuenya yaitu span 3 ya teman-teman. oke bagaimana hasilnya:
Bagiamana rapi dan enak dibuat bukan, oke saya rasa cukup sampai disini belajar kita tentang cara menggabungkan baris selain menggunakan rowspan, semoga bermanfaat dan sampai jumpa pada artikel selanjutnya terimakasih.