0 0
Read Time55 Second

JUST A PERSONAL DRAFT NOTES

grid container
– cara gunaiinya pakai
display : grid;

grid item
– semua anak dari grid container

grid line
– garis horizontal dan vertikcal (row/kollom)
– garis di urutin 1,2 dst

grid cell
– kotakan gridnya

grid area
– kumpulan gridcell

grid gap
– bates/ gutter

how too use grid
1. define grid
2. place item in grid

grid-template-columns : 2fr 1fr ;
*work like flex1 flex2 dst

grid-template-rows: auto 1fr 3fr;
* berarti row 1 auto height
row 2 1fr
row3 3fr

grid-column: 2/4;
dari garis kolom 2 sampe garis kolom 4

grid-row:2/3;
dari garis row 2 sampe garis row 3

grid-template-areas : digunakan untuk menamai individual cell
.div1 {
grid-area: header;
}
.div2 {
grid-area: title;
}
.div3 {
grid-area: main;
}
etc etc

grid-template-columns: 2fr 1fr;
grid-template-areas :
“title title title”
“main header header”
“main sidebar footer”
*pertanda ada 9 kolom dengan nama masing2*

@media screen (max-width: 900px)
{
grid-template-columns: 2fr 1fr 1fr;

grid-tempalte-areas:
“title title title”
“main header header”
“main sidebar footer”;

}

 

link codepen

https://codepen.io/rhomypd/pen/YvWYzP

About Post Author

TahuBanyak

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Previous post Mengatur Responsive image
Next post GULP Exercise

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published. Required fields are marked *