Salah satu hal terbaik untuk desain web khusus adalah sistem grid responsif yang dibuat khusus. Semuanya disesuaikan, termasuk jumlah kolom, ukuran kolom, talang, dan lain sebagainya.
Sebuah grid bisa menjadi responsif dimana item grid berukuran tetap akan berpindah posisi sesuai dengan ukuran viewport.
Dalam tutorial ini, kami akan menunjukkan cara membuat tata letak grid responsif dengan mengikuti langkah-langkah yang dijelaskan di bawah ini.
Nilai "pengisian otomatis" dan "paskan otomatis" memungkinkan pembuatan kisi dengan trek dengan ukuran tertentu sebanyak mungkin sesuai dengan wadahnya. Dengan kata lain, membuat tata letak kisi yang responsif berarti item kisi mengubah posisinya saat Anda mengubah ukuran browser.
Buat HTML
Buat elemen <div> dengan id "grid".
Buat sembilan elemen <div> dengan menulis angka di masing-masing elemen.
HTML:
<div id="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>Tambahkan CSS
- Setel properti tampilan ke "kisi" untuk menampilkan elemen sebagai wadah kisi tingkat blok.
- Tentukan kesenjangan antara grid dalam piksel dengan properti grid-gap .
- Setel kolom templat kisi ke "ulangi(isi otomatis, minmax(150px, 1fr))". Properti ini menentukan ukuran (lebar) setiap kolom dalam tata letak kisi. Di sini, kolom templat kisi mengatur kolom ke ukuran minimum 150 piksel dan maksimum 1fr dari ruang yang tersisa. Trek akan berulang sebanyak yang diperlukan agar sesuai dengan wadah. Nilai "pengisian otomatis" membuatnya berulang untuk trek sebanyak yang sesuai dengan wadah.
- Atur ukuran font elemen <div>.
- Mengatur padding , warna , dan latar belakang elemen.
- Tentukan di mana teks harus ditempatkan dengan properti text-align.
CSS:
#grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 5px;
}
#grid>div {
font-size: 30px;
padding: .5em;
color: #ffffff;
background: #1c87c9;
text-align: center;
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 5px;
}
#grid > div {
font-size: 30px;
padding: .5em;
color: #ffffff;
background: #1c87c9;
text-align: center;
}
</style>
</head>
<body>
<div id="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
No comments:
Post a Comment