Mencacah Halaman
Membagi 1 lebar halaman penuh menjadi beberapa bagian.
Skill yang di butuhkan
css
html
java script
Info
Karena setiap device memiliki lebar halaman yang berbeda maka banyaknya cacahan juga berbeda.
Lebar Laptop 1440 px
ada 12 potongan dengan gap 12px
style.css
.garisPotong {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
.potong {
width: 100%;
height: 100%;
background-color: var(--biru);
}
}
Lebar Tablet 1010 px
ada 12 potongan dengan gap 12px
style.css
.garisPotong {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
.potong {
width: 100%;
height: 100%;
background-color: var(--biru);
}
}
Lebar Mobile 480 px
ada 6 potongan dengan gap 12px
style.css
.garisPotong {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 12px;
.potong {
width: 100%;
height: 100%;
background-color: var(--biru);
}
}
Perhatian
Hal ini bertujuan mempermudah pengembang, jadi demi kreatifitas, pengembang memiliki kebebasan penuh terhadap webnya, jadi jangan terpaku pada aturan, tetapi aturan memang memudahkan.