# Grid Layout
...
<div class="layout">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
...
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
.layout{
height: 50vh;
background-color: gray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.box{
width: 100px;
height: 100px;
background-color: yellow;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# Spacing Layout
# FR
1fr
1fr
1fr
2fr
1fr
1fr
2fr
1fr
2fr
1fr
3fr
1fr
2fr
2fr
2fr
# Gap
- column-gap
- row-gap
.layout{
...
column-gap: 1rem;
...
}
1
2
3
4
5
2
3
4
5
1fr
1fr
1fr
# Placing Items
- place-items = align-items + justify-items
- align-items (vertical axis), justify-items (horizontal axis)
- start | center | end
.layout{
height: 50vh;
background-color: gray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
align-items: end;
justify-items: center;
}
.box{
width: 100px;
height: 100px;
background-color: yellow;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.layout{
height: 50vh;
background-color: gray;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
place-items:center;
}
.box{
width: 100px;
height: 100px;
background-color: yellow;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
# Try it yourself
- display: grid;
- grid-template-columns: {value}
- column-gap: {value}
- row-gap: {value}
- align-items: start | center | end
- justify-items: start | center | end
display: grid;
;;
;
;
;