Cara Menggabungkan Baris Selain Menggunakan Rowspan
Pasti diantara teman-teman telah pernah menggabungkan sebuah kolom ya, apa lagi dengan table, ketika kita menggunakan table bagi 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 gampang mana apakah menggunakan rowspan apa yang akan kita bikin sesaat lagi, oke jangan kemana-mana simak terus ya teman-teman.
Tadi di paragraf pertama-tama saya telah menulis dan gampang mana apakah menggunakan rowspan apakah menggunakan ini, oke seketika saja, ketika kita menggunakan rowspan kita berarti mesti menggunakan table ya teman-teman, sedangkan table sendiri bagi sekarang ini yakni diantara tag yang telah usang atau sebaiknya tak gunakan, nanti yang kita bikin disini yakni pastinya yang di anjurkan ya teman-teman, oke disini saya mengabil diantara property yang saya dapatkan di w3schools, dimana efek ini bermanfaat sekali bahkan hampir mirip denga rowspan, bagi 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 merancang 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. bila kita lihat dari struktur htmlnya simple bukan , dan sekarang ini coba teman-teman lihat CSSnya, disini yang akan kita untuk yakni 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 dikerjakan bukan, oke saya rasa lumayan hingga disini belajar kita mengenai cara menggabungkan baris selain menggunakan rowspan, semoga bermanfaat dan hingga jumpa di artikel berikutnya terimakasih.
Sumber https://kursuswebsite.org
